Applied Accessibility Flashcards
When do you set the alt attribute to an empty string
When an image is decorative or already has a caption.
< div >
groups content
< section >
groups related content
< article >
groups, independent, self-contained content
< main >
for the main content of a page
< header >
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.
< nav >
Meant to be wrapped around navigation links.
< footer >
wraps around copyright information or links to related documents that usually sit at the bottom of a page.
< audio >
Meant to be wrapped around audio.
How to embed audio on a page
< audio controls >
< source src=”https://s3.amazonaws.com/freecodecamp/screen-reader.mp3” type=”audio/mpeg” />
< /audio >
< figure >
Should be wrapped around visual representations like graphs and such.
< fig caption >
wrapped around the figure element, meant to caption graphs for the visually impaired.
How to improve form field accessibility with the label element
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” >
< fieldset >
tag that surrounds the entire grouping of radio buttons.
< legend >
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 >
How to add an accessible date picker:
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” >
How to standardize times:
< time datetime=”2016-09-15”>Thursday, September 15< sup >th< /sup >< /time >
Contrast
Ensure that text is readable by have a contrast ratio of at least 6.5:1.
Colorblindness
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.
Accesskey
use the Accesskey attribute to create shortcuts for people using screenreader, it should typically be used around important navigation links and such.
Use tabindex to add focus to an element
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 >)
