Monday, July 19, 2010

Making accessible web sites - a brief guide

A major part of my internship has been researching accessibility issues on the web. You do not need any fancy accessibility features like text enlarging buttons or widgets that will read out the text on the page. Rather, most accessibility problems on the web are solved simply by using good coding practices. Well written code will allow assistive technology to correctly interact with your website. Below are a few key points that will help make your website more accessible.

Pay attention the the w3c standards for HTML
It is incredibly important important to make sure your code is standards compliant. While newer browsers are fairly good at dealing with HTML errors, your site is far more likely to show up different in older and simpler browsers. And if older browsers are going to have trouble reading your code, you can be sure assistive technology such as screen readers will have trouble as well. Run your website through the W3C validator and eliminate any errors or warnings it shows.
Another common problem is when people don't use the recommended tags for different html elements. Make sure you use h tags for headings & titles, strong for bolded text. ul or ol should be used for list content, even if its not going to be displayed like a list (this includes navigation links as well). Avoid using tables for anything but actual tabular data, and always use row & column headers.

Provide subtitles and/or video description for multimedia

Most developers these days know to add an alt tag to every image as a description (in fact your code will return errors if you do not), but very few include subtitles & video description in multimedia. Make sure that you have an alternate medium for any information you provide that isn't text. If you have any images that convey large amount of information, such as graphs, use a long description instead of just an alt description. And if you are using flash for your website, chances are there will be major issues for anyone using assistive technology to interact with it.

Be careful with your forms
Forms are often written without accessibility in mind. Make sure you add a label tag for each field. Also, its often helpful to add a tabindex to make sure that fields are presented to the user in the correct order.

Think about how people with disabilities use the web
People with screen readers or other forms of assistive technology often browse the web a bit differently. They will often bring up a list of headers in order to skip to the section of the page they are looking for, which is why it is very important to use h tags. They also may skip between the links on a page looking for what they need, so it is important to have the text in the link be something that describes what you are linking to, rather than something non-descriptive like "click here".
Another major problem related to this is that many people with disabilities do not use a mouse. Many interactive web technologies, such as javascript, use mouse movements as a cue to trigger events on the page. If you have interactive content on your page, make sure that it can be interacted with using speech recognition software and even just a keyboard.

You can use the incredible WAVE tool developed by webaim to help highlight these and other potential issues with your site. Simply provide it with a URL for your site and it will show problems, as well as elements that commonly are done wrong like forms.

These are just the major accessibility issues I see day to day. While this is not a comprehensive article, it should help you correct most issues on your site.

No comments:

Post a Comment

Commenters must avoid profanity, harsh language and disparaging remarks on the basis of gender, race, class, ethnicity, national origin, religion, sexual orientation or disability. All comments to the blog are moderated by AAPD, and can be subject to removal at any time.

Please use the comments section to engage in the ongoing dialogue between our program funders, current and former interns, our colleagues, and the broader disability community, and to respond to intern posts that intrigue you, to share your own stories, or to simply express your gratitude for being allowed into the world of our summer interns.