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

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

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

Such as:

• 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

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

• 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

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

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

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

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.

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?

Thanks to ADA, there are certain things you can expect new construction projects.

wheelchair van accessible

height/width.

doors - how they open and how wide

Because these codes are in place that dictate these constraints...IT is Implied for all public and commercial facilities to these standards

So, you do not have to seek out special construction crews just to comply with ADA.

It is implied that any/all commerical construction companies can meet these standards.

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 new skyscraper without a foundation....

You say 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:

...

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:

1. Personas

Update personas to include 3 A's:

2. Contrast

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

How can we check this?

if you are in the design process

How can we check this in sketch?

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:

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:

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

We test using the w3c validator.

this one step will catch a multitude of sins

W3C Validation

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

    Products

  • if it acts like a button, make it a

    button

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

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

• 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 with paragraph tag

    
        text inside of a canvas element

text inside of a canvas element with paragraph tag

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

    Email Address
    

    Search for Gift Cards
    

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

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.