Full Stack JavaScript Developer | Educator | Journalist

Accessibility in tech: Section 508, ARIA and WCAG

Added on by Madeline Stevens.

These are the three big accessibility topics that I've been studying in preparation for the CPACC certification from IAAP. 


WHAT IS SECTION 508?

  • Section 508 requires federal agencies to make any electronic info accessible to a person with disabilities following technical standards and performance criteria.

  • Section 508 is an amendment that was added in 1998 to the Rehabilitation Act. Before 1998 the Rehabilitation Act just covered access to buildings.

  • This amendment requires that we make our documents compatible with assistive technologies like screen readers and the magnifiers that people may use to access them.

  • From a technology point of view Section 508 covers just about everything- software, computers, information kiosks, websites, copiers, calculators. It does not cover things like lab equipment.

Resource- Nasa’s Section 508 Awareness Video


WHAT IS ARIA?

 Web Accessibility Initiative – Accessible Rich Internet Applications

WAI-ARIA is a set of attributes that define ways to make Web content and Web applications more accessible to people with disabilities. These attributes can be added to any markup, but is especially suited for HTML.

Resource- MDN ARIA docs

Here’s a quick example: 

You can also watch me explain the following example here on youtube

I created a site with an image carousel, the carousel has left and right arrows so the user can click through the images that make up my carousel. (Note: I now know that carousels are a nightmare for anyone, but especially so for screen readers.)

However, in my HTML code there’s initially no information for a screenreader regarding those left/right arrows. A low vision or blind user would get to that part of my site and the screenreader would just read the word “link.” 

I can add an ARIA label attribute to each arrow with a semantically meaningful blurb for the screenreader to interpret. I decided my ARIA-label would read, “Click to go to left carousel image.” So much more informative than “link.”

Before ARIA (no ARIA attributes on lines 137 or 140):

Screen Shot 2018-08-13 at 4.51.41 PM.png

After adding the following ARIA to line 137 and 140---> aria-label="click to go to left carousel image"

Screen Shot 2018-08-13 at 4.50.13 PM.png

Here is a great resource to see most if not all ARIA attributes. Disclaimer, this cheatsheet can be overwhelming and may not even be helpful to me right now. But paired with other resources maybe it can be.  

Accessibility Web Mapping (ARIA, WCAG, 508)

ARIA attributes have three different types:

  1. Roles (I.e.- informing screen readers and users that something is a search bar)

  2. Properties (I.e.- informing screen readers and users that a text field is required before hitting submit, semantically labeling a left/right arrow within an image carousel)

  3. States (I.e.- informing screen readers and users that a checkbox is checked by default)

My routine right now is to rely on the aXe Chrome extension to point out defects and to suggest the correct solution(s). Then I test that solution with VoiceOver to make sure it really works.


What is WCAG? 

Web Content Accessibility Guidelines (WCAG)

  • Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C).

  • WCAG 2.0 and WCAG 2.1 are stable, reference-able technical standards.

  • They have 12-13 guidelines (https://www.w3.org/TR/WCAG20/) that are organized under

  • Four principles:

    • 1. Perceivable- This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses).

    • 2. Operable- This means people must be able to use the computer by typing or by voice.

    • 3. Understandable- This means clear and simple language must be provided.

    • 4. Robust- Users can utilize different assistive technologies.

For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA. (I.e. with AAA you need to supply sign language interpretation which is difficult for some companies).


It took me a hot minute to find a quick list of the 12 guidelines from this person-

4 Perceivable Principle

  1. Provide text alternative

  2. Provide alternative for time-based media

  3. Provided alternative format

  4. Make it easier for users to see and hear content - separate the foreground from the background

4 Operable Principle

  1. Make all functionality available for keyboard

  2. Provide users with enough time to read and use content

  3. Do not design content in a way that is known to cause seizures

  4. Provide ways to help users navigate (<nav><sitemap>, find content (search, skip to content) and determine where they are (proper page title)

3 Understandable Principles

  1. Make content readable and understandable.

  2. Make web pages appear and operate in predictable ways (just good design)

  3. Help users avoid and correct mistakes

1 Robust Principle

  1. Maximize compatibility with current and future user agents including assertive technologies. This can be accomplished by implementing technology in the following order: HTML, CSS, Javascript.