Although accessibility is an important consideration that I was aware of, a few presentations that I recently attended helped me better understand how important it is to make websites and products accessible to everyone. Bruce Howell, Accessibility Services Manager at The Carroll Center for the Blind, came in to talk to Jackrabbit about accessibility and I attended A11yBos 2018, an accessibility conference. I compiled the list below to reflect the biggest takeaways from listening to Bruce Howell, Janell Sims, Assistant Director of Online Content and Production at the Harvard Law School, and Michael Ryan, Principle UX Researcher at Liberty Mutual Insurance.
Accessibility is the practice of making your product or website as usable as possible for as many people as possible. This includes people with slower internet connections or those on mobile devices.
Mainly, there are important considerations that can make your website more accessible for people with disabilities. There are different types of disabilities to consider: visual, auditory, cognitive, and physical. The overarching accessibility goal for your website should be continual improvement—not perfection—because standards and technologies are always changing.
Why Should We Do It?
There are three primary reasons to make your website more accessible.
- It is good for your business: the more people that can use your website, the more potential customers, clients, and repeat visitors you could get.
- People have a moral responsibility in helping others and making sure everyone has the same opportunities and access to information.
- Making your website accessible may protect you from legal issues. Companies such as Domino’s, Winn-Dixie, and Dunkin’ Donuts have had lawsuits filed against them on web accessibility-related matters.
All three of these reasons can have an impact on your bottom line, so accessibility is not just for businesses that want to go above-and-beyond for their customers.
Below, you’ll find a list of the some of the common accessibility-related issues:
- Color contrast
- Labeling things like form elements
- Keyboard-only navigation
- Real-time messaging – error messages
- Content reflow
- Well-formed HTML – semantic HTML
- Only using color to indicate something
Alternative text, or alt-text, refers to the “alt” attribute in HTML that displays text when images don’t load, is read by screen readers, and helps describe image content for search engines. Below are a few key things to keep in mind:
- Be concise: a rule of thumb for alt-text would be keeping to the length of tweets at about 140 characters long.
- Alt-text should not be the filename of the image, as filenames may not be sufficiently descriptive.
- Alt-text should convey the content, function, and intent (why the image is on the page) and be related to the content around it.
- Use a period at the end, as the pause helps users of screen readers.
- You do not have to precede the description of the image with phrases like “Photo of…”.
- For images like logos, include company name and “logo” word.
- Leave the alt attribute null for decorative and background elements alt=””.
- Use gender-neutral words instead of assuming one’s gender or pronoun.
Page titles should be unique and searchable, and help differentiate among similar pages. For example, different departments within a university or large corporation could have their own About or Staff pages on a website.
Headings should be hierarchical and tagged appropriately in your code (ex. Using
<h1> only once, and only as a page title). This is important for screen readers and helps users skim and navigate from section to section more easily.
Text that is linked to go elsewhere should be descriptive and clear, meaning the language should be more specific than “Click Here” or “Learn More”. A common way of using screen readers is to pull up a list of all the links on a page. Without being descriptive with your link text, someone using a screen reader would have no context to where that “Click Here” or “Learn More” link goes. On something like a news or a blog page, make sure the title or the entire news card is linked and looks like a link (so that users will know that it is interactive).
For sighted users, having two indications that something is a link, such as color and an underline, helps confirm that something is interactive.
Making sure your text is readable on top of any background elements is important for readability, especially for low-vision users. The Web Content Accessibility Guidelines 2.0 dictates that text should have a contrast ratio of 4.5:1 for a AA rating and a 7:1 ratio for a AAA (the more difficult of the two) rating. WebAIM has a ContrastChecker tool that can be used to test your text.
You can also use tools such as ColorOracle to test red/green colorblindness and grayscale vision.
Keep in mind that color should not be the only attribute used to convey meaning. For example, on link text, you could have both color and an underline to indicate that the text is clickable and a link.
For multimedia like videos and podcasts, adding captions or transcripts can help those with hearing loss or cognitive disabilities to access content at their own pace. Automatically-generated content (like captions) can be inaccurate and may misrepresent your content and company. There are services like 3PlayMedia that can help you caption and transcript your media.
No service, product, or website is perfectly accessible, and standards on how to make things accessible for all users are ever-evolving. It is an important issue that deserves consideration by all, as we collectively continue to learn about accessibility and strive for continual improvement.