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


Where usability meets utility

P1 Grades

Project one grades will be coming out later today or tomorrow. Please remember that any grading concerns must be sent to Andrew.

P2 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:

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.

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)

Designing without your audience

"...when someone rushes to write about a subject they have not properly researched it can create problems that become difficult to shake off. It's like bad code. Once it's live, it can spread because people trust that the work was done in the first place to ensure it it right."
Dyslexic Myths Presented as Truths (Williams, 2021)

Tools for Accessibility

Some of what we use to access web content

Including (but not limited to):

Limitations to Senses

How these become affected

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

Web Content Accessibility Guidelines (WCAG)

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


WCAG Level-A (Beginner)

All the citeria for level-A accessibility:

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:

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.

Keyboard Accessibility

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

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)

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

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

P2: Company
JavaScript exercise

JavaScript (JS)

Today we will build ourselves a Javascript drop-down. There are some aspects of JavaScript we should talk about before getting into using it.

Think of each file as a program

Thinking of each JS file as a separate program can help to organize your enhancements, as well as keep them from breaking due to strange interactions.

Developer tools is your friend

You will not be able to effectively debug JS without the developer tools console. Always have it open when working on any JS for your website.

Know your DOM and selectors

You need to know what you are selecting, and how we move through the DOM.

<!-- What would be three possible selectors for our second <a> tag? -->
<div class="column">
<nav id="navi-main">
<a href="#">Link 1</a>
<a href="#">Link 2</a>

Progressively enhance

The page should work with or without JS. Some examples:

JS syntax

/* Objects and methods */
console.log('Message for the console');

/* Variables and values */
let variable_name = value;
let second_link = document.querySelector('.second-link');

/* Variables and properties */
const object_property = object.property; // A variable we cannot change the value of
const second_link_html = second_link.innerHTML;

Today's tutorial

What we will need to do:

  1. Output messages to the console
  2. Create variables
  3. Capture HTML elements in variables
  4. Change attribute values
  5. Change classes
  6. If/then statements

Next week's lecture

Content is Key

Considerations of structuring and writing quality content as well as an introduction to JavaScript. Recorded lectures and slides will typically become available later in the week.