Web Accessibility means a digital world for everyone, regardless of ability.

Motor (approx 19.9 million people)

The next classification is Motor Disabilities

Motor Disabilities can be the result of either:

Traumatic Injuries, Diseases or Congenital Conditions

Video

Here's an example of someone without arms using the computer. -------- play video ----------

Listing from Etsy's shapedad

There are a lot of different types of Assistive Technologies to aid people with motor disabilities.

Some not pictured are:

• an over-sized trackball mouse
• an adaptive keyboard
• Eye tracking
• Voice recognition software

NOTE - Regardless, most assistive technologies either work through the keyboard or emulate the keyboard.

Cognitive (approx 9.4 million people)

Cognitive Disabilities Include things like:

• Autism
• Attention Deficit Disorder (ADD)
• Dementia
• Down Syndrome
• Dyslexia
• Traumatic Brain Injury
• Vestibular Disorder

Things to consider...

Things to consider for the web:

When it comes to content and features: KISS - Keep It Short and Simple

Clean designs

Easy to comprehend content

Avoid:

-content overload

-blinking animations (can induce seizures)

-things like carousels (that autoplay and cannot be stopped) and parallax can literally make people sick

Environmental Conditions

Have you ever forgotten your headphones on the bus (loud and crowded) or tried using your device outside on a bright and sunny day?

things like transcripts/cc OR good contrast benefit YOU in those scenarios

Temporarily Disabled

Or have you ever had a broken an arm or had an ear infection?

Getting Older

Show of hands, who's NOT getting older?

Money

Larger potential consumer/user base

• Census Data Concludes: Nearly 1 in 5 People Have a Disability in the U.S.

Work With the Government

• Businesses must comply with Section 508 when supplying Electronic and Information Technology

According to Census Data: Nearly 1 in 5 People Have a Disability in the U.S.

Opening your business up to 20% more of the population doesn't mean you'll make 20% more, but at least you won't be preventing it

Also - Businesses must comply with Section 508 when supplying Electronic and Information Technology goods and services to the federal government.

Legal

Title III of the ADA requires that public and private establishments provide reasonable accommodations to the disabled

• The DOJ has stated that law applies to online entities as well

Dealing with legal cases can harm brand/identity and be very costly Reduction of Legal Risk as Web Accessibility Business Case and List of Lawsuits

Title III of the ADA requires that public and private establishments provide reasonable accommodations to the disabled

the DOJ has stated that law applies online as well.

So - inaccessibility can lead to legal fees, settlement costs, and harm to brand/identity

Benefits Everyone

Image from Microsoft's Inclusive Design Toolkit

How many people do you see using curb cutouts and elevators that are not disabled?

All of these folks are able to benefit from the features added for people labeled with having disabilities.

Benefits Everyone

Transcripts: People that want to listen to podcasts and read the transcripts for better learning and comprehension Good contrast levels makes content easier for everyone to read

You can retain information better if you read and hear it at the same time.

So - reading the transcript of a podcast while you listen to it

And good contrast levels makes content easier for everyone to read

Future Technology

By using proper markup and the latest standards, the content becomes more flexible and easier to use tools to extract and present the information to users in different modalities (gym equipment, refrigerator, ...).

Future Technology

Amazon Echo

And conversational interfaces

!!!PLAY VIDEO!!!

Ethical

It's the right thing to do.

It's the right thing to do.

We Are Addicted

From the time we wake up until we go to bed.

We are on one device or another.

Socializing, emailing, working, repeat.

There's No Hope

Even from a young age.

#OneDayWithoutInternet

Could you go without using the web?

What if...

What if you tried going to your favorite site for your favorite online activity....

Annnd, you got a blank screen?

...the page is freaking out and filled unrecognizable errors

Or a ton of unrecognizable error messages...

that you couldn't close.

What if... every website you visited and app you used was like this?

What if ... every site you went to was like this?

What if ... you could no longer use the internet you helped develop?

What if you had to ask someone to click buttons for you....?

When do you give up?

At what point, do you give up?

History - HTML IS accessible by default:

• text and links
• images with alt text
• simple forms

Since HTML2 (1995), the web was accessible by default

just text, links, images with alt text and simple forms

This is Yahoo from 1996. It is completely accessible.

So - 1995 - completely accessible internet

But, Issues We See With Websites Today

• Overriding browser defaults (tabindex, outline)
• Using poor semantics
• Audio/Video (without cations/transcripts)
• Javascript (manipulating the dom)
• Not enough contrast for text elements
• Bad link text (e.g. click here)

Generally speaking, common accessibility issues found on sites today:

• Overriding browser defaults (tabindex, outline)
• Implementing Bad semantics
• Adding Audio/Video without cations/transcripts
• And Javascript added functionality is not accessible without special help ... which I'll talk about later
• Not enough contrast for text elements
• Bad link text (e.g. click here)

Awesome tweet from Scott Jehl:

Accessibility is not something we add to a website, but something we start with and risk losing with each enhancement. It is to be retained.

Uggggg

BUT - now there's a follow up article discussing accessible web components by the same author.

Accessibility is NOT a feature, it's part of the foundation.

Accessibility is NOT a feature, it's part of the foundation.

Think about building a house without a foundation....

When you think you'll add accessibility later.

...would you just shrug it off and say you'll add it later? What's that process look like?

Realistically, you'd probably never do that because it seems like it'd be more work than it's worth, right...?

That said, it's a lot of work to add accessibility to a something after it's already done.

1. Content StrategyImage from http://www.infrontoftheline.com/blog/content.html

Content is King

Content Strategy Considerations:

Readability: Comprehension Alternative Text for Graphics Closed Captioning Transcripts

...

1. Readability: Comprehension Image from: http://uxmastery.com/readability-tests-magic-formula-or-recipe-for-disaster/

Easy To Read and Understand Content so that people with learning disabilities can consume the content.

Testing

Use the hemingway app to test the site's written content

2. Meaningful Alternative Text

• Adding alt text to images is one of the easiest accessibility principles to implement, but I find it one of the hardest to do well.
• Alternative text should present the CONTENT and FUNCTION of the image, short and sweet.
• Link, ect

• Every image must have an alt attribute in order to be w3c compliant.
• But - do all alt attributes need to have text?
• The answer is NO.
• Decorative images (for layout: spacers, dividers) should have null alt text (alt="").

• When we talk about alternative text, it can be either in the alt attribute OR in the surrounding context of the image.
• Alternative text should not:
  • be redundant (be the same as adjacent or body text).
  • use the phrases "image of…" or "graphic of…" or "...logo".

3. Closed Captions

Simple. Do it.

But, DON'T do it with YouTube.

Because it's awful!

Unless ... they are edited

4. Transcripts

Do it with style.

2. UX/Design

Accessible designs DO NOT have to look plain and boring!!!

They can be beautiful and interesting, but the constraint has to be factored in.

Not Plain

Not Boring

Design Considerations:

Personas Contrast Color Readability: Fonts and Text The Focus Outline Animation

1. Personas

Persona from Book Excerpt: A Web for Everyone

Update personas to include 3 A's:

Persona from Book Excerpt: A Web for Everyone

2. Contrast

The difference in color and light between parts of an image. -wikipedia

How can we check this?

By Lea Verou

if you are in the design process

How can we check this in sketch?

By getflourish

if you are in the design process

How can we check this on a live site?

use aXe plugin and chrome accessibility tools

Use the nocoffee plugin to test the blur and other filters

PLAY VIDEO!!!!

3. Color

The key principle of web accessibility for users with color-blindness is: Perceivable: because they cannot see the difference between certain color combinations

Meaningful Without Color

Bad: Error Messaging Relies on Color

Meaningful Without Color

here, we have an example of a not-so-good error messaging system because it's not the easiest to understand without color.

Meaningful Without Color

Better: Message Conveyed With Icons

This is a better example with icons.

Testing

Using the Chrome Plugin, NoCoffee, you can easily change settings to see the page in different hues.

PLAY VIDEO!!!!

Good Example: Provide Options

This example provides an option for colorblind which swaps out the green for blue.

PLAY VIDEO!!!!

4. Readability: Fonts and Text Image from: http://uxmastery.com/readability-tests-magic-formula-or-recipe-for-disaster/

Readability: Easy To Read and Understand Content

5. The :focus Outline

Do NOT remove the default :focus { outline: none; outline: 0; }! Update the css if you do not like how it looks, but do not remove it! It is imperative for ppl that nav via keyboard to see what the focus is on.

PLAY VIDEO!!!!

6. Animation

Things to avoid:

Check out: Designing Safer Web Animation For Motion Sensitivity by Val Head

Moving content can also be a annoying and distracting for some people.

For people with ADD, it makes it difficult for them to concentrate on other parts of the Web page.

But - for others it can trigger dizziness, nausea, migraines AND even seizures (epilepsy)

If you want to use these types of features, provide a way for users to turn them off easily.

PLAY VIDEO!!!!

3. Development

Development Considerations:

Aria Valid HTML Semantic HTML Focus Management (aka - Keyboard Accessibility) Canvas SVG Forms

1. ARIA

ARIA - Accessible Rich Internet Applications -

ARIA: provides a set of attributes that you can add to HTML elements.

ARIA - Accessible Rich Internet Applications -

This standard allows developers to set roles, states and properties on html elements

defines methods to make Web content and Web applications more accessible to people using assistive technology

First rule of ARIA use

First rule of ARIA use: Don't use it!

If you can use a native HTML element or attribute, do it. - straight from the w3c

"ARIA roles add nothing to default semantics of most elements" - Steve Faulkner (source)

Don't add default implicit roles to elements

❮button role="button"❯ button text ❮/button❯

Don't add ARIA state or property attributes in addition to their native HTML counterparts

❮input type="text" required aria-required="true"❯

❮div hidden aria-hidden="true"❯

Don't add ARIA roles and states or properties to long-implemented structural elements

❮h1 role="heading" aria-level="1"❯heading text❮/h1❯

New(ish) HTML5 Elements with default implicit semantics

What this means is that, where implemented, the browser will expose the default implicit semantics of the element so you don’t have to.

❮header❯ maps to role="banner"

❮nav❯ maps to role="navigation"

❮main❯ maps to role="main"

❮section❯ maps to role="region"

❮article❯ maps to role="article"

❮aside❯ maps to role="complementary"

❮footer❯ maps to role="contentinfo"

New(ish) HTML5 Elements: Browser Support

New(ish) HTML5 Elements: Browser Support

BUT IE and Safari do not offer support for all of the role mappings. -Deque University

USE it for Landmark Roles

❮header role="banner"❯

❮nav role="navigation" ❯

❮main role="main" ❯

❮footer role="contentinfo" ❯

Read List

Now that we understand ARIA, let's start auditing!

2. W3C Validation

Note - conformance checking

We test using the w3c validator.

this one step will catch a multitude of sins

W3C Validation

Notes on conformance checking

Warnings vs Errors

Errors - required to fix to validate

Warnings - are more of you may or may not need to fix -> more of a recommendation

3. Semantic HTML

• Headings
  • are meant to help users understand content hierarchy
  • levels should not be skipped (BAD - h1, h2, h4)
• Links, Buttons, Divs and Spans
  • Links - are being styled like buttons, which is fine. Just don't mark them up as buttons.
  • a, div and span ARE NOT buttons

    <a href="#" onmouseover="dropdownmenu()">Products</a>

  • if it acts like a button, make it a

    <button onmouseover="dropdownmenu()" class="btn-primary">button</button>

When you validate your site via W3C, you'll catch embarrassing errors like unsemantic html

Heading tags are for content hierarchy (outline), not for styling If you want an h3 to look like an h4, style it with CSS, but don't skip heading levels. If you don’t like how a button or link looks, style it with CSS. If it navigates, it is a link. Use link markup with a valid hypertext reference If it triggers an action, it is a button. Use a BUTTON element DIVs and SPANs are not buttons and are not natively supported to have keyboard focus, name, role, or value ... why use them and have to add all of this support via more code?

4. Focus Management (aka - Keyboard Accessibility)

Tabbing. Does it: Highlight what it's on?

Do NOT remove the default :focus { outline: none; outline: 0; }! Update the css if you do not like how it looks, but do not remove it! It is imperative for ppl that nav via keyboard to see what the focus is on.

PLAY VIDEO!!!!

Does it: Jump somewhere unexpected?

DO NOT add a tabIndex that is greater than 0.

Do you have to go through the main nav?

Add a skip nav (and make sure it works!) -- add tabindex=-1 to elements you want to be focusable, but not in the normal tab order

Provide a skip nav

Add a skip nav (and make sure it works!) -- add tabindex=-1 to elements you want to be focusable, but not in the normal tab order

Provide skip to page sections

Add other skips or simply set a negative tabindex for elements that are redundant

5. Accessible SVGs

Pixels, My Super-friendly CatAn illustrated gray cat with bright green eyes that is waving it's tail.

    
<svg version="1" id="cat" viewBox="0 0 720 800" aria-labelledby="catTitle catDesc" role="img">
    <title id="catTitle">Pixels, My Super-friendly Cat</title>
    <desc id="catDesc">An illustrated gray cat with bright green eyes that is waving it's tail.</desc>
    <path id="tail" data-name="tail" class="cls-1" d="M545.9,695.9c8,28.2,23.2,42.3,27.2,46.9,21.4,24.1,41.5,40.2,81.1,42.9s65.4-14.2,60.8-26.8-23.1-9.1-51.3-8.3c-35.2.9-66.6-31.3-74.8-63.9s-7.9-63.8-36.8-85.5c-44.1-33-135.6-7.1-159.8-3.4s-48.4,52.5-9.6,45.1,91.4-23.1,123.2-12.7C537.8,640.4,537.9,667.7,545.9,695.9Z" transform="translate(-9.7 -9.3)"></path>
    <g id="head">
        ...
    </g>
</svg>
    

• Use inline SVG (in the html)
• Provide a title (must be the first child of its parent element)
• Provide a description
• link the title and description with aria-labelledby="title desc"
• Use text - because it makes text in graphical content highly accessible.

6. Accessible Canvas

text inside of a canvas element

text inside of a canvas element with paragraph tag

    
        <canvas>text inside of a canvas element</canvas>
        <canvas><p> text inside of a canvas element with paragraph tag </p></canvas>
    

When using canvas you must provide content that conveys the same function/purpose as the bitmap canvas.

It can be as simple as providing text in the canvas. The text is not visually seen, but is read via the screen reader.

Off Screen Text

    
//hiding text elements from the view, but keeping them available to the screen reader
.sr-only {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); //for clip being deprecated
}
    

7. Functional and Logical Forms

Forms

• DO NOT use positive tabindex="1"
• Label everything and link the label to the input

    <label for="email">Email Address</label>
    <input id="email" type="email" placeholder="Email">

Don't forget to label things that have hidden labels (search box). Use .sr-only class that is used for the icon fonts.

    <label class="sr-only" for="search">Search for Gift Cards</label>
    <input type="text" id="search" placeholder="Search for stuff">

Put the label/input group in a li tag and put all of these groupings in a list. Check out: Falling in Love With Forms by Aaron Gustafson

Document

Document best practices and provide:

• Explanation
• Samples

Document best practices and provide:

• Explanation
• Samples

Add Automated Testing:

• NPM: https://www.npmjs.com/browse/keyword/a11y
  • Gulp-a11y
  • Grunt-a11y
  • Tenon
  • Ember
  • React
• pa11y (dashboard): http://pa11y.org/

pa11y http://pa11y.org/

4. QA Testing

testing

QA Testing

Tools Assistive Technology People

Online Testing Tools

• http://wave.webaim.org/
• http://tenon.io/
• http://leaverou.github.io/contrast-ratio/
• http://www.hemingwayapp.com/

Chrome Testing Tools

• Tenon
• Wave
• Chrome Developer Tools
• aXe
• NoCoffee

Demo a few of these...

Ask for a site to test...

Assistive Technology

Screen Reader

---play video-----

------Next slide--------

& Test Using Other AT

Some companies are even providing developers with Accessibility Labs - Yahoo, Comcast, Facebook & Google

So - developers can try out the devices and methods and figure out how to create better experiences.

------Next slide--------

Test With Real Users

BUT - you can never replace seeing the real user experience.

It's always eye-opening to conduct user testing.

You never think somethings really "that bad" ... pause ...

Until you realize someone has to have someone else to click a button for them because they cannot access it.

You will see a different internet.

Please Don't Feel Overwhelmed?

Progress is Better than Perfection

Allow Involvement

Open source provides so much to so many.

So, it's only fair that folks pitch in and help make projects/products accessible.