HTML Accessibility

Question 1

Why make a web site accessible?

Answer 1

The internet is for everyone, but it won’t be unless we make it so. -Vint Cerf

A website should convey information to all users. There are millions of users with disabilities and access to information is a human right.

Question 2

What are semantic elements?

Answer 2

Semantic elements have implied meaning

i.e. form, table, and article
div and span are NOT semantic

Question 3

What are two semantic tags that should be used whenever possible? What do they mean to the user.

Answer 3

1) the ‘button’ tag: it is implied that it will always perform an action for the user.
2) the ‘a’ tag: it is always implied to be a hyperlink, to always send the user to another page.

Question 4

What semantic elements define different sections of the page?

What are they referred to as?

Answer 4

Answer:
header, nav, main, aside, article, section, footer

They are ‘landmarks’.

Question 5

Why use ‘button’ over a ‘div’?

Answer 5

Answer: button elements are focusable, clickable, and screen readers identify buttons.

A keyboard only user can tab to a button, they cannot tab to a div.

Question 6

If something could be an ‘a’ tag and a ‘button’ tag, which should it be?

Answer 6

Answer: any element that navigates the user to another view/page should be an ‘a’ tag.

If there is a drop down menu of hyperlinks a button should be used.

Question 7

If a semantic element cannot be used, how do you make an element accessible?

Answer 7

Answer:

With the attribute role, a name in the content, and an aria value

Question 8

Is color contrast important?

What is a preferred level of color contrast?

How does the contrast scale work?

Answer 8

Answer: for the visually impaired color contrast is very important.

A level of 7:1 is preferred

White font on white is a 1:1, and black font in white is 21:1

Question 9

Should different states have good contrast?

Answer 9

Yes, hover, focus, active, unvisited, visited, and deactivated all need a contrast of at least 3.5:1

Question 10

Should the underlines below hyperlinks be removed?

Answer 10

NO, the colorblind rely on the underlines to see hyperlinks

Question 11

How can you improve the readability of hyperlinks?

Answer 11

With CSS properties:
text-underline-offset,
text-decoration-color

Question 12

What is a decorative image?

How do we define a decorative image?

Answer 12

Decorative images do not add understanding or functionality to the page. We can define this with an empty alt=”” attribute

<img></img>

Question 13

How do you hide decorative, non-‘img’ icons from screen readers?

Answer 13

With role=”img” and aria-hidden=”true”

Question 14

How can we add meaning to meaningful images?

Answer 14

With the alt=”” attribute

Question 15

How should the meaning of an interactive home icon be defined?

Answer 15

(Describe the function of the icon)
img src=”myBusinessLogo.jpg”
alt=”Home Page of MyBusiness”

Question 16

What is a good way to style hyperlink states?

Answer 16

With CSS properties:
outline-color
outline-offset

Question 17

Are headings tags good for accessibilty?

Answer 17

Yes! Headings (h1… h6) provide an outline for the page.

Question 18

How can we maintain the focus state on all hardware?

Why is this important?

Answer 18

Never use CSS property outline: 0; outline is used to focus the element.

The focus state is used by many people with disabilities to navigate a page.

Question 19

What are skip links?

Answer 19

These are defined elements to focus on with screen readers and ‘tab’

Skip Links greatly aid users with disabilities.

Question 20

How do you create a skip link?

Answer 20

With a hyperlink to an element id

header
a href=”#main” class=”skip >skip to main content<
/header

main id=”main”

Question 21

How can we set up HTML to work with screen readers?

Answer 21

Answer: use the lang=”” attribute

html lang=”en”

Question 22

How should skip links be styled with CSS?

Answer 22

.skip {
  position: absolute;
  top: auto;
  left: -10000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.skip:focus {
  position: static;
  width: auto;
  height: auto;
}

Question 23

How do you properly use a label for accessibility?

Answer 23

When an element, such as ‘select’, needs a descriptor set label for=”” equal to the select element’s id.
The screen reader can read the content of that label for the select element.

Question 24

When should you use aria-required=”true”?

Answer 24

When a label is set to mandatory with an *

Use the attribute aria-required on the element the label is referring to

Question 25

How can you label a visual label for screen readers? (Sans label element)

Answer 25

On the input element add an aria-label attribute.

Input placeholder=”enter search term”
aria-label=”enter search term”

Question 26

When do you use fieldset and legend elements for accessibility?

Answer 26

When there are groups of form controls together that all need labels.

Question 27

What elements use the autocomplete attribute?

Answer 27

Elements:

input, textarea, select, and form

Question 28

Page zooming is good for accessibility. What principles should be followed for page zooming?

Answer 28

1) avoid horizontal scrolling
2) all content & functionality is maintained
3) avoid text images
4) allow space for key content

Question 29

What is an accessible error message?

Answer 29

An error message that is:
>written in text (color change and ‘!’ icons help but are not enough)
>adjacent to the element that failed
>associated to the failed element
>moves focus to the form control that failed