Accessibility & the Web | Feature

8 Simple Tips To Improve Accessibility

Adding a few simple accessibility features to your school's Web site will transform the experience for those with vision or hearing impairment--and everyone else as well.

Few districts these days have the kinds of budgets that enable them to employ Web experts to help schools design and update their sites. Fewer still have Web staffers who understand the basics of making Web sites accessible to people with disabilities. But to vision- or hearing-impaired students or parents, your Web site may appear cluttered, confusing, or completely un-navigable. Fortunately, following a few basic principles of Web design can transform a site into an inviting space for different user needs, devices, and situations, without breaking the bank.

Janet Jendron, program coordinator at the South Carolina Assistive Technology Program, has seen many unintentional design blunders, from bad color schemes to graphics with no description to the overuse of video--all of which can prevent users from getting the information they need from a Web site. 

Jendron runs a program to help South Carolina state agencies create Web sites that are accessible and usable for everyone. To get the work done, she has enlisted a small army of mostly volunteer Web testers, many with disabilities, who have been trained to evaluate pages using a variety of accessibility tools, such as Job Access With Speech, a screen-reading program for the vision-impaired. Also known as JAWS, the program allows users to navigate a page through keystrokes and listen to audio information about the elements that appear on-screen. The Web site testing process is task-oriented: Have a chat session with a librarian; fill out the form; follow a link to a PDF; and try to access it. Their findings are reported back to the state agency, along with a "boatload" of resources to help them improve their sites, she said.

Links and Text
Many of the changes required to make a Web site more accessible aren't complicated, Jendron explained. "When you see someone accessing your Web page with only a screen reader application (which audibly identifies and interprets what's on the screen), the light bulb turns on," she said. For example, a person using a screen reader, looking for something specific on a page, is likely to tell the program, "Read all the links on the page." That's useless if the page displays a lot of links stating, "Click here," "Download," or "Learn more." Instead, Jendron suggested formatting links so they stand out from other text and describe their destinations.

Links and text are only part of what makes a Web site truly accessible, which is why Jendron and her Web testers suggested paying attention to the more complete picture. Here they shared with THE Journal a number of Web site elements that make a big difference in site accessibility for those without a lot of time or money.

Titles and Headers
According to Jendron, the most common complaint she hears from testers is the lack of heading tags on Web pages. A user opens a page and often asks the screen reader to read levels of headings, in order to get the basic outline of the page. "Then he decides where he wants to go," she explained. "Or more important, he decides, 'Do I even want to stay on this Web page?' If none of the topics is anything he's interested in, he'll move on, just like a sighted user would quickly scan the page's content."

She emphasized that the best approach is to specify heading structure for each Web page (and other electronic documents), rather than merely make the heading look different visually by enlarging or bolding text.

Alt Text
The alt (for "alternative") attribute is used in HTML to label a graphic image on a page. If the person creating the Web page doesn't provide alt text for images, a screen reader may read it as "graphic" or "8714.jpg," which can confuse the listener. If the page contains a graphic element that's simply filling up space, the image might not need a description, but it would need alt text that tells a screen reader to ignore it (called a "null alt tag"). If the image is important, such as a photo of students participating in a school activity or a graph showing district budget numbers, the alt text needs to be meaningful and descriptive, such as "Students plant trees for Earth Day" or "2011 district budget shows decline for fourth consecutive year."

If your school's site changes the navigation path from one page to another, it could challenge both accessibility and usability. People without vision, for example, remember a site's navigation when they return to it. If the navigation is inconsistent, they're not as likely to return. Another essential tool, called "Skip to Main Content," lets the viewer ignore navigation elements altogether using a link at the top of the page, which allows them to jump over standing elements and get right to the meat of the page. Screen reader and screen enlarger users benefit greatly from this simple addition.

A busy navigation setup can also be frustrating to users of mobile devices--even those who can see. "If I'm on my Droid looking at a Web page, I may only see a small part of it, maybe a drop-down menu and graphics," Jendron added. "I want to get quickly down to where the real content is. When the page lets you skip to the main content, it takes you to the right place on that page."

Where to Start With Accessibility

AccessIT is the national center on accessible IT in education. This page offers access to free curriculum on Web design and development.

Georgia Tech Research on Accessible Distance Education (GRADE) has an online tutorial to show viewers how to make distance education accessible.

Parent Advocacy Coalition for Educational Rights (PACER) Center provides free training on "universally designed technology," of which Web design is a component.

South Carolina Assistive Technology Program (SCATP) provides links to a number of resources on a "Web Accessibility Resources" page.

WebAIM is an initiative of the Center for Persons with Disabilities at Utah State University. "Everything is there," says Janet Jendron, program coordinator at SCATP, "all the issues, the how-to's. There's no other site like it."

YouTube is a big fish in free captioning help. Learn more about what Google's video site is doing.

Increasingly, school sites are adding video to their pages. Ideal accessibility would mean synchronized text captioning on each video. A second alternative is a description of the video that a screen reader could relay back to the user. Of course, captioning can be very labor-intensive, Jendron observed. Free technology is available for manual and automatic captioning, but it still needs improvement. "When the automatic captioning and translating tools progress to the point where they're really accurate, we'll have a global explosion in accessibility," she said.

Site Clutter
The use of color schemes with low contrast between the text and the background, or the use of color as the sole way to convey meaning, is challenging for those with vision impairments and color blindness. The same is true with font use. If the font is hard to interpret by a person with full vision, you're guaranteed to make it even tougher for other users. Likewise, if you use a tiny button or font for linking, the person who can't use a mouse and is using a mouthstick or head pointer will have trouble interacting with the link.

Additionally, pages cluttered with lots of materials--long lists of links, never-ending animation, music that can't be turned off--can be distracting for users of all kinds. "Clutter confuses everyone, not just people who can't see or don't use a mouse, but also older folks just coming onto the Internet and kids who may have a learning disability," Jendron said. "Many people need help focusing. Cleaner Web sites are better for everyone and convey a clearer message."

Content Management Systems
A typical school may have multiple people contributing to and updating a Web site. Content management systems provide a template for adding new pages and the words and media that go onto those pages. If the basic design is accessible, you can prevent many accessibility errors made by producers inexperienced with accessibility issues. Also, use of a CMS can help keep page design consistent when a team of people is adding materials to the site.

Get Your Own Volunteers
School districts have their own built-in group of people who can help with Web site accessibility: students and employees with disabilities who use assistive technology to access a computer and the Web. "These folks have a vested interest in the site's accessibility and should be called on for their input," stressed Jendron. "Everyone's awareness increases in this way."

Ultimately, efforts to make a school's Web site accessible will be broadly beneficial. "If you design with accessibility and usability in mind from the beginning, everybody has an easier time getting to the information: people with learning disabilities, people who are older, people using smaller screens," Jendron said. "These principles of good design help all of us."