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):
After adding the following ARIA to line 137 and 140---> aria-label="click to go to left carousel image":
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.
ARIA attributes have three different types:
Roles (I.e.- informing screen readers and users that something is a search bar)
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)
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) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C).
They have 12-13 guidelines (https://www.w3.org/TR/WCAG20/) that are organized under
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
Provide text alternative
Provide alternative for time-based media
Provided alternative format
Make it easier for users to see and hear content - separate the foreground from the background
4 Operable Principle
Make all functionality available for keyboard
Provide users with enough time to read and use content
Do not design content in a way that is known to cause seizures
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
Make content readable and understandable.
Make web pages appear and operate in predictable ways (just good design)
Help users avoid and correct mistakes
1 Robust Principle