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

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

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 features added 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 for the web

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

Not accounted for in the census data are things like...

Temporary disabilities, like a broken arm.

---NEXT SLIDE---

Eventually Less-abled

OR getting older

---NEXT SLIDE---

Environmental Conditions

Trying to use a computer in a loud or bright area

---NEXT SLIDE---

We are addicted to the internet.

WE (you and I) are addicted to the internet.

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

We are on one device or another.

There's really no hope for us.

Socializing, emailing, working, repeat.

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

At what point do you give up?

Or a ton of unrecognizable error messages...

that you couldn't close.

When do you give up?

Every website you visited 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....?

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

But, 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

• Override browser defaults
• Bad 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
• Implementing Bad semantics
• Adding Audio/Video without cations/transcripts
• And Javascript is not accessible without special help ... which I'll talk about later

The internet is broken ...

How did we get to this point?

Is accessibility a part of the project cycle?

It doesn't matter what project management method you use...

What matters is that accessibility is part of the discussion

Is accessibility ever a:

• business requirement
• part of planning meetings
• design requirement
• development requirement
• QA checklist item
• feature listed in release notes

So, how did we get here?

---read list---

Or, is accessibility just an afterthought?

We realize or even worse, we're told ... we forgot about accessibility.

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.

We've changed our mindset before

RWD & Mobile First

changing our mindset

we did it before with rwd and mobile 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.

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

Inclusive or Universal Design

Ramp up the stairs

These attributes communicate to assistive technologies a semantic:

• role
• state
• property

ARIA - Accessible Rich Internet Applications -

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

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

Giving us accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and so on.

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

We test using the w3c validator.

this one step will catch a multitude of sins

seeing info, errors and warnings

Info is obviously just general information

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.

Go through the main nav every time?

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

Or do you 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

Or skip different sections of content?

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

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

How do we check this?

Bad: Error Messaging Relies on 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!

Do it with style.

• 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

    
        <figure>
            <img src="images/cat-cactus.jpg" alt="Cat trying to take a bite out of a cactus plant.">
            <figcaption>Be careful when choosing houseplants if you have pets. They may be poisonous to the animal.</figcaption>
        </figure>
    

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

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
    }
    

Testing

Use the nocoffee plugin to test the blur and other filters

Testing

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

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

Use the nocoffee plugin to test the blur and other filters

Step 9. Site Audit Using Screen Reader

---play video-----

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

Step 9. Site Audit 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--------

Document best practices and provide:

• Explanation
• Samples

Document best practices and provide:

• Explanation
• Samples