Web accessibility, in a broader term, refers to the practice of making your website usable by as many people as possible including those with slow network connections and people accessing your website from mobile devices. In this article, however, we will be discussing specific tips, tools and practices that your organization can use to ensure compliance with the Americans with Disabilities Act (ADA), Section 508 standards and as outlined in W3 Guidelines
Why should we care?
Nearly 20% of people in the United States have visual, hearing, mobility, or cognitive impairment. Organizations in the United States, European Union, France, Ireland, Finland, Italy, China, and Japan must comply with applicable Accessibility laws or face legal consequences.
Adhering to web accessibility standards and best practices is not just the right thing to do; it’s also good for search engine optimization, because better coding practices improve your website’s visibility on search engines.
Common accessibility issues
People with blindness, low-level vision, and color blindness may have trouble using a website if the contrast between foreground and background colors is low, or if the font size is too small, or if the overall text clarity – legibility (clarity of letters) and readability (clarity of text blocks) — is poor.
Among other common accessibility issues are inadequate keyboard navigation and visual focus indicators, missing or poor alternative text on images, misleading links, non-resizable text, and poor or missing ARIA mark up for screen readers — software that converts text to speech or Braille.
Screen readers rely on HTML and ARIA mark up to understand and translate the content of a web page. To interact with assistive software, a blind person uses a keyboard or Braille display. That’s why if the navigation is not accessible via keyboard, blind people and people with mobility impairments can not navigate the website, and if images have no alternative text specified then screen readers can not read them.
Your organization needs to take some extra steps to accommodate users with cognitive issues ranging from intellectual disabilities to memory loss to mental illnesses to learning disabilities. This group of people may have difficulty understanding content and completing tasks or may be confused by inconsistent webpage layouts and navigation, long text and animated content.
In order to allow users with hearing disabilities to access audio and video content on your website, you need to provide text alternatives — text transcripts or video captions – with the exception for streaming live video.
Website Accessibility Best Practices:
- Implement clear and logical layout design and consistent navigation, including semantic HTML and ARIA mark up used by screen readers and other assistive software.
- Create a page outlining approach, changes and improvements to your organization’s website accessibility.
- Include alternative contact options: a contact form, a phone number, or a sign language video interpreter service, SMS text for sending messages over the phone or a web chat service.
- Provide meaningful alternative text for all images on the website.
- Avoid using URLs as text links. Example: www.onlineresource.org should be replaced with a meaningful description of the resource; otherwise a person with a disability using a screen reader would hear –“double u, double u, double u online resource dot org.”
- Substitute “Read more” and “Click here” links with more informative descriptions such as “Read More to Learn About Your Organization”, or “Click here to download our Action Kit”. Alternatively, you may implement “Read more” and “Click here” links as buttons, so assistive software wouldn’t parse them.
- Make sure the website content is accessible via keyboard and users can navigate your website without a mouse.
- Make sure the website color contrast meets WCAG 2.1 guidelines.
- Body text should be a minimum of 16 pixels with 25% of the font size spacing between lines.
- Allow font resizing in style sheets by using a measure other than pixels, such as em, pt, or relative sizes. You can place controls at the top of each page for users with disabilities to select font size, switch to black and white mode, and turn off image display.
- Provide text transcripts for audio content and captions for video materials.
Web Content Accessibility Guidelines (WCAG) 2.0
Facebook Accessibility Help
Google automatic captions on YouTube.
A sign language video interpreter.
Color/Contrast Accessibility Tool by Google
Using the “alt” attribute of the <img> element in various situations.
WAVE (Web Accessibility Evaluation Tool)