Web site accessibility

 

Making websites accessible to users with disabilities is not just a good idea — it's the law. Berkeley is required by various state and federal laws to provide full access to facilities and services. Lawsuits and advocacy have already compelled the Berkeley campus to retrofit buildings, re-grade pathways, and make other physical changes that promote access. As more and more University processes move online (student applications and faculty/staff hiring are good examples), accessible website construction will only increase in importance. The Chancellor's office of Academic Compliance and Disability Standards has a Campus Commitment to Technology Access posted that outlines expectations and resources.

LSCR provides accessibility planning and testing as part of all our web design projects. We can redesign your site with accessibility in mind, or we can consult with you on how to improve your existing site. See our page on web design services for more information.

The following information on laws, guidelines, and benefits can help you make sure your site is accessible to all users, whether you do it yourself, work with LSCR, or work with another design group.

The law

Section 508 of the federal Rehabilitation Act defines criteria that websites must meet. In addition, the Web Content Accessibility Guidelines ("WCAG") provides a checklist to test the accessibility of your web sites; in some cases, you can test for compliance automatically using free online services such as Cynthia Says or WAVE. These guidelines and checklists are important, but they represent only the first steps in designing a good and fully accessible website.

Good ideas

Designing for accessibility is absolutely necessary to support all users of your site fully, but the benefits are not limited to disabled people. Designing for accessibility promotes better organization, clearer writing, and more intuitive interfaces. It makes your site friendlier to search engines. It makes your pages easier to maintain, upgrade, and modify for different purposes. Here are some examples of disabilities, the challenges they cause, and the benefits for all users you can create by solving them.

Blindness

Challenges and solutions

Blind people may use screen readers to browse the web. If you are presenting information visually, you need to provide an alternate way for screen readers to render that information. For example, all images should have alternate text, captions, or descriptions. Multimedia content should include transcripts, captions, or descriptive narration. Images that are purely decorative, however (custom list bullets, backgrounds, etc.), should have their alternate text left empty so screen readers will ignore them.

Dynamic pages that use Flash, Javascript, or pop-up windows pose particular problems for users of screen readers. Content that changes after the page first loads may not be accessible at all, or may cause strange behavior by the screen reader.

Forms can also be an issue for screen readers. Each form input should include an associated label. Using form elements in non-standard ways (drop-down lists for instant navigation is one) may cause problems.

Using valid semantic HTML – in other words, calling a heading a heading, not a chunk of text that's large and blue, and calling a list a list, not some chunks of text separated by line breaks and bullet images – will dramatically improve a blind user's experience of your site. Screen readers render headings and lists using pauses and different intonations, which makes your site much more understandable when read aloud.

Benefits for all users

Google is blind. Since search engines have not (yet!) come up with anything that can interpret images and media the way a sighted person does, they all rely on the text content of your site to index and link it correctly. Your search engine ranking depends on the quality of your text content and the structure of the HTML on your pages. Search engines also understand the difference between headings and regular text, and weigh the position of keywords within your code when ranking your page. Paying attention to your code structure will improve your search engine ranking as well as your user experience.

People who browse on smaller devices such as cell phones and PDAs will also benefit. Images may be turned off, resized, or otherwise rendered unreadable – your alternate text content will allow access to the same information.

Color blindness and other visual impairments

Challenges and solutions

Visually-impaired people may increase their browser's text sizes to make web pages more readable. Your design should support different text sizes. Rendering text as images makes it nearly impossible to resize, so please don't do it. A flexible layout will allow users to increase text sizes while not losing the proportions and visual relationships you have designed.

Good contrast is also essential to readability. Your foreground and background colors should be different enough both in brightness and in color for easy reading. You can test your color combinations for sufficient contrast on the web with the Juicy Studios color contrast analyzer, or download a Windows-based analyzer from Accessible Information Solutions.

Colorblind people may or may not set their own colors in their web browsers. Your design should convey important distinctions using more than just color. For example, marking required form fields in red may not be enough for colorblind users without also using an asterisk, bold type, or another distinction. In addition, color blindness affects contrast. Online simulators such as VisCheck show how your page will look to users with various types of color blindness. The color analyzers linked above will also test for contrast as seen by colorblind users.

Benefits for all users

Age-related vision changes are universal – our ability to distinguish small type and low contrast inevitably decreases. Also, users of all ages may have nearsightedness or other vision differences. Allowing users to control their own text sizes makes it easier on everyone.

Deafness and other hearing impairments

Challenges and solutions

Any media content that includes sound should also include captioning or a transcript so the same information is available visually. Error messages or warnings using sound should also have a visual component.

Benefits for all users

Many hearing people use the web without having access to sound. Corporate workstations and public-access computers usually either have no capacity for sound, or have the sound turned off. Computer users in shared offices or public spaces may keep their sound low or off to avoid disturbing others.

Mobility impairments

Challenges and solutions

People with mobility impairments may use the keyboard only, or may use a pointing device without a keyboard. Your site should be navigable using the keyboard only. (This is also an issue for screen readers.) You should also minimize required keyboard input whenever possible. For example, your web application should not require users to input the same information more than once.

Benefits for all users

Reducing mouse and keyboard use will help reduce repetitive stress injuries such as tendonitis and carpal tunnel syndrome. Also, many computer users avoid using the mouse whenever possible to save time.

Finally, as users of web-based applications, we all have experienced sites that make us repeat information we've already given, force us through multiple screens when one would have been enough, or turn off our useful browser and keyboard shortcuts. Frustrated users will turn to other sites if they have a choice. And the ill will generated by a bad interface will damage the credibility and good image of your organization.

Updater: Caroline Boyden. Last reviewed: October 04, 2010