Web Accessibility Crash Course

Good morning!

Gerard K. Cohen Lead Accessibility Strategist, Wells Fargo Digital Solutions for Business (DS4B)

Pluralsight:Meeting Web Accessibility Guidelines

http://bit.ly/2rkD0hk https://www.pluralsight.com/courses/web-accessibility-meeting-guidelines

Web Accessibility Crash Course

Today, I am going to be giving you a FRAGMENT web accessibility crash course. It's a crash course because I am going to attempt to speed through some very key topics to consider. The goal is that you can get up and walk out of here with some real relevant knowledge that you can use to make an impact today, without making your head hurt too much. all within the span of an hour. There is quite a bit to cover, so I will ask that you please keep your questions until after the presentation. I will still around to chat with you or you can email or tweet me later on. the slides will be online so dont worry about taking pictures of the screen or trying to write down any urls i am sharing.

Because this is a crash course, I have to assume that youre pretty new to accessibility, so before I get into the technical stuff I am going to go over the what, who, and why.

What is web accessibility?

Usability for people with diverse abilities.

Usability

Who are you leaving out?

Glossary

Assistive Technology (AT)

a11yAccessibility

ADA Americans with Disabilities Act

Americans with Disabilities Act July 26, 1990

Together, we must remove the physical barriers we have created and the social barriers that we have accepted. For ours will never be a truly prosperous nation until all within it prosper.

WCAGWeb Content Accessibility Guidelines

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."

ARIAAccessible Rich Internet Applications

"It 's almost criminal that programmers have not had their feet held to the fire to build interfaces that are accommodating for people with vision problems or hearing problems or motor problems."

Types of Disabilities

Physical

Limitations in muscular control

Injury

Amputation
Spinal Cord Injury (Paralysis)
Loss/ damage of limbs
Repetitive Stress Injury
Situational: Cast/ sprain, lack of mouse

Illness

Parkinson's
Muscular Dystrophy
Arthritis
Multiple Sclerosis

AT for Physical Impairments

Specialized keyboards/ mice
Switches
Sip and Puff
Head/ Mouth Stick
Voice Recognition/ Eye tracking

Solution:Full Keyboard Support

Cognitive Mental Impairments

Mental Impairments

Memory
Attention
Comprehension
Problem Solving

Solution: Content

Short, focused tasks
Simple Interactions
Easy to understand language
Pause/ stop animations or videos
Structure/ Layout

Visual Vision Impairments

Vision Impairments

Color Blindness
Low Vision
Blindness
Situational: bright sunlight, light/ small text, forgot glasses/ lost a contact lens

Color blindness is the inablity to see the difference between colors, such as red and green or yellow and blue, or it could be deficiencies in being able to see specific colors like red, green, or blue. While there is a level of color blindness that causes a person to see in grayscale, it is the most extreme and less likely in comparison to colors just not looking like they should. for example, reds may look brown, and yellows may look like red. Color blindness is mostly an issue for men, potentially 10%.

Low vision is basically partial vision loss. it could be that things dont looks as sharp or could be limited field of view like tunnel vision. It is mostly an issue for the elderly but can be caused by things like macular degeneration, glaucoma or cataracts.

Lastly is blidness, or a complete or uncorrectable loss of vision. This is the one that most people think of when accessibility is mentioned, but in reality this a much smaller occurence compared to the other types we have talked about.

Vision impairments can be situational: FRAGMENTS

AT for Vision Impairments

Screen Magnifiers
High Contrast Mode
Screen Readers

Solutions

Avoid small text
Color Contrast
Responsive Web Design (Relative Units)
Provide Alternative Content

Auditory Hearing Impairments

Partial or complete hearing loss (Deafness)

AT for Hearing Impairments

Hearing Aid
Speech to Text

Solutions

Captions/ Transcripts

Why?

Equal Access

42%popular federal gov't websites fail accessibility tests

International Trade Administration (trade.gov)
Internal Revenue Service (irs.gov)

March 8, 2017 - Information Technology and Innovation Foundation (ITIF)

60%increase in accessibility errors over the last 5 years for Alexa Top 100 sites

70 sites failed color contrast

March 1, 2017 - WebAIM

Tim Cook CEO, Apple

"For us, we believe very deeply that accessibility is a human right, and we try very hard to make all of our products accessible for everyone because of that. It's a basic value."

Financial

Satya Nadella CEO, Microsoft

"We must make Microsoft products accessible to the more than 1 billion people globally of all abilities. This is a shared goal. Universal design is central to how we realize our mission and will make all our products better. Along with our Senior Leadership Team, I will continue to devote my time and passion to this priority"

Selfish

Certainly, at some point in your life, you are going to experience some kind of difficulty. It might be temporary or situational, as we have discussed.

It could be a little more permanent than situational. We often talk about people that have disabilities as if they are born with them, but we never consider people developing disabilities. The grim reality is that we are just one accident or condition away from developing a permanent disability. Even more certain, but definitely less grim is old age. We are all getting older everyday and getting old means things get a little harder to see, a little harder to hear, a little harder to understand. You will definitely be slower to move and a lot more feeble. My hope is that all the work I am doing now, I will selfishly benefit from if I can make it to old age.

Law

How?

Top 7 Accessibility Considerations

1: Get your <`head`> right

Set a `doctype`

<!doctype html>

Set the document `lang`uage

<html lang="en">

Values are ISO 639-1 Language Codes

Extra tip: lang can be used on any element to set the language.

Set the `charset`

UTF-8 is the recommended encoding

Set the <`title`>

<title> Something unique and descriptive</title>

Tip: Page - Section - Site

Do not disable zooming!

Set the proper viewport

2: Navigation

HTML5 Landmarks

<header>
<nav>
<main>
<aside>
<footer>

Google "HTML5 Landmarks"

Skip link

Allows skipping of repetitive navigation
Needs to be the first focusable item on the page
Does not need to be visible at all times, can be hidden until focused
Helpful for physical impairments and blind users.

Skip link: Code


                    
                      Skip navigation
                    
                    ...
                    
                      ...

Google "Skip Links"

Headings

<h1> - <h6>
Used heavily by screen reader users
Also improves comprehension and discovery for all users, especially helpful for users with cognitive impairments
Contrary to popular belief, no such thing as document outline.

Headings: Usage


                    Purpose of page
                    Sub-headings
                      Sub
                        Sub
                        ...
                    Sub-headings
                    Sub-headings

Style does not dictate hierarchy

Just because it's big text doesn't make it a heading. Just because it's small text doesn't mean it can't be a heading.

Additional Navigation Advice

Stay consistent
Consider a sitemap
Consider site search functionality

3: Color

Color Contrast

The difference between background and foreground colors
Contrast ratio of 4.5:1 minimum
Be careful or text absolutely positioned over images, as in fluid/ responsive design

Google "Color Contrast Checker"

Use of Color

Do not use color alone to convey meaning

4: Media

Images

Images must have descriptive alternate text

Images: Alternate Text

Images: Decorational

Always use the `alt` attribute!

Don't use the title attribute

Don't use images of text

Background Images? Images using CSS

Still need alt content if they provide meaning/ context

Visually Hidden Text

Foundation: show-for-sr
Bootstrap: sr-only

Hint: Use this for your skip link


                    .visually-hidden {
                      border: 0;
                      clip: rect(0 0 0 0);
                      height: 1px;
                      margin: -1px;
                      overflow: hidden;
                      padding: 0;
                      position: absolute;
                      white-space: nowrap;
                      width: 1px;
                    }


                    
                      
                      some descriptive content

SVG

If using img with SVG as the source, add role="image"
If using <svg> directly best thing is to hide the SVG from screen readers and use visually hidden text



                    
                      
                      
                      some descriptive content

CAUTION! Be careful with aria-hidden

Audio/ Video

Provide captions/ transcripts
Do not autostart!
Provide a way to pause/ stop

Captioning

Can be done for free!

YouTube
Amara

dotSub

Don't go with auto-captioning without reviewing!!

5: Link vs Button

Links are for navigation
Buttons are for actions on the page

Bad Links


                    ...
                    
                      ...

Buttons

Problems with using links as buttons?

Semantics
Keyboard Interaction

Bad Buttons: Redux

...

6: Forms

Label all the things!

Explicit Labels


                    
                      Username

Implicit Labels


                    
                      Username

Placeholders are not labels!

Always label all the things!

You can use visually-hidden CSS to visibly hide labels

Groups need labels too

Use <fieldset> and <legend> to properly group items


                    
                      Group Title
                      ...

Label all the things, including groups!

Required for groups of checkboxes and radio buttons.
Beware of deep nesting.
If you need, you can hide the legend with visually-hidden CSS.

Form Input Validation

HTML5 validation balloons are not accessible yet.
Do not use color alone for error indication.
Identify required fields using HTML5 required attribute
When possible, give a helpful suggestion on how to correct the error

7: Keyboard Focus

Proper Focus Indication

Never disable/ remove outline, {outline: 0;}
Unless providing your own focus indication
Ensure proper color contrast

All interactive elements are operable by keyboard

You need to be able to at least tab to everything.
Links, buttons, and form elements are already focusable.
Beware of keyboard traps!

Proper focus order

Focus should move in a logical and predictable manner.
Focus order should match visual order.
Visual order should match the DOM order.
Avoid changing context.

Frameworks and Libraries

Angular

Angular v1: ngAria

Angular 2+

ngAria?

Additional Tests


                    // .eslintsrc
                   {
                      "extends": ["react-app", "plugin:jsx-a11y/recommended"],
                      "plugins": ["jsx-a11y"]
                    }

Good morning!

Gerard K. Cohen Lead Accessibility Strategist, Wells Fargo Digital Solutions for Business (DS4B)

Pluralsight:Meeting Web Accessibility Guidelines

Web Accessibility Crash Course

What is web accessibility?

Usability

Who are you leaving out?

Glossary

Assistive Technology (AT)

a11yAccessibility

ADA Americans with Disabilities Act

Americans with Disabilities Act July 26, 1990

WCAGWeb Content Accessibility Guidelines

ARIAAccessible Rich Internet Applications

Types of Disabilities

Physical

Injury

Illness

AT for Physical Impairments

Solution:Full Keyboard Support

Cognitive Mental Impairments

Mental Impairments

Solution: Content

Visual Vision Impairments

Vision Impairments

AT for Vision Impairments

Solutions

Auditory Hearing Impairments

AT for Hearing Impairments

Solutions

Why?

Equal Access

42%popular federal gov't websites fail accessibility tests

60%increase in accessibility errors over the last 5 years for Alexa Top 100 sites

Tim Cook CEO, Apple

Financial

Satya Nadella CEO, Microsoft

Selfish

Law

How?

Top 7 Accessibility Considerations

1: Get your <head> right

Set a doctype

Set the document language

Set the charset

Set the <title>

Do not disable zooming!

2: Navigation

HTML5 Landmarks

Skip link

Skip link: Code

Headings

Headings: Usage

Purpose of page

Sub-headings

Sub

Sub

Sub-headings

Sub-headings

Style does not dictate hierarchy

Additional Navigation Advice

3: Color

Color Contrast

Use of Color

4: Media

Images

Images: Alternate Text

Images: Decorational

Always use the alt attribute!

Don't use images of text

Background Images? Images using CSS

Visually Hidden Text

SVG

Audio/ Video

Captioning

5: Link vs Button

Bad Links

Buttons

Problems with using links as buttons?

Bad Buttons: Redux

1: Get your <`head`> right

Set a `doctype`

Set the document `lang`uage

Set the `charset`

Set the <`title`>

Always use the `alt` attribute!