alpha.phila.gov – Update #6: Accessibility

TeampleLogoIt’s important for alpha.phila.gov to be accessible for anyone regardless of physical ability, so we’ve collaborated with the Institute on Disabilities at Temple University to better understand the subject. Program Coordinators Jamie Paoli and Jule Ann Lieberman were kind enough to give us a firsthand account of how legally blind people find information on the internet. The insights we gained have shaped our accessibility strategy.

What we learned

There were three key takeaways from our time with Temple.

  1. A high priority should be placed on properly labeling links.
  2. Proper use of heading tags significantly increases success of finding the right information.
  3. Alternate text on images helps identify the importance of images and should be as descriptive as possible.

Links

Temple University, Jamie Paoli and Jule Ann LiebermanPeople without sight gather information from website with the aid of screen-reader software. Jule Ann showed us how she uses Job Access With Speech (JAWS) to read the content of a webpage. One feature she showed us was rather than having JAWS read the entire page line by line aloud to her, she selected to only have the links read to her which allowed her to skip around the page more quickly. By having only the links read aloud helped her find the content she was looking for faster. The software generates its list of links from what appears inside the <a> tags, and this is what is read to the individuals. Thus, if the link is labeled “click here”, that is what is read aloud. Without the surrounding context, which would take more time to read, the user has no idea where “click here” will take them. One of main the compliments we received was, in addition to having descriptive link text, we also made an effort to label links that would open in new windows. We achieve this by placing a <span> tag inside the <a> that is not visible on the screen, but uses CSS to hide it from the viewport. That way, it will be read to a person using a screen reader.

Code Example:

HTML Code Example of Accessibility

Headings

Another way we learned we could aid the visually impaired was to give them as many options as possible to get to content quickly. Jule Ann explained some of the most frustrating websites are those that do not use adequate headings on pages. A feature of JAWS will generate a list of headings and the heading level, which is read aloud to the user. An experienced JAWS user will listen to this list at 2 to 3 times the pace of normal speech, because the user generally is listening for a very specific piece of content, which they can easily pick out of a list.

Alternate Text

When a sighted person sees an image, they can know instantly what content that image has in the scope of the page. Without specific, descriptive, alternate text a person using a screen reader would not be able to understand why an image is present or what its purpose is on the page. Ensuring there is appropriate alternate text on images, is another high accessibility priority.

Our experience at Temple was as informative as it was humbling. It gave us insight into the experience of people using technology in a way we were completely unaware of. Our visit strengthened our resolve and re-enforced our goal of making a website that is easy to use and accessible to all constituents of Philadelphia.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s