Usability, Accessibility, and the Web
Introduction to the main concepts
University of Birmingham, UK
cs.bham.ac.uk/~vxs
MathJax Consortium
mathjax.org
Progressive Accessiblity Solutions
progacc.com
Recap
- Usability
- safe, effective, efficient, enjoyable
- Universal Design
- Design that is usable by all people
- Accessibility
- Usability for all regardless of their special needs
- The Web
- A superset medium
Overview
- The Web and Accessibility
- Defining Usability and Accessibility
- Separation of concerns revisited
- The full webstack
- Defining Accessibility
- For web sites in general
- For documents in particular
- Evaluating Accessibility
General Web Usability
Usability of Web Design defined by:
- Learnability: How easy is it for users to accomplish basic tasks the first time?
- Efficiency: How quickly can they perform tasks once familiar with the design?
- Memorability: How easy is it to reestablish proficiency after some absence?
- Errors: How many errors do users make, how severe and how recoverable are they?
- Satisfaction: How pleasant is it to use the design?
Web Accessibility
What if my user has special needs?
👁 Visual: blindness, low vision, impaired vision, distracted vision
👂 Aural: deaf, hard of hearing, distracted hearing
🖐 Movement: no mouse use, slow reaction time, limited fine motor skills
🧠 Cognition: Dyslexia, Dyscalculia, Distraction, Memory deficits
We are all not fully able at some point in our life
The web is accessible by default. If it's missing, we broke it ourselves.
Defining Accessibility
Accessibility is a process focusing on people
- Web Content Accessibility Guidelines (WCAG)
- ~60 "Success Criteria" across 3 Levels: A, AA, AAA
- A&AA is the legal basis in most countries, AAA optional/ideal
- many criteria cover forms & applications, not "just" content
- Accompanying specs:
- Shorter: W3C Accessibility Principles WebAIM WCAG Checklist
- More: WebAIM article
Notes
- many parts not (too) relevant since not under author control (e.g., LMS, IT)
- Section 1 (in part), 2.1, 2.4 (in part), 3.1, 4 (easy)
- many criteria cover forms & applications, not "just" content
- Accompanying specs:
- Shorter: W3C Accessibility Principles WebAIM WCAG Checklist
- More: WebAIM article
POUR Principles
WCAG's core principles:
All content must be
- Perceivable
- Operable
- Understandable
- Robust
for all users.
A selection of WCAG success criteria
1 Perceivable
- 1.1 Text alternatives
- 1.1.1 All non-text content that is presented to the user has a text alternative that serves the equivalent purpose [...]. (with exceptions)
The big questions: * Can every content be described as text? * Can complex diagrams by perceived by a description alone? * Is math mode text? Always? Sometimes? Where do we draw the line?
A selection of WCAG success criteria
1.3 Adaptable
- 1.3.1 Info and Relationships Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- 1.3.2 Meaningful Sequence When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
- 1.3.3 Sensory Characteristics Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.
- 1.3.4 Orientation Orientation of web content is not restricted to only portrait or landscape, unless a specific orientation is necessary.
A selection of WCAG success criteria 1
1.4 Distinguishable
- 1.4.1 Use of Color Color is not used as the sole method of conveying content or distinguishing visual elements.
- 1.4.3 Contrast Text & images of text have a sufficient contrast ratio
- 1.4.4 Resize text The page is readable & functional when zoomed
- 1.4.5 Images of Text If [possible], text is used to convey information rather than images of text
- 1.4.10 Reflow Content can be presented [at 320px width] without loss of information or functionality, and without requiring scrolling in two dimensions [with exceptions]
- 1.4.12 Text Spacing No loss of content or functionality occurs by setting line height, spacing, letter spacing, word spacing
Example (1): Function (Bitmap Image)
Source: Wikipedia
The red curve is the graph of a function, because any vertical line has exactly one crossing point with the curve.
- Poor choice: Bitmaps (png, jpg, gif, ...) do not scale!
Example (2): Function (SVG)
Source: Wikipedia
The red curve is the graph of a function, because any vertical line has exactly one crossing point with the curve.
- Better choice: Scalable vectors graphics scales.
- Problem: Color reference is useless if you change to high contrast.
Example (3): Function (Color Reference)
Source: Wikipedia
The red curve is the graph of a function, because any vertical line has exactly one crossing point with the curve.
- One solution: Text color in line with graph color.
- Still a problem: Useless for monochromatic colors.
Example (4): Two Functions (Two References)
Source: Wikipedia
Graph of two trigonometric functions: sine and cosine. Sine is the red solid curve. Cosine is the blue dashed curve.
- Good practice graphics: Use of SVG.
- Good practice captioning: Reference by color and pattern.
A selection of WCAG success criteria 2
2 Operable
- 2.1.1 Keyboard All page functionality is available using the keyboard.
- 2.3.1 Three Flashes Pages do not contain anything that flashes more than three times in any one second period [or below thresholds]
- 2.4.2 Page Titled Pages have titles that describe topic or purpose.
- 2.4.3 Focus Order Focusable components (e.g., links) receive focus in an order that preserves meaning and operability.
- 2.4.4 Link Purpose (In Context) [...] can be determined from link text alone or programmatically determined link context.
- 2.4.6 Headings and Labels [...] describe topic or purpose.
- 2.5.1 Pointer Gestures Functionality using multipoint or path-based gestures (e.g., pinch, drag) can be operated with a single pointer.
A selection of WCAG success criteria 3
3 Understandable
- 3.1.1/2 Language of Page/Parts The language of the page/parts is identified
- [AAA's are worth a look]
Caveat emptor a failure for all users is sometimes no failure.
WCAG implementation
4 Robust
- Error handling, keyboard traps,
- Does it work everywhere, on any form factor
- Portable standards
- Not only on OS X with Browser Y
- Never: This page is best viewed with ...
The Full Web Stack
Distinct technologies addressing separate concerns/purposes.
Separation of Concerns on the Web:
Towards Checking WCAG
Different elements of the stack help to achieve WCAG.
Today we will concentrate mostly on:
- HTML for good structure
- A little on ARIA for semantics
Later we will look in more details at SVG and some JavaScript
Good evaluation is important!
Evaluating accessibility (1)
Automated Helpers - the minimum.
- neither exhaustive nor free of false positives/negatives.
- many accessibility considerations cannot be checked automatically.
- "full" tools: aXe, tenon
- browser tools: Chrome Developer Tools (accessibility tree, lighthouse accessibility audit, vision deficiency simulation), WAVE
- specialized tools: Chromelens, tota11y
We have a look at some free extensions
Usability of Uni Website
Source: xkcd
Web Usability in General
Intermission
Please download for the next session:
The following are Chrome extensions. They work on all webkit/blink based browsers (i.e., Chrome, Chromium, Brave, Edge, Opera)
Exercise
- Inspect the following website:
Available from https://zorkow.github.io/COV885/exercises/form/form.html
- Run the different tools
- Record what you see
Lighthouse
- Lighthouse Evaluation Tool
- Automatically available in the Dev tools on Chromium based browsers
- Press Ctrl+Shift+I to open the Dev tools
- Look for the Dev tools menu, Lighthouse is the very last entry
- You might want to dock to bottom or in a separate window
- Run "Generate report"
- This can take while
WCAG
- WCAG offers a number of tools as Chrome (Brave, Edge, Opera) or Firefox extensions
- We have a look at the Accessibility Audit UI for Chromium browsers, or
- for Firefox AInspector WCAG
- Install the extension
- Open it from you extension tray
- Press Audit Page
- A report is generated at the top right of the page
Accessibility Insights
- Accessibility Insights for the Web is an extension for Chromium browsers (Chrome, Brave, Edge, Opera)
- It allows you to do fast automated checks and thorough manual checks
- Install the extension
- Open it from you extension tray
- Run FastPass
- A report is generated on a new page
WAVE
- WebAIM offers the WAVE Evaluation Tool
- It generates visual aid by marking up the inspected page
- Install the extension
- Run Wave from the extension tray
- A report is generated on the lefthand side
- Markup in the page corresponds to problems detected
Summary of Findings
- Missing first level heading
- Images missing alternative text
- Missing or uninformative page title
- Control elements without Label
- The
<html>element does not have a lang attribute - Element has insufficient color contrast
- Buttons have no meaningful content
- Content is ARIA hidden
- Links are hidden (3 behind images, one in a button)
- No page regions
Note that not all tools will find all problems!
Evaluating accessibility (2)
Assistive technologies. A complex landscape of tools and devices. A key category is screenreaders:
- Windows: NVDA, JAWS, Microsoft Narrator
- Mac/iOS: VoiceOver
- Android: Talkback
- Linux: Gnome ORCA, Chromevox (ChromeOS only)
Other assistive technologies include zoom, dictation, and voice assistants software or devices.
Additional Material: WebAIM "Testing with Screen Readers, Deque: Intro to Screen Readers (video), Demo: Sina's speed (video), SLCC Demo (video)
What to do with this
- Examine real documents a bit more closely
- Convert them and analyse their accessibility
- Look at the hard examples: STEM
- Derive some guidelines:
- For accessibility
- Authoring support