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 fj elds 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 [R ETURN ] 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 of 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 <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> An isolated image of course conveys zero information to a blind user alt and title attributes can help considerably 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 fj ne to generate a page using JavaScript, but you should not be adding and removing elements constantly, as that will be di ffi cult 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 speci fj cation 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 one thing, but single page Web apps can be daunting, as changes can take place anywhere, so it is di ffi cult 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 de fj nes which role a speci fj c 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 on 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 = "o ff "/"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