Alt, Tag, You're It
The 2017 Section 508 Refresh and You
The 2017 Section 508 Refresh and You
The design of mainstream products and/or services so that they are accessible to, and usable by, as many people as reasonably possible. Otherwise known as “Inclusive Design.”
In web design this means you need to code your websites so that assistive technology (AT) can read and categorize the content.
You can read the dull but accurate and detailed article on Wikipedia about Section 508 yourself, but basically, it’s a law that requires all federal agencies to make their technology accessible to all individuals, including those with disabilities.
It does not apply to nonprofits or private companies. It is not related to the Americans with Disabilities act.
In a nutshell, the old law was ditched in favor of existing international guidelines.
It used to be a relatively simple set of 16 rules. Now it’s far more complex.
Agencies must now be compliant with the World Wide Web Consortium Web Content Accessibility Guidelines (W3C WCAG) 2.0 as of March 2017.
Compliance with the new section 508 standards is not required until January 18, 2018.
Websites that have not been altered on or after January 18, 2018 will not be required to be modified to conform to the Revised 508 Standards as long as they were compliant to the earlier version of Section 508.
WCAG sounds like the sound a cat makes hacking something up. But it stands for Web Content Accessibility Standards.
WCAG is more complex than previous Section 508 law. It is divided into three priority areas - Level A, Level AA, and Level AAA. The updated Section 508 law requires compliance with Level A and Level AA.
Here is a good checklist website I recommend for checking your websites against WCAG.
Try your best! Don’t focus on checklists. Use common sense.
Check out these surveys conducted by Web AIM (Accessibility in Mind) of users of assistive technology. Learn from people’s biggest frustrations.
When you make websites accessible, you are helping people, making their day better.
Instead of going over WCAG level A and AA literally line by line, I’d rather we just go over the high level stuff you need to do to ensure your website is accessible.
Avoid CAPTCHAs (Completely Automated Public Turing test to tell Computers and Humans Apart ) at all costs.
It frustrates all users equally. Rely on honeypot methods instead.
No method will ever stop a determined human from posting spam.
One of the most important methods of website navigation by screen reader users is headings.
Ensure your headings are programmatically created (H1, H2, H3 tags etc.) rather than just bold text.
Avoid ambiguous links like “read more” or “click here”. Links should make sense if viewed by themselves.
Screen reader users often navigate from link to link, skipping the text in between.
Screen reader users sometimes obtain an alphabetically-organized list of links.
Provide alt text for images. General guidance is 125 characters or so, but there is no limit to the length.
Do not provide alt text for all images. Decorative images should have blank alt text.
Background images are trickier. Provide text alternatives by using aria-label="" attribute combined with role="img".
Videos need to have closed and open captions.
For WCAG AA, videos need to also have audio description versions available.
Don’t play audio automatically.
The Controls need to be keyboard accessible.
All controls for your site should be keyboard accessible. Check out this example of a fully keyboard accessible mega menu.
Ensure that when you tab into elements, there is a clear visible focus.
Ensure that there are no keyboard traps, where a user can enter a section of the site via keyboard but then can not leave.
Prior to the Section 508 update of 2017, color contrast was not a requirement. Now it is.
Make sure color is not the only way you are communicating things, such as “correct all errors marked in red”
Tabindex tags cause more trouble than they are worth. Watch out for Drupal modules that have tabindex baked in.
Title tags are never really read by screen readers. ARIA "Labeled-by" works better in most cases.
All your uploaded documents, such as PDFs, PPTs and more must also be compliant with Section 508.
Is Drupal Accessible? Absolutely. But it’s not a fire and forget content management system. Your users need to be educated on when and how to use alt text for images for example.
Drupal 8 is more accessible out of the box than Drupal 7.
D8 has added WAI-ARIA landmarks, live regions, roles & properties.
Fieldsets using fieldsets for radios & checkboxes are now in the Form API.
Alt text is required by Default.
D8 is far more semantic (better organized code).
Gesso is the name of Forum One’s starter Drupal theme.
It allows us to quickly add all of the features that we consider best-practices, and what majority of our client's will need in their sites.
Gesso includes a lot of built-in accessibility best practices.
Let's get to your questions and comments!
We appreciate the opportunity to speak about Drupal and Accessibility with such a cool bunch of folks at Drupal GovCon 2017.
Click here to start this presentation over from the beginning.
