Applied Accessibility

Question 1

When do you set the alt attribute to an empty string

Answer 1

When an image is decorative or already has a caption.

Question 2

< div >

Answer 2

groups content

Question 3

< section >

Answer 3

groups related content

Question 4

< article >

Answer 4

groups, independent, self-contained content

Question 5

< main >

Answer 5

for the main content of a page

Question 6

< header >

Answer 6

It’s used to wrap introductory information or navigation links for its parent tag and works well around content that’s repeated at the top on multiple pages.
Meant for use in the body tag of an HTML document.

Question 7

< nav >

Answer 7

Meant to be wrapped around navigation links.

Question 8

< footer >

Answer 8

wraps around copyright information or links to related documents that usually sit at the bottom of a page.

Question 9

< audio >

Answer 9

Meant to be wrapped around audio.

Question 10

How to embed audio on a page

Answer 10

< audio controls >
< source src=”https://s3.amazonaws.com/freecodecamp/screen-reader.mp3” type=”audio/mpeg” />
< /audio >

Question 11

< figure >

Answer 11

Should be wrapped around visual representations like graphs and such.

Question 12

< fig caption >

Answer 12

wrapped around the figure element, meant to caption graphs for the visually impaired.

Question 13

How to improve form field accessibility with the label element

Answer 13

The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.
(ex: < label for=”email”>Email:< /label >
< input type=”text” id=”email” name=”email” >

Question 14

< fieldset >

Answer 14

tag that surrounds the entire grouping of radio buttons.

Question 15

< legend >

Answer 15

tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element.
(ex: < fieldset >
< legend >Choose one of these three items:< /legend >

Question 16

How to add an accessible date picker:

Answer 16

Ensure the label for attribute and the id of the input are the same
(ex: < label for=”pickdate” >Enter a date:< /label >
< input type=”date” id=”pickdate” name=”date” >

Question 17

How to standardize times:

Answer 17

< time datetime=”2016-09-15”>Thursday, September 15< sup >th< /sup >< /time >

Question 18

Contrast

Answer 18

Ensure that text is readable by have a contrast ratio of at least 6.5:1.

Question 19

Colorblindness

Answer 19

Ensure that the colors you are using to styles your text are close to one another on the color wheel or colorblind people might not be able to read the text.

Question 20

Accesskey

Answer 20

use the Accesskey attribute to create shortcuts for people using screenreader, it should typically be used around important navigation links and such.

Question 21

Use tabindex to add focus to an element

Answer 21

When lick tab you’ll automatically get placed on text field but to increase accessibility you should add tab indexes to instructions for forms.
(ex: < div tabindex=”0” >I need keyboard focus!< /div >)