ah teaches web design & development (Usefulness lecture)


Lecture outline

More depth on accessibility and usability online. Lecture slides will be made available on the day of the lecture (June 17).


Where usability meets utility

Usefulness vs Usability

Including utility

Nielsen Norman Group and usability:

  • Usability: how easy and pleasant the website is to use
  • Utility: whether you get the features you need
  • Usefulness: usability + utility

Moving Up

Experiencing an interface

Maslow's hierarchy of needs converted to web-design consideration

Designing for Emotion (Walter, 2011)


The user must be able to complete their task.

Utility Concerns

The user's revenge

0.1 second, 1 second and 10 seconds are the numbers to remember for, making something feel instantaneous, keeping the user's flow of thought, and keeping the user's attention.

"Response Times: the 3 Important Limits" (Nielsen Norman Group)


The web is built to be accessible by default, we tend to be the ones who break it.

Accessibility for Everyone

Regardless of if you have a disability, how might the accessibility of a website you are using be hindered?

Design Ethics

Considering your users

"...it is essential that the Web is accessible in order to provide equal access and equal opportunity to people with disabilities."
Social Factors in Developing Web Accessibility (W3C Web Accessibility Initiative)

Why Accessibility Matters

Blind and visually impaired make up 285,000,000 people according to the World Health Organization (June 2012) with 39,000,000 categorized as legally blind and the remaining 246,000,000 visually impaired. Deaf and hearing impaired make up 275,000,000 (2004) in the moderate-to-profound hearing impairment category.
"Why accessibility is important" — The A11Y Project

Tools for Accessibility

Some of what we use to access web content

Including (but not limited to):

  • Screen
  • Screen readers
  • Zoom tools
  • Keyboard/mouse
  • Microphones
  • Refreshable braille devices
  • Speakers

Limitations to Senses

How these become affected

  1. Feeling: Muscular or fine-motor issues
  2. Seeing: Blind, colour-blind, dyslexia
  3. Hearing: Deafness


Dyslexia is a brain-based language fluency disorder. Dyslexics experience varying levels of symptoms including difficulty reading, writing, spelling, or understanding spoken language fluenty.
The term blindness is used for complete or nearly complete vision loss.
A failure in YouTube's automated closed-captioning service

Phrase said in the film: "Should we get on with it? I’ll grab my stuff."

Hand Tremors

The key principle of web accessibility for users with motor disabilities is: Operable — because not everyone can use a mouse, click on small links, or operate dynamic elements effectively.

Web Content Accessibility Guidelines (WCAG)

These are guidelines meant to help keep the web accessible. There are three levels you can aim for:

  • WCAG A: Beginner
  • WCAG AA: Intermediate
  • WCAG AAA: Advanced

WCAG Level-A (Beginner)

All the citeria for level-A accessibility:

  • Non-text Content — Provide text alternatives for non-text content
  • 1.2.1 Audio-only and Video-only (Pre-recorded) — Provide an alternative to video-only and audio-only content
  • 1.2.2 Captions (Pre-recorded) — Provide captions for videos with audio
  • 1.2.3 Audio Description or Media Alternative (Pre-recorded) — Video with audio has a second alternative
  • 1.3.1 Info and Relationships — Logical structure
  • 1.3.2 Meaningful Sequence — Present content in a meaningful order
  • 1.3.3 Sensory Characteristics — Use more than one sense for instructions
  • 1.4.1 Use of Colour — Don’t use presentation that relies solely on colour
  • 1.4.2 Audio Control — Don’t play audio automatically
  • 2.1.1 Keyboard — Accessible by keyboard only
  • 2.1.2 No Keyboard Trap — Don’t trap keyboard users
  • 2.2.1 Timing Adjustable — Time limits have user controls
  • 2.2.2 Pause, Stop, Hide — Provide user controls for moving content
  • 2.3.1 Three Flashes or Below — No content flashes more than three times per second
  • 2.4.1 Bypass Blocks — Provide a ‘Skip to Content’ link
  • 2.4.2 Page Titled — Use helpful and clear page titles
  • 2.4.3 Focus Order — Logical order
  • 2.4.4 Link Purpose (In Context) — Every link’s purpose is clear from its context
  • 3.1.1 Language of Page — Page has a language assigned
  • 3.2.1 On Focus — Elements do not change when they receive focus
  • 3.2.2 On Input — Elements do not change when they receive input
  • 3.3.1 Error Identification — Clearly identify input errors
  • 3.3.2 Labels or Instructions — Label elements and give instructions
  • 4.1.1 Parsing — No major code errors
  • 4.1.2 Name, Role, Value — Build all elements for accessibility

Considering Accessibility

Consider different use cases and how our design can accommodate these users:

  • Dyslexia
  • Colour blind
  • Hand tremors
  • Deaf
  • Blind
A refreshable braille display in use

A refereshable braille display

Accessible SEO

Remember what Google sees...

"Google is blind. Google doesn’t use a mouse. Google relies on structural cues in the content to make more sense of the page."
SEO and Accessibility Overlap by Liam McGee

Alts, Captions and Images

Key thing: use them

<img src="Forms.jpg" alt="Four kittens sitting on a pillow looking off to the side" >

Closed Captioning

HTML offers us ways to embed accessible captioning for video or audio.


00:00:01.000 --> 00:00:03.000

00:00:14.024 --> 00:00:17.105
[ROWAN] My favourite thing about
SIAT is probably the vast array of

00:00:17.105 --> 00:00:19.091
really smart creative people here.

Keeping it Accessible

Some key points:

  • Use the semantic elements, code to standards
  • Let users control the interface
  • Create clear and consistent interaction cues
  • Describe interactive or rich media elements
VirginAmerica.com Voiceover Demo

Using ARIA Roles

Accessible Rich Internet Applications (ARIA) roles provide further context for different elements. We only need to use them once existing semantics are insufficient.

<label for="search_box">Search:</label>
<input role="search" id="search_box" type="text">

<div aria-hidden="true" class="background_box"></div>

Further reading at Using WAI-ARIA Landmarks.

HTML5 and ARIA Roles

As HTML5 presents a more semantic markup, some elements have ARIA roles already mapped to them. It is not necessary to include the role attribute as a result.

<!-- These are NOT necessary role attributes -->
<article role="article">
<aside role="complementary">
<footer role="contentinfo">
<header role= "banner">
<nav role="navigation">
<section role="region">
<main role="main">

Keyboard Accessibility

a:hover { /* When we hover */ }
a:active { /* When we press down */ }
a:focus { /* When we select with a keyboard */ }

Tab Index

<input tabindex="2" value="field #2">
<input tabindex="4" value="field #4">
<input tabindex="-1" value="ignored">
<input tabindex="3" value="field #3">
<input tabindex="1" value="field #1">

Touch Accessibility

Areas of touch accessibility on phones
Areas of touch accessibility on tablets
Areas of touch accessibility on laptops

"Responsive Navigation" (Luke Wroblewski)

Testing Accessibility

Tools of the trade

There are a variety of online tools for testing accessibility concerns — W3C has a good list — including things such as colour contrast, disabling javascript and keyboard navigability.


The user must be able to complete their task, repeatedly.

Web Page Speed Testing

Responsive Images

The future of responsive images is aiming towards allowing the device to select resolution.

<img src="original.jpg" srcset="low-res.jpg x1, 2x-res.jpg x2, 3x-res.jpg x3" alt="Photo of a kitten perched on a log">


The user must be able to complete their task with relative ease, repeatedly.

Inexpensive usability testing

Introducing heuristics

Nielsen's Heuristics

  1. Visibility of system status
  2. Match between system/real world
  3. User control and freedom
  4. Consistency and standards
  5. Error prevention
  6. Recognition rather than recall
  7. Flexibility and efficiency of use
  8. Aesthetic and minimalist design
  9. Help users recognize/diagnose/recover errors
  10. Help and documentation

"Ten Usability Heuristics" (Nielsen Normal Group)

Nielsen to the Rescue!

Or is he?

Nielson's heuristics can be good for getting a good scope of the problems at hand, but can also bring up a lot of small details that may be specific to the individual evaluating the site.

Two different airline forms; one long and detailed, one brief and succinct

How do these effect efficiency of use? (Image from Luke Wroblewski)

How do these effect 'recognition rather than recall'?

A selection of different hamburger icons

"The Hamburger is Bad for You" (Morten Rand-Hendriksen)

A combination back and hamburger button

Neilsen vs Norman

Cage match, in the OCTAGON

"Good design means that beauty and usability are in balance. An object that is beautiful to the core is no better than one that is only pretty if they both lack usability"
Emotion and Design: Attractive things work better (Don Norman)

Accessibility Audit

To practice assessing some of the most common accessibility concerns, we would typically perform an accessibility audit during our code tutorial. We would usually review.

  • Use of semantic elements.
  • Setting of language attribute.
  • Appropriate ordering of headings.
  • Recognizable and focusable links.
  • Appropriate use of alt text.
  • Associating labels to inputs.
  • Testing for colour blindness.
  • Navigating with a keyboard only.

Semantic Elements

Are the following elements used, and are they used appropriately?

  • header - defines major headings and information about the website.
  • nav - contains links to navigate to different pages or sections of a website.
  • section - contains logical sections of content, most likely with a heading.
  • footer - contains meta information about the page (i.e. copyright, company info...).

A Language is Set

Is a default language defined for the document? For example:

<html lang="en">

Ordering Headings

Are headings properly used?

  • h1 Shoes-r-us
    • h2 In-store
      • h3 Kid's
      • h3 Men's
      • h3 Women's
    • h2 On Sale Now!

Or are they improperly used?

  • h1 Not used
    • h2 Shoes-r-us
      • h3 Not used
        • h4 Kid's
        • h4 Men's
        • h4 Women's
      • h3 On Sale Now!

Appropriate Alt Text

Do your images have appropriate alt-text? Does it describe the content or the function of the image?

Does it describe its function or content?

<a href="home.html">
<img src="banner-image.jpg" alt="Home page">
<img src="logo.jpg" alt="Shoes-r-us">

Or not?

<a href="home.html">
<img src="banner-image.jpg" alt="A photo of shoes walking themselves across the street">
<img src="logo.jpg" alt="logo">

Labels Tied to Inputs

Are labels associated with inputs?

<label for="email">Email address:</label>
<input type="text" id="email" placeholder="name@email.com">

Or not?

<label for="email">Email address:</label>
<input type="text" name="email" placeholder="name@email.com">
<input type="text" placeholder="email address">

Keyboard Navigation

Try to navigate through the website using only the keyboard — the tab and enter keys. Are there any concerns with clarity of interaction points, or missing information?

P2: Company

For lecture...

For the next lecture time, we will be doing a responsive image tutorial.

Next week's lecture

Content is Key

Considerations of structuring and writing quality content as well as an introduction to JavaScript. Pre-recorded lectures and slides will typically become available on Fridays.