Accessibility Niels Olof Bouvin 1 Overview What is accessibility? - - PowerPoint PPT Presentation

Accessibility

Niels Olof Bouvin

1

Overview

What is accessibility? Making HTML accessible WAI-ARIA Wrap-up: where to go from here

2

What is accessibility?

Accessibility: “the quality of being easy to obtain or use” A web site, or any tool, must be usable in order to be functional Usability implies accessibility: if users cannot access the site, they cannot use it You are not your users

3

Blackboard

4

Overview

What is accessibility? Making HTML accessible WAI-ARIA Wrap-up: where to go from here

5

Making HTML accessible

HTML can be pretty accessible per default

text based well-structured

provided we write reasonable HTML

use the correct tags structure our documents in a sensible manner

6

Semantic markup

In principle, we could build entire Web sites using nothing but <div> and <span> and handle everything in CSS

but that would be a nightmare to maintain and add content to

Much simpler to use the specialised tags for their intended use

headings, paragraphs, sections, navigation, sidebars, lists, tables, … <address>,<article>,<aside>,<footer>,<header>,<h1>…<h6>, <nav>,<section>,<main>,<button>,…

It is easier to write and it is certainly easier to read

And thus, it is easier to maintain

7

Keyboard navigation

If users cannot use a mouse to navigate your site, they will have to use a keyboard instead Try that out for yourselves Often, the [TAB] key can be used to switch between form elements such as input fjelds and buttons

but if an idiot designer has decided just to put an ‘onclick’ event listener on a <div> that does not work anymore. We can enable tabbing by adding a tabindex="0" attribute, but as you cannot get focus on a mere text element, you cannot select it by pressing [RETURN]

8

Adding information

Form elements should have labels: Wrong:

Fill in your name: <input type="text" id="name" name="name">

Correct:

<label for="name">Fill in your name:</label> <input type="text" id="name" name="name">

Link texts should similarly communicate the contents

• f the destination, not just state ‘click here’:

To find more out about whales, <a href="whales.html">click here</a> <a href="whales.html">Find out more about whales</a>

9

Adding information to images

An isolated image of course conveys zero information to a blind user

alt and title attributes can help considerably

<img src="dinosaur.png"> <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." title="The Mozilla red dinosaur"> <img src="dinosaur.png" aria-labelledby="dino-label"> <p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>

10

Accessibility for CSS & JavaScript

Basically: Don’t overdo it

(CSS & JavaScript, that is)

There are established standards for how links and emphasised text look—stick with them It is perfectly fjne to generate a page using JavaScript, but you should not be adding and removing elements constantly, as that will be difficult to parse using a screen reader

11

Overview

What is accessibility? Making HTML accessible WAI-ARIA Wrap-up: where to go from here

12

Web Accessibility Initiative – Accessible Rich Internet Applications

WAI-ARIA is a big specifjcation of attributes and set of recommendations aimed at making modern, rich Web applications more accessible A static Web page, server- or client-side generated, is

• ne thing, but single page Web apps can be daunting,

as changes can take place anywhere, so it is difficult to get an overview using something like a screen reader This is handled exclusively through the addition of new attributes, which means that they are just ignored by browsers that do not support them

13

WAI-ARIA basic attributes

Roles

defjnes which role a specifjc element plays on the page e.g., role="navigation" (equivalent to <nav>, which came later)

Properties

e.g., aria-required="true", aria-labelledby="id_of_describing_element"

States

things that change over time e.g., aria-disabled="true"

14

Uses of WAI-ARIA: landmarks

One of the most challenging aspects of using a screen reader to get an overview of the structure of the page

this is where <nav>, <section>, <aside>, <article>, etc., come in handy

WAI-ARIA (which predates the tags above) supports this as well

(though I cannot replicate the behaviour describe in the MDN article using voiceOver

• n macOS)

15

Uses of WAI-ARIA: live content

Pages with elements that update dynamically is naturally rather hard to deal with, if your attention is not drawn to the change made Through WAI-ARIA, the changed element can be high- lighted to the screen reader

aria-live = "off"/"polite"/"assertive"/"rude" depending on the scenario example with XmlHttpRequest:

16

Use of WAI-ARIA: form requirements

Using WAI-ARIA, and a bit of HTML5 improvements, it can be signalled which parts of a form are required, something that usually is shown merely as text:

<input type="text" name="name" id="name" aria-required="true"> <input type="number" name="age" id="age" aria-required="true"> <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">


17

“But I don’t care about disabled people”

Well, then you’re an idiot. And, a bad developer Who are the greatest and most important readers of all Web pages?

the Google, Bing, DuckDuckGo, etc., search engines

The search engines are not sighted and their algorithms try to extract semantic information from pages based on the tags and the text

something that is a lot easier when Web pages are well structured

Web pages that are not well indexed by Google et al are irrelevant because no one will ever see them

18

Accessibility

Accessibility is a bit of extra work, but can mostly be handled, if one adheres to good semantic markup using the tools provided by HTML5

which is a good idea, regardless

I can only encourage you to try to enable the screen reader on your operating system and try to navigate most Web sites—it is a frustrating and humbling experience

19

Overview

What is accessibility? Making HTML accessible WAI-ARIA Wrap-up: where to go from here

20

Where do you go from here?

The point of this course has not been to make you masters of full-stack Web development

seven weeks is not nearly enough for that…

So this is not the end of your learning It may however be towards the end of your status as beginners

21

Important things not covered

Testing and test driven development Performance analysis and optimisations Deployment beyond a single cloud server Serious version control with multiple tracks of development, occasionally merged

22

Continuing to grow as a developer

The most important part of talent is doing

doing your exercises, not just the hand-ins doing little side projects on the side, just for the fun of it

The Web stack is ubiquitous like no other platform available to us

and the Raspberry Pi platform is remarkably versatile

If you can formulate your problem and domain in Web terms, you have a lot of tools and expertise available It takes work to gain skills

but the Web stack keeps changing and growing, so it’s hard to lose interest, because there is always novelty

23