Universal Design for the Web

Question 1

What is Universal Design?

Answer 1

It means to create products and environments that the vast majority of people can use by taking into account our natural physical diversity.

Question 2

How is universal design broader than accessible design for people with disabilities?

Answer 2

Universal design attempts to create designs that apply to people with and without disabilities

Question 3

How does universal design differ from providing accommodations?

Answer 3

• Universal design is a proactive approach, benefitting a wide range of users
• Providing accommodations is a reactive approach. Specific adjustments are made to meet the needs of a person with a disability.

Question 4

Can blind people see images?

Answer 4

No.

Question 5

What is alternative text (alt text)?

Answer 5

Short, meaningful text that serves as an effective replacement for the image for people who can’t see it

Question 6

Why provide alt text?

Answer 6

• A person who is blind can’t see images
• An image by itself cannot be interpreted by a screen reader user
• If an image doesn’t load properly (for instance, if the Internet connection is too slow), the alt text will be displayed
• If you don’t add alt text, screen readers won’t know what to do - will either skip the image or read the filename (which doesn’t provide any useful information)

Question 7

What does it mean to say “Don’t Rely on Color Alone”

Answer 7

• Don’t rely on color alone to convey meaning
• Always supplement color-code information with text explanations
• Not all people can see colors, so you need to supplement colors with text-based information that does not require vision

Question 8

What is meant by “Ensure Sufficient Contrast”

Answer 8

• Ensure the contrast of the text against the background is sufficient to allow the text to be read easily
• Some people with low vision see in low contrast and it can be difficult for them to read text if the color and brightness are too similar to the background

Question 9

Do you need to always use black on white?

Answer 9

No - but you do need to choose colors that don’t make reading difficult

Question 10

Why are transcripts important for people who are both deaf and blind?

Answer 10

• It is the only way to make content accessible to them.
• The text is converted to braille to be read on a refreshable braille output device

Question 11

When should audio descriptions be used?

Answer 11

• If there is simply a person talking, an audio description is not necessary.
• But if there is a lot of activity that someone who is blind needs to understand to understand the content, a version of the video with audio descriptions is necessary

Question 12

What is best practice for providing audio descriptions?

Answer 12

• Audio descriptions are best when they can be turned on and off
• Alternatively, there may be a separate version of the video with audio descriptions for users who are blind.

Question 13

What is meant by “Meaningful Links” or “Good Link Text”?

Answer 13

The link text should clearly explain the destination or purpose of the link

Question 14

Why is it important to provide good link text?

Answer 14

• 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
• Good link text makes the navigation more understandable for everyone, including people with cognitive disabilities.

Question 15

Why should you create an outline with headings?

Answer 15

• Use semantic 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

How does using headings benefit users?

Answer 16

• Speeds up navigation for screen reader users
• Inserting a table of contents helps all users navigate the document
• Helps all users understand the structure of the page

Question 17

What are recommended things to do in relation to keyboard accessibility?

Answer 17

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

Question 18

What should be kept in mind to ensure Keyboard Functionality?

Answer 18

• Users need to be able to tab to all links, forms, and dynamic content
• 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

Question 19

What should be kept in mind to ensure Tab Order?

Answer 19

• 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 20

What should be kept in mind about a Visual Focus Indicator?

Answer 20

• Not all keyboard users are blind - sighted keyboard users need to see where the focus is at all times
• Don’t programmatically turn off the dotted/glowing line around objects in the browser
• 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 21

What is meant by “Associate Data Cells with Header Cells”

Answer 21

• Blind users can’t see the visual organization of a table
• You have to make the association explicit between data cells and header cells.
• You need to markup the header row and column as such in HTML or a Word document

Question 22

What should you be sure to include with every form control?

Answer 22

• Every form element needs a label because users need to know what a form element is to be used for
• That label must be associated explicitly with the form element in the markup
• In other words, do I type my name? My email?

Question 23

How do you ensure that all form controls have a label?

Answer 23

For sighted users: type the label next to the form control

For screen reader users, use the <label> tag</label>

Question 24

How can you make dynamic JavaScript more accessible?

Answer 24

• Mark up the name, role, state, and properties of elements appropriately with ARIA
• Control keyboard focus.

Question 25

In general, what does it mean to mark up the name, role, state, and properties of elements appropriately with ARIA in JavaScript?

Answer 25

• 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

Question 26

In general, what does it mean to control keyboard focus in JavaScript?

Answer 26

• 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 is not easy, but it is absolutely necessary or else keyboard users — whether blind or sighted — will not be able to use the widgets

Question 27

What is recommended best practice when working with PDFs?

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

Which of the following is an example of good link text? “Click Here”, “Read More…”, or “Products and Services”.

Answer 28

“Products and Services”.

Question 29

Why is using good link text important?

Answer 29

When screen reader users hear poor link text out of context they won’t know where the link goes.

Question 30

What would make podcasts accessible to a person who is deaf?

Answer 30

Transcripts.

Question 31

What helps make videos accessible to a person who is blind?

Answer 31

Audio descriptions describing what happens on-screen.

Question 32

Which accessibility design feature should be visible to sighted keyboard users when the item receives keyboard focus?

Answer 32

“Skip navigation” links.

Question 33

What is true about data tables?

Answer 33

For data tables to be accessible to screen reader users, header cells must be associated with all cells in the row or column.