ah teaches web design & development (Usefulness lecture)

Teamwork reflection

While we wait for folks to arrive please:

1. Grab a teamwork reflection form from the front of the class.
2. Grab a seat separate from your teammate.
3. Fill in the teamwork reflection and submit it back at the front.

Usefulness

Where usability meets utility

P2 Scope

Just some reminders

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

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

Functional

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.

Accessibility

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

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

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

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

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 — 'basic' level
• WCAG AA: Intermediate — 'good' level for legal standards
• WCAG AAA: Advanced — 'gold' but difficult to achieve

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

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

Alts, Captions and Images

Key thing: use them

Closed Captioning

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

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

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.

Further reading at Using WAI-ARIA Landmarks.

Keyboard Accessibility

Touch Accessibility

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

We cannot automate all accessibility testing. Next week we will do accessibility audits.

Reliable

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

Responsive Images

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

Usability

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

Nielsen's Heuristics

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.

Progressively enhance

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

• Navigation should all be visible until JS collapses it into a dropdown.
• A link should take us to a separate page until JS instead loads it into a frame.

JS syntax

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 HTML attribute values
5. Change CSS classes
6. If/then statements