HTML Accessibility Flashcards
Why make a web site accessible?
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.
What are semantic elements?
Semantic elements have implied meaning
i.e. form, table, and article
div and span are NOT semantic
What are two semantic tags that should be used whenever possible? What do they mean to the user.
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.
What semantic elements define different sections of the page?
What are they referred to as?
Answer:
header, nav, main, aside, article, section, footer
They are ‘landmarks’.
Why use ‘button’ over a ‘div’?
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.
If something could be an ‘a’ tag and a ‘button’ tag, which should it be?
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.
If a semantic element cannot be used, how do you make an element accessible?
Answer:
With the attribute role, a name in the content, and an aria value
Is color contrast important?
What is a preferred level of color contrast?
How does the contrast scale work?
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
Should different states have good contrast?
Yes, hover, focus, active, unvisited, visited, and deactivated all need a contrast of at least 3.5:1
Should the underlines below hyperlinks be removed?
NO, the colorblind rely on the underlines to see hyperlinks
How can you improve the readability of hyperlinks?
With CSS properties:
text-underline-offset,
text-decoration-color
What is a decorative image?
How do we define a decorative image?
Decorative images do not add understanding or functionality to the page. We can define this with an empty alt=”” attribute
<img></img>
How do you hide decorative, non-‘img’ icons from screen readers?
With role=”img” and aria-hidden=”true”
How can we add meaning to meaningful images?
With the alt=”” attribute
How should the meaning of an interactive home icon be defined?
(Describe the function of the icon)
img src=”myBusinessLogo.jpg”
alt=”Home Page of MyBusiness”
What is a good way to style hyperlink states?
With CSS properties:
outline-color
outline-offset
Are headings tags good for accessibilty?
Yes! Headings (h1… h6) provide an outline for the page.
How can we maintain the focus state on all hardware?
Why is this important?
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.
What are skip links?
These are defined elements to focus on with screen readers and ‘tab’
Skip Links greatly aid users with disabilities.
How do you create a skip link?
With a hyperlink to an element id
header
a href=”#main” class=”skip >skip to main content<
/header
main id=”main”
How can we set up HTML to work with screen readers?
Answer: use the lang=”” attribute
html lang=”en”
How should skip links be styled with CSS?
.skip {
position: absolute;
top: auto;
left: -10000px;
height: 1px;
width: 1px;
overflow: hidden;
}
.skip:focus {
position: static;
width: auto;
height: auto;
}How do you properly use a label for accessibility?
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.
When should you use aria-required=”true”?
When a label is set to mandatory with an *
Use the attribute aria-required on the element the label is referring to
How can you label a visual label for screen readers? (Sans label element)
On the input element add an aria-label attribute.
Input placeholder=”enter search term”
aria-label=”enter search term”
When do you use fieldset and legend elements for accessibility?
When there are groups of form controls together that all need labels.
What elements use the autocomplete attribute?
Elements:
input, textarea, select, and form
Page zooming is good for accessibility. What principles should be followed for page zooming?
1) avoid horizontal scrolling
2) all content & functionality is maintained
3) avoid text images
4) allow space for key content
What is an accessible error message?
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
