Accessibility Tips for Designers
Wed, 29 Jul, 2009
In web accessibility, much emphasis is placed on making a site's content work with screen readers. While this is a crucial step in the accessibility process, there are many other measures to take into consideration. The way a site looks will greatly impact the user's experience. Designers can have a large influence on a site's web accessibility as it relates to any disability, especially visual disabilities, perception disabilities, intellectual disabilities, memory impairments, and physical disabilities.
Users with physical disabilities may use assistive technologies such as mouth sticks, head wands, joysticks, sip-and-puff switches, foot pedals, or adaptive keyboards when surfing the web. As such, a very complex design can become harder for these users to navigate. By making the site sections clearly organized and consistently labeled, you are making the user's job much easier.
Web Content Accessibility Tips for Designers
- Include a “skip navigation” link at the start of a page that will take the user directly to the main content.
Users can make screen readers utilize these links to skip navigation that repeats itself on every page, so that they can surf your site without being forced to hear the same content repeated on each new page. It is also appropriate to place a “skip” link at the beginning of chunks of complex navigation to allow the user to jump between navigation sections. Customarily, these links are hidden from view in non-text-based browsers. - When hiding a link, use “left-margin: -999px” or something similar.
Do not use “display: none,” as screen readers and text-based browsers will ignore content styled with that. To ensure that all users can access all of the links on your site, make the hidden links visible to all users on focus, for example, use “left-margin: 0px” on focus. - When using color cues, include other visual and text cues.
Users who cannot perceive all colors may not be able to pick up on a cue from a text's color change. For instance, if the last line of a policy statement is colored in red for emphasis, also make it bold or larger. Consider coaching authors to include a textual cue for screen readers, such as starting the last line with the word “Important:” - Make links more visible when they receive focus.
Using CSS, set a high-contrast background and foreground color combination to appear on links when they receive focus. Consider setting the font weight to bold and, if it will not disorient the user or disrupt the presentation of other information, setting the font-size to increase up to 10% on focus. Many assistive technologies allow users to focus on a link before clicking on it. By providing high visibility on focus, you are helping the user understand where he or she is on the page at all times. - Order content meaningfully in the page structure.
Many screen readers and text-based browsers read a page from start to finish by default. Make sure that your page's content and navigation divs are in a meaningful order in the source code. - Make navigation easy and consistent throughout all pages.
When possible, choose a widely-understood navigation layout. Do not change the look or structure of your main navigation elements across pages if you do not have to. - Use CSS to include images.
If including images in your page's design, include them in the style sheet to avoid confusing screen readers or other assistive technologies. When including a purely decorative image in a page's design outside of the CSS, set the alt attribute as empty. - Create a class for urgent callout text and make sure that it is visually distinct.
For instance, make a class that is both red and bold, or blue and a larger size. Encourage your authors to use this class when writing urgent content. - Style the heading tags (h1 – h6) instead of a separate CSS class with appearance of a header.
- Style links to be visually distinct in a block of text.
- Do not use blinking elements.
At best, blinking elements are distracting to users and at worst, they can cause seizures. Web Usability expert Jakob Nielsen has referred to them as “simply evil.” It is best to avoid them altogether.
