I like the definition provided by Simply Accessible that was the result of a survey they did asking folks what accessibility meant to them.

The definition that came out of that was:

Accessibility means a digital world for everyone,

regardless of where, when, why, and how the content that is being communicated is consumed.

It’s communication that’s non-discriminatory in every way.

Simply put:

It means a digital world for everyone, regardless.

Money - Larger potential consumer/user base

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

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

Think about how low of a usage % before you are able to stop supporting a browser version ... such as IE8.

Money/Legal - Work With the Government

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

Money/Legal - Avoid lawsuits and/or bad press

Title III of the ADA requires that public and private establishments provide reasonable accommodations to the disabled and the DOJ has stated that law applies online as well..

So - You can save money by preventing loss due to legal fees, settlement costs, and harm to brand

Moral - Improve the lives of people living with disabilities

Because it's the right thing to do

Benefits Everyone

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

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

Benefits Everyone

I stumbled upon some some tweets by Una Kravets about using a screen reader.

Benefits Everyone

And this one is a reminder that anyone could be using one.

Benefits Everyone - Learning

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

OR listening to the screen reader while you read an article

... doing can help you learn and retain the information

Frankly, some people just prefer one over the other.

Preparing for 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, ...).

Color Blindness: difficulty distinguishing between colors

Color Blindness

Low Vision: blurry, clouded vision, central field loss, and tunnel vision

Blindness: substantial, uncorrectable loss of vision in both eyes

The next classification is Motor Disabilities

Motor Disabilities can be the result of either:

Traumatic Injuries which include things like

• Spinal cord injury
• Loss or damage of limb(s)

OR Diseases and Congenital Conditions such as:

• Cerebral palsy
• Muscular dystrophy
• Arthritis
• Parkinson's disease

The picture is of a child using a mouth stick.

Here's a video via YouTube of someone using one. -------- play video ----------

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

Pictured are some handmade ones found via etsy

Others types include:

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

BUT - Keep in Mind - These folks have limited mobility ... Don't autoplay things page ... but if you do, provide controls to allow users to stop the elements.

Cognitive (approx 9.4 million people)

Cognitive Disabilities Include (but are not limited to):

• 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 ARE the worst ... for everyone) and parallax can literally make people sick

Temporarily Disabled

Temporary disabilities, like a broken arm.

---NEXT SLIDE---

Eventually Less-abled

OR getting older

---NEXT SLIDE---

Environmentally Impaired

Trying to use a computer in a loud or bright area

---NEXT SLIDE---

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

But - what if you couldn't access the internet today? Can you imagine being the only one not able to access it ... without help from someone else?

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 was like this?

When do you give up?

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

At what point, do you give up?

Sadly, this is what much of the web is like for people with disabilities.

HTML IS accessible by default:

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

The Internet We Have Today Is Broken

But, since HTML2, the it was accessible by default

html2 (1995) had text, links, images with alt text and simple forms

This is Yahoo from 1996. It is completely accessible.

So - 1995 - completely accessible internet

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.

Yahoo Today

Looks lovely, but is not very accessible.

Issues We See Today

• Overriding browser defaults (tabindex, outline)
• Using poor semantics
• Audio/Video (without cations/transcripts)
• Javascript (manipulating the dom)

Here's yahoo today ... Yikes... I'm not picking on Yahoo, I wanted a site that I could compare with back in 1995-ish era

Today, We're

• 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

The web we have today ... accessibility is seen as a feature.

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

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

If your site does not have a solid foundation, it's in trouble.

Accessibility needs to be a:

• business requirement
• part of planning meetings
• design requirement (personas)
• development requirement (code standards and special features)
• QA item

---read list---

Accessibility should not be an afterthought.

It's really uncomfortable when you launch a new site and list all of the awesome features it has...

Only to be told that it is completely inaccessible.

Or even worse... sued for it being inaccessible.

Don't let that be you.

Mobile-First & RWD

changing our mindset

we did it before with rwd and mobile first

Accessible Web Design (AWD) OR Accessible-First

We can do it again! Accessible Web Design (AWD) OR Accessibility First

Let's ensure that people with disabilities can easily access the web.

Inclusive/Universal Design

Ramp up the stairs

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

Don't add default implicit roles, states or properties to elements

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

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

❮div hidden aria-hidden="true"❯

❮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!

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

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.

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

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

How can we check this?

use aXe plugin and chrome accessibility tools

Use the nocoffee plugin to test the blur and other filters

Meaningful Without Color

Bad: Error Messaging Relies on Color

Meaningful Without Color

Better: Message Conveyed With Icons

Testing

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

Simple. Do it.

But, DON'T do it with YouTube.

Because it's awful!

Unless ... they are edited

-NOMORECRAPTIONS

Do it with style.

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

Testing Alt Text

Using the Chrome Plugin, Alt text viewer, with a single click, you can see what screen readers will hear.

Figure and Figcaption

    
        Be careful when choosing houseplants if you have pets. They may be poisonous to the animal.

When appropriate, you can use newish html5 elements figure and figcaption.

Off Screen Text for Icons

HTML

CSS

    
    //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
    }
    

Icon fonts - overridden by open dyslexic

Readability and Comprehension

Testing

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

Step 9. Test Using A 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--------

Step 11: Document the Audit

Make note of pages you audit:

• Page (url)
• Date
• What issues were found
• Reason it's an issue
• Current Status
• Notes

Step 12: Provide Code Samples

Document best practices and provide:

• Explanation
• Samples
• WRITE code that relies on accessibilty features (e.g. alert styles must contain role="alert" .alert[role=alert])

Document best practices and provide:

• Explanation
• Samples

Step 13: Add Testing to build Process

So many ways:

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

pa11y http://pa11y.org/