Alt, Tag, You're It

The 2018 Section 508 Refresh and You

A cartoon drawing of a wide variety of smiling people. They are positioned behind a laptop, a tablet, and an iphone with a large cartoon mouse arrow floating over all of them.
Go to Next Slide

What is Accessibility?

Hands typing on a keyboard

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.

Go to Previous Slide
Go to Next Slide

Accessibility means that anyone, regardless of whether they have the ability to manipulate a mouse, of how much vision or hearing they have, and regardless of whether they have use of all of their limbs can use the exact same websites as a fully-abled person.

Go to Previous Slide
Go to Next Slide
A woman who is thinking

What is Section 508?

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.

Go to Previous Slide
Go to Next Slide

What Changed in 2017?

Blueprints and a pencil

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.

Go to Previous Slide
Go to Next Slide

Give it to Me Straight Doc, How Long Do I Have?

A calendar and clock with a single day highlighted

Compliance with the new section 508 standards are required as of 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.

Go to Previous Slide
Go to Next Slide

What is WCAG?

A comical cartoon of a cat grooming itself

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.

Go to Previous Slide
Go to Next Slide

The Big Take Away

Two hands create a rainbow, with the golden icon of a person between them

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.

Go to Previous Slide
Go to Next Slide

How Do People with Disabilities Use the Internet and Applications?

Before we go into details, let’s humanize accessibility a bit. Section 508 is more than just a checklist you need to pass.

Goodhart's law: "When a measure becomes a target, it ceases to be a good measure."

Go to Previous Slide
Go to Next Slide

Here is How Someone with No Vision Uses His iPhone

The following short video, courtesy of The Blind Film Critic (Tommy Edison), demonstrates how someone who has no vision is able to easily navigate their iPhone, send and receive tweets, and more.

Go to Previous Slide
Go to Next Slide

Here is How Someone with Severe Physical ImpairmentUses His Computer

Allow accessibility advocate Christopher Hills to show you how he is able to professionally edit videos despite his handicap.

Go to Previous Slide
Go to Next Slide

Let’s Go Over the Basics!

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.

A person teaches a classroom
Go to Previous Slide
Go to Next Slide

CAPTCHAs

robot and eyeball

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.

Go to Previous Slide
Go to Next Slide

Headings

An open laptop showing headings

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.

Go to Previous Slide
Go to Next Slide

Links

An icon of a chain link

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.

Go to Previous Slide
Go to Next Slide

Images

An image icon showing a mountain landscape

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".

Go to Previous Slide
Go to Next Slide

Multimedia

A video icon showing a human figure speaking

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.

Go to Previous Slide
Go to Next Slide

Keyboard Accessibility

A mobile phone icon with a keyboard showing

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.

Go to Previous Slide
Go to Next Slide

Color

An eyeball

Prior to the Section 508 update of 2017, color contrast was not a requirement. Now it is.

I really like http://accessible-colors.com/ for testing color combinations to ensure they are WCAG AA compliant.

Make sure color is not the only way you are communicating things, such as “correct all errors marked in red”

Go to Previous Slide
Go to Next Slide

Tables

For data tables, use proper TH tags for table headers. Complex tables with multiple levels of nested headers should be avoided if at all possible.

You can use tables for layout if needed.

Go to Previous Slide
Go to Next Slide

Forms

All labels should be associated with their inputs.

An Easy way to test this is click on each label of your form, and check to see if the input is now in focus.

Don’t time people out without giving them the ability to extend their sessions.

Go to Previous Slide
Go to Next Slide

Avoid Tabindex & Title Tags

A sign with a "no" icon on it

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.

Go to Previous Slide
Go to Next Slide

Documents

All your uploaded documents, such as PDFs, PPTs and more must also be compliant with Section 508.

A closed filing cabinet
Go to Previous Slide
Go to Next Slide

WAI-ARIA Landmarks

Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) is a very powerful method for making your websites exceptionally accessible.

For instance, you can use the “aria-label” attribute to give a background image a description.

This short video by Lisa Seeman gives some great basics tips on using ARIA.

Go to Previous Slide
Go to Next Slide

Drupal Accessibility

A computer showing drupal logos and construction metaphors

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.

Especially when using our Gesso theme.

Go to Previous Slide
Go to Next Slide

Drupal 8 Enhancements OverDrupal 7

A rocket blasts off from an open laptop

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).

Go to Previous Slide
Go to Next Slide

What isGesso?

A lightbulb and pencil are superimposed over a laboratory

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.

Go to Previous Slide
Go to Next Slide

Gesso Accessibility

Gesso has taken the Drupal Accessibility Pledge seriously.

Drupal Accessibility Pledge: "We pledge to make this theme as accessible as it can be. If you find any flaws, please submit an issue. Help us fix them if you can"

Go to Previous Slide
Go to Next Slide

Got More Questions? Forum One Has Answers

Forum One - Extend Your Influence

Visit us on our website or talk to us on Twitter and Facebook!

(Click here to start this presentation over from the beginning.)

Go to Previous Slide
Go to Next Slide