Accessibility Testing

February 2020

Introductions

Travis Lee

tlee@oarc.ucla.edu

Sal Santa Ana

sal@oarc.ucla.edu

Carolanne Link

clink@oarc.ucla.edu

Learning Objective

By the end of this training you will be able to:

​

1. Describe Accessibility Testing and the accessibility standard at UCLA (TL) (5 mins)
2. Download and use the WAVE Plug In for Accessibility Testing (TL) (5 mins)
3. Keyboard Test your website (TL) (5 mins)
4. Summarize Accessible Color Contrast Ratio (CL) (5 mins)
5. Explain how a screen reader navigates a website (SS) (10 mins)
6. Download and use the web accessibility checklist (SS) (15 mins)

Learning Objective

By the end of this training you will be able to:

​

• Describe Accessibility Testing and the accessibility standard at UCLA (TL) (5 mins)
• Download and use the WAVE Plug In for Accessibility Testing (TL) (5 mins)
• Keyboard Test your website (TL) (5 mins)
• Summarize Accessible Color Contrast Ratio (CL) (5 mins)
• Explain how a screen reader navigates a website (SS) (10 mins)
• Summarize the features in Siteimprove (CL) (10 mins)
• Download and use the web accessibility checklist (SS) (15 mins)

Accessibility Testing

​

What are we testing against:

​

• Screen reader for the blind and low vision
• Captions for the deaf and hard of hearing
• Keyboard only navigation for dexterity
• Screen Magnifier for the low vision
• Color Contrast for the colorblind
• Clickable area for the mobility impairment
• Flashing elements for epilepsy
• Cluttered pages for learning disability and anxiety disorders
• Real Text (OCR) for dyslexia

UCLA CAE Numbers

​

WCAG 2.1 AA

Perceivable

• Provide alternatives to non text content such and a transcript for a video
• Color Contrast

​

Operable

• Website can be used by Keyboard only
• Provide enough time for people to read the content

​

Understandable

• Make your website operate in predictable ways
• Help users avoid and correct mistakes

​

Robust

• Maximize compatibility with current and future user agents, including assistive technologies (iPhone)

Keyboard Testing a Website

WAVE Plug-in

Marketing and Social Media

Color: “Contrast Ratio”

Color: “Contrast Ratio”

What is the Contrast Ratio?

​

• “Luminance” (hue, saturation, lightness)
• Range: 21:1 to 1:1
• Pure red (#FF0000) has a ratio of 4:1. I am red text.
• Pure green (#00FF00) has a very low ratio of 1.4:1. I am green text.
• Pure blue (#000FF) has a contrast ratio of 8.6:1.I am blue text.

​

Color: “Contrast Ratio”

What are the WCAG 2.0 AA Thresholds?

• For Normal Text (12 pt, not bold) -- 4.5:1
• For Large Text (14 pt, bold) -- 3:1
• For Large Text (18 pt, unbold) -- 3:1

​

In web pages, pixels are much more common for text size than points:

​

• 14 points = 18.67 pixels
• 18 points = 24 pixels

​

https://webaim.org/articles/contrast/

Color: “Contrast Ratio”

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

​

• User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
• Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

​

https://webaim.org/articles/contrast/

Color: “Contrast Ratio”

​

Color: “Contrast Ratio”

​

Color: “Contrast Ratio”

​

Digital Color Meter

Color: “Contrast Ratio”

​

Screen Reader Testing

​

Alt-Text for Art

​

Siteimprove

​

Tammy Duckworth

Questions and Social Media

• Emails:
• Travis Lee - tlee@oarc.ucla.edu
• Sal Santa Ana - sal@oarc.ucla.edu
• Carolanne Link - clink@oarc.ucla.edu
• General DCP (all 3 of us) - dcp@oarc.ucla.edu

​

​

​

​

​

​

UCLA Disabilities and Computing Program - DCP

www.facebook.com/ucladcp

@ucladcp