ah teaches web design and development: 06 Usefulness

ah teaches web design and development: 06 Usefulness — A slide deck


Lecture outline

Covered this week:

  • Web accessibility
  • Usability

Lecture slides will be made available on the day of the lecture.


Where usability meets utility

P02 Scope

Just some reminders

We are expecting the site to be built out fully, with no broken links, but:

  • Only showing us 2-3 items (and having all other links direct to those items) is ok
  • Only showing us one flow through the purchase process (and having all links direct there) is ok
  • Having forms act as links instead of actually collecting information is ok
  • Duplicated content such as the same product image (x20) is not ok

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
Updated Validator

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

What design decisions might be problematic, and how?

  • 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

HTML5 offers us new 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.

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

Starting with Usability

The basics

What is a heuristic?

Cheap Testing

The advantages to 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)


Runaway! Runaway...

See you in X minutes.

Where X is equal to the unladen air speed velocity of a swallow.

Accessibility Audit

To practice assessing some of the most common accessibility concerns, we will be performing an accessibility audit during our code tutorial today. We will be reviewing:

  • 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...).

You have...

A Language is Set

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

<html lang="en">

You have...

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!

You have...

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

You have...

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

You have...

Colour Blindness

Head to https://ah1.ca/colour to load up your project website or styleguide and test it under different colour blindness conditions. Where might there be concerns?

You have...

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?

Audit Complete

Any questions?

Common P01 Concerns

Code concerns:

  • Spaces in the URLs (i.e. P01%20Submission%20Final%20Final)
  • Labels for form fields missing or not linked

Design concerns:

  • Styleguide does not demonstrate much 'style'
  • Interaction points are not interactive
  • Missing elements from styleguide
  • Significant problems with the responsiveness of the 'templates'

P01 Grade Concerns

Should you have any concerns with your grade, please review the rubric before contacting me.

This week's labs

The low-down

  • Big crit-time

Next week in lecture we will talk about the necessity of quality content on the web.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna