After attending a training workshop on accessibility, I left with a new appreciation for the importance of web accessibility.People with disabilities, affecting their sight or aspects of their lives, use screen readers to enjoy their online experience. So many people use the internet that it’s widely accepted that everyone is online, staring at Youtube videos of cute kittens and birds jumping on paper towels.
But there are people who use the computer without a mouse, or even a monitor when they check their Facebook or email. Creating websites that are easily accessible for everyone, regardless of disabilities, should be an important consideration when designing a website or maintaining sites for organizations. There are legal implications for not having an accessible site, outline by the Americans with Disabilities Act and section 504 of the Rehabilitation Act of 1973, which specifically applies to schools of higher education. Online discrimination is unacceptable, and taking acceptability into consideration is important to avoid this.
Beyond the legal implications, I think keeping accessibility in mind is just good practice for web development. With HTML 5 in full swing, giving semantic meaning to your code not only makes screen reader users much happier, but it also affects your site from a Search Engine Optimization standpoint, allowing Google crawlers to pick up on the intended meaning of content and reflect that in your ranking on Google searches.
The lecture I attended outlined what the Assistive Technology and Accessibility Center (ATAC) at IU considers the top ten most important considerations for accessibility when building a site.
- Text Language
- Page Title
- Alternate Text for Meaningful Images
- Good Heading Structure
- Programmatically Labeled Form Controls
- Working Skip to Content link
- Keyboard Accessibility
- Meaningful HTML Markup
- Captioned Video and Transcripts for Audio
- Careful Use of Color and Avoid Sensory Dependent Instructions
I invite you to take a look at the slides from the presentation for detailed explanations of each of the ten accessibility concerns, but to I would like to focus here on a few that I thought were particularly important. Identifying your text language is easy to do an important. Web users use the internet in many different languages, and if you don’t specify what language your content is in, a screen reader will try to read the text in the user’s preferred language. This can lead to problem such as an Asian user’s screen reader trying to read English content to them in Thai, or going to the FBI website and having it read to you in a British accent (true story, the FBI’s site had a Great Britain language code on it, so a screen reader would read the content to the user with a British accent. It was mentioned in the workshop but I had a hard time finding a citation for this online, I guess the FBI was pretty embarrassed.)
Having a page title is essential, your site looks silly when you save your code as “Untitled.html” and it is especially frustrating to web users using a screen reader, since this is the first thing read to them whenever they access a site. Giving your page a title that clearly and succinctly identifies it is important because many screen reader users are using them because of visual impairments. Since they can’t see the site, having a title which clearly identifies it makes their browsing experience a lot more enjoyable.
Finally, providing alt text to images is really important for people who can’t see the images. Think about if you were describing something you saw to someone over the phone. You would include the most important details of what you saw, enabling the person you’re having a conversation with to understand the context of what you saw. Likewise, when providing alt text, you want to provide a detailed description of the image without going overboard on irrelevant details. Say you have a picture of the cutest kitten in the world.
cute kitten with big blue eyes poking its head out of a jeans pant leg”
You want to provide alt text to your image that will give a screen reader user the gist of the image, without getting hung up on the different shades of brown on its face, or its whiskers, unless you really think these details are important for understanding the image within the context that you have presented it in. If you’re image is decorative, you can have a screen reader skip it by leaving empty alt text (<img alt=”“>).
I highly encourage anyone interested in learning more about accessibility to check out ATAC. Their office is on the third floor of the west tour in the Wells Library and they can help you make your site accessible or show you impressive demonstrations of assistive technology, including screen readers.