Posts Tagged ‘html’

* 13 Tips For A More Accessible Web

Posted on November 17th, 2008 by Dave Johnson. Filed under AJAX, Accessibility, JavaScript.

There are few web projects that I have worked on of late where accessibility has been a high priority. Of course having worked on the Complete UI Ajax framework that is generally used to build internal web applications we were always trying to make our components as accessible as possible, particularly through the use of the keyboard.

In general through there are a few simple things that you can do to make you web applications far more accessible to your users that may use screen readers like JAWS or have to divert from normal computer settings like just using larger than normal fonts or even using high contrast mode.

  1. Remember if something can get focus through the tab key, users with screen readers will find it and the screen reader will describe it to them.
  2. The first is something that I am sure you have heard a thousand times and may or may not have listened. Don’t use tables for layout. I think that I saw this great site about it through Dion. Amongst the many arguments against using tables for your layout is that they have semantic meaning for
    screen readers - that meaning is course that there is some tabular data to follow. So you can imagine it can be confusing when tables are found without any tabular data!

  3. When a screen reader finds a table, users generally assume that is has a header row with column headings - so use the <th> tag to specify the column headers and maybe even put that entire row in a <thead> element.
  4. Use the unordered (<ul>) and ordered lists (<ol>) when appropriate. Unordered lists should even be used for things like menus by setting the display to inline and the list-style-image to something to get rid of the normal bullet.
  5. Always set the alt attribute on <img> tags. When the image is inside of an anchor this attribute should describe the image as the anchor will bring focus to that HTML. If it is just an ornamental image then leave the value of the alt attribute empty rather than ignoring it (this was demanded by a client due to bugs in certain browsers / screen readers).
  6. Use CSS for all images. The previous issue with image tags that are purely ornamental should not happen since you should be using CSS to set background images on your HTML elements. Not to mention the fact that those images should be sprited using something like SmartSprite and so you have to use CSS.
  7. Form elements should always have an associated <label> element with the for attribute pointing to the element that the label is for.
  8. Try to put dynamic HTML (drop down menus etc) into the HTML tree where they appear
    visually such that tab index for focusable elements is maintained. If you generate a drop down but append it to the bottom of the HTML page and position so that it appears visually at the top of the page, you would have to set the tabIndex attribute on anchors in the menu to get the correct tabbing effect.

  9. Don’t use tabIndex.
  10. Any element that has an onclick event on it should be an <a> tag (or at least enclosed in one). This will ensure that it is focusable and the user can then use the enter key to activate the click event. This is also a good reason not to use onmousedown or onmouseup events since those will not be captured by the keyboard. Similarly, if you use onmouseover and onmouseout to do anything that is not visual then you may consider having onfocus and onblur to do the same thing.
  11. If you have headings then use the heading tags! Semantics, semantics, semantics.
  12. Use relative sizings like em for your fonts and other dimensions and check out how the site looks as you change the font size.
  13. Put in a hidden anchor (position absolute, x,y -5000px) near the top of the HTML that contains a message like “Skip navigation” with an href pointing to an another anchor that will skip down to the actual contents of the page such that screen reader users can skip any redundant links and header information.

If you follow that simple list you should make your web sites and applications much more accessible.

For Firefox users I recommend the Firefox Accessibility Extension, which makes testing your pages pretty easy.

Anything to add? Please leave a comment below!

Tags: , , , .

* Ajax Applications in Adobe AIR - eSeminar

Posted on September 26th, 2007 by Dave Johnson. Filed under AJAX, Nitobi, Web, adobe, air, seminar.

I just completed an eSeminar about Adobe AIR and building AIR applications with Ajax and HTML. It was a good turnout (~250 peeps) and I hope that I gave all the attendees a good idea of some of the features of AIR and how to achieve some cool results.

People can download the slide deck here or check out the Adobe OnDemand site to see/hear it in all its glory.

I also wanted to post answers to some of the questions that I did not get to answer during the seminar.

Q: Can you explain in a nutshell offline data store with sql lite?
Through JavaScript or ActionScript one can write to or read from a SQLITE database that can be created on the users computer.

Q: Is it free like adobe reader?

Q: I mean can you mix ajax and flex controls

Q: Must the end user install the AIR Runtime on their machine to run air apps or can they be run on any machine line a flash projector file?
The AIR Runtime can be included in your application and installed with your application. It can also be installed from a Flash file.

Q: A question, mind sound a bit weird but, can you mix up html and flex controls?

Q: AIR can connect to external hardware (card reader etc)?
Not sure about that one!

Q: Can you access the webcam from an AIR app?

Q: The BETA label after Apollo made my manager a bit skeptical on using it through out the whole company, any insight in that ?
I think there is something to that - the difference between Beta 1 and Beta 2 is fairly large. However, I think that from Beta 2 onwards it will be much more stable.

Q: I also did not hear if you heard if u can use ruby on rails with air apps
You can use any server backend with AIR apps

Q: Will AIR be integrated w/products after CS3?
Not sure

Q: Can we make a executable in the future .. which would include the runtime with it
Your AIR application can include the runtime already

Q: What about MySQL?
You can use MySQL on the server but not on the client

Q: You doing any sessions at max?
Andre Charland and Alexei White from Nitobi will be presenting an Inspire session at MAX

Q: When is the final release of AIR 1.0?
Early 2008

Q: AIR release will be synchronize to the WebKit release?
AIR will be very close to Webkit - even providing bug fixes etc to the project

Q: Is iTunes created with AIR?

Q: Do you know when the expected release for AIR (for public use) will be?
The current Beta 1 version is for public use and the anticipated 1.0 release is early 2008

Q: How does this work with ColdFusion? As expected?
Yes as expected - any server technology will work

Q: MS Access mainform / subform - is there a plug-in that does something similiar?
Not sure at the moment

Q: Will there be a separate AIR development environment?
No. You can use Dreamweave, Aptana, or Eclipse at the moment I believe

Q: Where to start? Extensions for dreamweaver or handcoding
Do some hand coding and get familiar with the application.xml file and

Q: Is there an AIR plugin for Dreamweaver 8??
I don’t think so but don’t quote me :)
Q: Can I develop with Flex and use AIR?

Q: Maybe you said, but what rendering engine does AIR use? do we have to account for CSS issues liek we do for IE?
It is Webkit

Q: What must you go through to visually place objects in the appplication where you want them to appear?
Flex, Dreamweaver, Aptana. Just use your preferred HTML IDE

Q: Why would the application not update on its own?
There is update functionality I think - the AIR installer for your application generally deals with upgrades nicely

Q: Will Adobe Air be open source if not what will it retail for?
It is not open source but it is free. Well it is partially open source I guess since it uses WebKit

Q: Is Adobe Air the same thing as Adobe Apollo?

Q: Linux??
Not yet - after V1.0 comes out

Q: Does it go beyond the root of the XML file? for example ../..?
Good question - haven’t tried it!

Q: Is all of this code applicable to all Operating systems or do does it have to be coded differently for each OS
AIR is OS agnostic. You can run AIR apps on any platform although currently there are a few bugs that have been logged and will be fixed

Q: I thought I saw the use of .attachEvent previously; now it looks like a Flash .addEventListener call… what’s the difference?
attachEvent was the Nitobi Ajax Toolkit event attachment so that the code could run in a browser (IE et al) or AIR

Q: Does the system chrome command apply to osx as it does to windows?

Q: Can you change the appearance of the Windows XP window with AIR?
Not that I know of

Q: External files are included in the air file or they are on a server?
They can be either

Q: What about movies? Quicktime etc…
I think the same as Flash or Flex

Q: I assume that this will run on Mac the same why it runs on Vista?
Yes it works the same on both Windows and OS X

Q: Can you configure your AIR app with all the HTML and JS files residing on a web server?

Q: Would you say that AIR replaces the way Director used to be used for desktop apps?
To a certain degree yes. But it is definitely focused more on bringing the web experience to the desktop

Q: What does ADL stand for?
ADL is the name of the EXE used for debugging your AIR apps

Q: Will Air be able to play FLV movies?
Not sure

Q: Does AIR allow for a main form /subform similiar to an Access database? (Not something you have to answer now - just whenever there’s something similiar mentioned)
Yes you just have to build it ;)
Q: So what kind of CSS compliance is AIR in compairson with conventional online browsers?
AIR uses CSS 3.0 like the latest WebKit versions - whereas current versions of most browsers support CSS 2.0. I will probably get lambasted for making such a broad generalization!

Q: Can we use air to rotate 3D models?
Why not!

Q: How would this compare to Google Gears? Especially the offline capability.
I think that AIR provides a lot more than just offline capabilities like Google Gears does. It provides cross platform file IO, drag and drop, windowing and more

Thanks for all the questions and feel free to post more below!

Tags: .