By Mark DuBois
Director of Education, WebProfessionals.org
One, often overlooked, aspect of web design is to make your pages accessible. Besides being the right thing to do, this helps with page rank in search engines (since bots are blind). However, I often see that individuals (particularly those competing in web design contests) have a very limited understanding of web accessibility. There is so much more to this than just supplying alternate text on an image.
First, let’s focus on some of the types of disabilities (there is a wide spectrum and I am only covering some of the more obvious ones). Obviously, there are vision issues (ranging from limited sight to complete blindness). Some individuals are color blind (and there are different versions of this). There are audio issues (again a scale from some hearing loss to complete deafness). Some have cognitive issues (particularly short term memory). Others have the inability to move a cursor in a steady manner (or consistently tap the same spot on a screen).
One must consider all these (and other issues) when making web pages accessible. Let’s examine some of the things we can do to help with some of these issues.
•Limited vision – our pages should be responsive in nature (use percentages instead of absolute widths). Use ems where appropriate (for fonts and more). One should be able to zoom in on a page (whether using hand gestures or Ctrl and the plus (+) key) and still be able to use the page without a significant amount of horizontal navigation.
•No vision – one should be able to listen to the content of the page. This is why a “skip to content” link near the top of the page is so important (so we don’t have to listen to all the navigation and other clutter on the page). Obviously alternate text for images is also important (actually describing the gist of the image where appropriate). In a similar vein, knowi8ng when not to use alternate text on images is also helpful. Try listening to a page where every glyph in a list is described with the alternate text of “bullet.”
•Regardless of what our vision is, the page should be able to be read in a linear fashion. Use CSS to organize the content where appropriate.
•If one uses JavaScript to control a series of choices, there should be an associated button (which can be clicked after the selection has been made). Do not assume that one can immediately jump to the appropriate page once a selection has been activated.
•One should never use color to convey meaning. This does not mean we need to avoid the use of color, only not to convey meaning with it.
•Audio files (and video) should have closed captions.
•With respect to cognitive issues, one should be very careful of opening a new tab/ window with target=”_blank” on a link. Many will try to click on the back icon to try and return to the previous page (only to be frustrated until they discern a new tab or window has opened).
•With respect to motor control issues, one should always be aware that some individuals will not be able to click on a link of only 3 or 4 characters (the linked text should be longer).
Ok, these are some items to consider when making your web pages more accessible. There is a lot more we could discuss (for example ARIA [Accessible Rich Internet Applications] roles), but this is a start.
Surprisingly, I don’t see many of these techniques employed considered in materials submitted in web design competitions. I understand that this is overlooked due to time constraints. That being said, inclusion of these features can often spell the difference between receiving a medal or not in the competition. I also don’t see many of these features employed on a number of actual websites I visit. This means the site is frustrating to use for those who have some disability. It may well mean loss of customers or potential customers. User experience design is also about universal design (for all visitors to a site). What have you done to incorporate the basics (and beyond)?