Universal Design for the Web

Question 1

Universal Design

Answer 1

Create products and environments that the vast majority of people can use, taking into account our natural physical diversity.

There are lots of reasons to get excited about the concept of universal design. The potential payback is huge, because it benefits a wide range of people. Why design for just a segment of the population, when you can take on the ambition of designing for everyone?

Question 2

The philosophy of universal design underlies or can be a synonym for:

Answer 2

• inclusive design
• design for all
• human-centered design
• lifespan design

Question 3

Universal Design vs. Accessible Design

Answer 3

Note that the concept of universal design is broader than the concept of accessible design for people with disabilities. Universal design attempts to create designs that apply to people with or without disabilities.

Question 4

Universal Design vs. Accommodations

Answer 4

Universal design is a proactive approach, benefitting a wide range of users. Whereas, providing accommodations is a reactive approach. In other words, specific adjustments are made to meet the needs of a person with a disability.

Question 5

Image

Answer 5

Provide short, meaningful alt text that serves as an effective replacement for the image for people who can’t see it.

Question 6

Color

Answer 6

Don’t rely on color alone to convey meaning. Always supplement color-code information with text explanations.

Question 7

Contrast

Answer 7

Ensure the contrast of the text against the background is sufficient to allow the text to be read easily.

Question 8

Video & Audio

Answer 8

Provide synchronized captions for the deaf, synchronized audio descriptions for the blind, and a text transcript for those who are both deaf and blind.

Question 9

Captions

Answer 9

If you can’t hear, you won’t be able to make much sense of the video below. Fortunately, this video has captions. If captions are not already turned on in your browser, you may need to click on the “CC” (Closed Caption) icon to see the captions.

Question 10

Transcripts

Answer 10

A transcript is also a good idea, and in fact is the only way to make video or audio content accessible to someone who is both deaf and blind. The transcript can be converted into braille, to be read on a refreshable braille output device.

Question 11

Audio Descriptions

Answer 11

Someone who is blind will have no trouble with the video above, because the only thing to see is a person talking, and the blind person can already hear that just fine. But for videos with lots of visual activity, if there is no accompanying narration or dialog to explain the visual activity, the blind person will not understand what’s happening. To make that kind of video accessible to a blind person, you need to provide a version of the video with audio descriptions. Audio descriptions are a recording of a person explaining the visual aspects of the video that aren’t in the video’s original dialog or narration. Audio description works best when users can turn it on or off, or when there is a separate version of the video with audio descriptions for blind users, in addition to the original version without audio descriptions.

Question 12

Links

Answer 12

Ensure the link text clearly explains the destination or purpose of the link.

Question 13

Good link text is important for disability accessibility

Answer 13

Screen reader users will frequently use the tab key to go through the links on the page, or they will use a keyboard shortcut to pull up a list of links. It’s one way that screen reader users skim through the content to find out what navigation options are available to them. When screen readers read links this way, they ignore all of the text around the links and read only the link text. If one or more links says something meaningless like “click here,” or “more…”, or other similar phrases, screen reader users can’t tell what the link is for or where it goes.

Also, good link text makes the navigation more understandable for everyone, including people with cognitive disabilities.

Question 14

Headings Facilitate Navigation and Add Semantic Structure

Answer 14

Headings are a way to help speed up navigation and make the structure of the page easier to understand. Headings speed up the navigation because screen readers have keyboard shortcuts that allow users to jump from heading to heading, skipping over all of the text between headings. Navigating through headings like this makes it easier to understand what the page is about and how the page is structured. This works only if you use real headings (<h1>, <h2>, <h3>, etc.) and if your headings are organized well. If you don’t use any headings, or if the headings don’t use the appropriate HTML tags, or if the headings are structured poorly, screen reader users will have a harder time making their way through the content.

Question 15

Headings

Answer 15

Use headings to create a properly-structured outline of the page. This outline helps organize the content, and also improves navigation for screen reader users.

Question 16

Keyboard Accessibility

Answer 16

Ensure that all functionality is keyboard-accessible, that the tab order is logical, and that the focus indicator is always visible to sighted keyboard users.

Question 17

Keyboard Functionality

Answer 17

Users need to be able to tab to all links, forms, and dynamic content, and they need to be able to operate it using the keyboard. It is never acceptable to have a web page or widget that can be used only with the mouse. Some widgets, especially the more complex ones, may require the use of the enter or return key (to activate links, forms, or buttons), arrow keys (for navigating between items in lists or tabs), space bar (for activating buttons and checking or unchecking elements) or combinations of keys (such as shift + down arrow to select multiple items in a drop-down list).

Question 18

Tab Order

Answer 18

As you tab through the focusable objects on a page, the order should be logical. Ask yourself if the order would make sense if you couldn’t see the rest of the page, and the only thing you could hear was the text in the objects with the tab focus

Question 19

Visual Focus Indicator

Answer 19

Don’t forget sighted keyboard users! Not all keyboard users are blind. Sighted keyboard users need to see where the focus is at all times. Usually browsers will put a dotted line or a glowing line around the object in focus, as long as you don’t turn this feature off in your styles (don’t turn it off in your styles!). In some browsers, like Firefox and Internet Explorer, the small grey dotted line is too subtle for people with low vision to see well. You can use CSS to enhance the visual focus indicator by adding a background color, or a more visible outline, or a more obvious color change for the text.

Question 20

Tables

Answer 20

Associate data cells with header cells to allow screen reader users to navigate effectively within tables.

Question 21

Associate Data Cells with Header Cells

Answer 21

Tables are a visual way of organizing data. They present information in a two-dimensional grid, with one or more header cells visually associated with each data cell by being placed either at the top of the column or at the beginning of a row. Blind users can’t see this visual organization, though, so you have to make the association explicit between data cells and header cells. Without an explicit association between header cells and data cells, screen readers will just read the content of the data cell without giving it any context or letting users know what the cell represents. If you mark up a table correctly, the screen reader will read the header cells before each data cell when navigating through the data cells.

Question 22

Forms

Answer 22

Every form element needs a label, and that label must be associated explicitly with the form element in the markup.

Question 23

Form Controls Need Labels

Answer 23

Users need to know what form elements are for. When users see a text input, they need to know if they should type in their name, or their phone number, or their email, or what kind of cereal they ate today for breakfast. Without a label, users won’t know what to do. Sighted users can see the text on the screen, so if everyone were sighted, all you would need to do is type the label next to the form control. The label could just say “Name” or “Email” or whatever is appropriate.

Not everyone is sighted though. You need to add a bit of extra markup for screen reader users to ensure that the screen reader will read the label with the form element. The most straightforward way to apply a label is to use the <label> tag.</label>

Question 24

Dynamic JavaScript

Answer 24

Make dynamic JavaScript accessible by marking up the name, role, state, properties of elements appropriately with ARIA (and changing them dynamically if necessary), and by controlling keyboard focus.

Question 25

ARIA: Accessible Rich Internet Applications

Answer 25

In the early days of the web, making dynamic content accessible to screen reader users was quite difficult, or even impossible, because there was no built-in way in HTML or JavaScript to announce dynamic changes. That all changed with the introduction of ARIA (Accessible Rich Internet Applications). ARIA markup can be inserted in HTML to announce such things as when a tab is selected or when a checkbox is checked or when a tree view is expanded. JavaScript programmers need to keep track of these events and implement the logic necessary to put the right markup in the right places at the right times, which means that it can sometimes take a fair amount of work and technical knowledge to use ARIA effectively, but the good news is that it works. ARIA makes it possible to make interactive JavaScript accessible to people who can’t see them. ARIA allows web pages to talk to screen readers in ways that were simply impossible before.

Question 26

Controlling Keyboard Focus

Answer 26

Keyboard accessibility is always important, but it takes on an even greater level of importance when dealing with interactive JavaScript, because you have to program the accessibility into the interactions. Once you start playing around with JavaScript, you can do pretty much anything you want. It’s kind of a free-for-all, which is great, except for the fact that the keyboard focus will not follow the action unless you tell it to. Programmers have to be very careful to not lose track of the keyboard focus at any point in time during the interactions. It can be somewhat of a painstaking task to plan for keyboard accessibility in complex JavaScript widgets, but it is absolutely necessary, or else keyboard users—whether blind or sighted—will not be able to use the widgets.

Question 27

PDF Documents

Answer 27

To make a PDF document accessible, it must be in “tagged PDF” format, and must be edited for reading order, tab order, and other semantic and structural markup. Also provide an accessible alternative to the PDF document.

Question 28

Tagged PDF

Answer 28

You can add markup to PDF files in much the same way that you add markup to HTML files, creating what is known as a “tagged PDF” file. You can mark text as headings, paragraphs, lists, tables, and other semantic elements. You can mark images and give them alt text. You can create tables and mark up the row and column headers. Most of the important tags that are available in HTML are also available in PDF documents.

To create a tagged PDF file, it’s best to start with a good accessible document in an authoring tool like Microsoft Word or Adobe InDesign. Both of these programs can convert to tagged PDF rather smoothly. To do so, though, you’ll need Acrobat Pro.