Web Accessibility

What does it mean for a website to be accessible?

A disabled person can:

Perceive/understand web content

Navigate around the web

Interact with or use the web

Contribute to the web

What are the three modes of disability?

Permanent Disability

Temporary Disability (or Limitation)

(ex. injuries or restrictions due to

recent surgery)

Situational Disability (or Limitation)

(Situational disability is also known as conditional disability or a situational limitation)(anything that affects your ability to access a site that isn't a permanent disability)

What are three kinds of visual impairment beyond complete vision loss?

Color blindness

Light sensitivity

Night blindness

What are some kinds of impairment besides visual impairment that web accessibility measures can help with?

Motor

Auditory / Hearing

Speech

Neurological

What are some reasons for making the web more accessible?

More inclusive

Make people feel cared about

Benefits for everyone such as faster speed, better SEO

Legal compliance

Avoid lawsuits

Sell products and services to a wider audience

What kind of situational limitation would cause you to make a faster website for?

unreliable Internet

A company's best course of action is to be proactive in both action communication. Evaluation is the easiest place to start. Evaluate your Website and apps for accessibility and then create a plan to remediate any barriers; finally, communicate and document those efforts.

What was the first law (Sec. 508) regarding accessibility for information and communication technology?

The Rehabilitation Act

What protections does the Rehabilitation Act contain?

protections against discrimination due to disability

When was the Rehabilitation Act enacted?

1973

To what does the Rehabilitation Act apply?

federal government jobs and contractors

What law is the most commonly referred to regarding web accessibility?

The Americans with Disabilities Act

When was the Americans with Disabilities Act enacted?

1990

What does the 21st Century Communications and Video Accessibility Act (CCVA) require?

It requires content that is closed captioned on TV to have captions on the web too

What does Title III of the Americans with Disabilities Act prohibit?

discrimination based on disability in places of public accommodation including private businesses

When was the 21st Century Communications and Video Accessibility Act (CCVA) enacted?

2010

What was decided in the Robles v. Dominos Pizza LLC case?

1. The ADA applies to websites

2. The ADA applies to mobile apps

What precedent was established in the Robles v. Dominos Pizza LLC case?

Persons with disabilities deserve to fully participate in society, even for things that may seem mundane

What was the only accessibility-related case for online spaces before Robles v. Dominos Pizza LLC reversed it, and why was it thrown out?

Cullen vs Netflix in 2015, because Netflix isn't a physical place

What is the current gold standard for web accessibility guidelines?

Web Content Accessibility Guidelines (WCAG) of the W3C (World Wide Web Consortium)

What has been a main (but invalid) argument for businesses defending themselves against lawsuits?

That guidelines around accessibility are unclear

What percentage of people are estimated to have some sort of disability?

20%

About how many web accessibility related lawsuits were filed in 2018 and 2019?

2200

For private entities in the U.S., there's no formal federal law or regulation that explicitly mandates digital accessibility, but when courts work through the Americans with Disabilities Act and web accessibility, they repeatedly reference WCAG 2.0 AA as a standard to look to in deciding whether a website is accessible.

2.1 is the current version as of 2018, but the existing

2.0 guidelines from 2010 weren't changed drastically, so we often still just say 2.0

A (minimum level)

AA (standard level)

AAA (exceptional)

A: Considered the easy wins that have little impact on design of the site

AA: This is the gold standard everyone is aiming for.

AAA: Often not necessary, and for some kinds of content this level isn't possible

There are 23 criteria to meet to achieve A status

There are 50 criteria to acheive AA status (including all 23 above)

Alternative text refers to text that shows up in lieu of an image. This helps

screen readers of course, but also may help someone who could load the image

What are two examples of level A accessibility modifications?

Alternative text

Identifiable link text (ME: Don't be afraid of big links or buttons!)

What are some examples of level AA accessibility features?

Having a label's "for" attribute and corresponding input's "id" attribute

Header guidelines:

Only ONE h1 per page

Proper nesting

Descriptive text

Use Distinguishable Colors -- Avoid directions that solely rely on recognition of color

Use Color Contrast

Make sure the site is Keyboard Operable

Not everyone has a mouse or trackpad so navigation should be possible with keyboard shortcuts alone

No Keyboard Traps -- Some sites have dozens of links in the navbar! Let people out of this "trap" by providing a "skip navigation" or "skip to main content" link at the top of the page! If you have to tab through dozens of links in a navbar in order to get to the main content, that's

a pretty terrible experience, even if it's technically accessible given enough determination.

We don't want people to struggle through our site, so we can provide a skip link.

We can

even go so far as to make this link "invisible" to most users.

Why is correct use of headers important in regard to web accessibility?

Most screen reader users use header text to parse content

How do you make sure to make headers that aid in web accessibility?

Proper nesting order for headers is that "h2" must follow an "h1", an "h3" must follow an "h2", and so on.

Using the different headers to change the text size should not be the goal! Instead, the headers should

have text that describes your content in order of importance.

Additionally, avoid making headers that are

"hidden" to screen readers by using only bolded text.

https://medium.com/@krisrivenburgh/wcag-2-0-vs-2-1-aa-how-to-view-them-legally-and-accessibility-wise-4f18cfa2367a

Level A: Providing captions for recorded sound and video

Level AA: Providing captions for live sound and video

Which initiative mandates that any visual content should not flash more than three times in a second on a Web page?

The Three Flashes or Below Threshold

What does the Three Flashes or Below Threshold web accessibility mandate say?

. A web page shouldn't contain any content that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

What is the best practice ratio for color contrast between text and background?

4.5 to 1

What is a good resource for checking that the level of contrast of colors matches the 4.5 to 1 standard?

https://webaim.org/resources/contrastchecker/

Why might someone not be able to use a mouse and rely on keyboard shortcuts for navigation?

because of not being on a particular type of device

Stack overflow for having text only accessible by screen readers

https://stackoverflow.com/questions/26032089/in-html-how-can-i-have-text-that-is-only-accessible-for-screen-readers-i-e-fo#:~:text=visibility%3A%20hidden%3B%20and%2For%20display%3Anone%3B&text=The%20text%20is%20removed%20from,is%20ignored%20by%20screen%20readers.&text=But%20DO%20use%20it%20for,want%20read%20by%20screen%20readers.

Semantic HTML tells a screen reader information about the DOM. Using it will enhance your site's

accessibility as a natural side effect of using it.

What does ARIA stand for?

Accessible Rich Internet Applications

What does ARIA do?

ARIA adds attributes to existing HTML elements to help identify their role, purpose, and what other

elements are connected to it

It's not always obvious what HTML is doing just by looking at it

Particularly true for JavaScript-enabled widgets (e.g., tabpanels)

What is ARIA role for?

defines the purpose.

What does aria-labelledby do?

It connects something to the id of another element that isn't clearly related simply by looking at the HTML alone.

https://tosbourn.com/a-beginners-guide-to-aria/