9 Applied Accessibility Flashcards
How to make sure Screen Readers (devices that read to the blind) can easily parse the web page for titles and topics.
Use h1, h2, h3 etc.
The screen readers may be set to only read these when the user wants a summary.
They should express a hierarchical relationship of the content.
Any general rules of thumb for using heading numbers?
4 things
Don’t use h1,h2,h3 because you like the size of the font. Use CSS to change the size of the font.
Every page should only have one h1, the main subject of the content.
Higher numbers are subsections
Don’t jump from h2 to h4 as a subheading. This can confused screen readers. Go from h2 to h3.
Additional tags for added accessibility and functionality
(6 tags)
How do they work?
HEADER- Different from head. introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.(table of contents in Wikipedia??)
They can navigate straight to it.
FOOTER- for links, resources, copywriter, notes etc. They can navigate straight to it.
MAIN- wraps the main content (1 per page). Allows “jump to main”
NAV- for the main navigation links. The navigation center. Where it shows things like buy/sell>exercise equipment> treamills.
They can navigate straight to it.
ARTICLE- to wrap independent self contained content (like a book or article or blog post)
SECTION- to group thematically related content (like a chapter or article section)
By default, they basically just like divbut additional semantic meaning.
What does it mean to have “semantic meaning”
To add additional LOGICAL or REFERENCE meaning.
to wrap independent self contained content (like a book or article or blog post)
article>
/article>
to group thematically related content (like a chapter or article section)
section>
/section>
for the main navigation links. The navigation center. Don’t necessarily need if the footer covers it all. They can navigate straight to it.
nav>
/nav>
wraps the main content (1 per page). Allows “jump to main”
main>
/main>
for links, resources, copywriter, notes etc. They can navigate straight to it.
footer>
/footer>
Different from head. introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.(table of contents in Wikipedia??)
header>
/header>
Give the visual impaired an option to listen to text instead of the audio
gives semantic meaning when it wraps sound or audio stream content in your markup
How to add controls?
How to link to an audio file?
audio>
/audio>
to make it controllable
audio controls>
audio id=”meowClip” controls>
source src=”audio/meow.mp3” type=”audio/mpeg”>
source src=”audio/meow.ogg” type=”audio/ogg”>
/audio>
Tags to wrap a chart or figure and it’s caption to give alternative material
figure>
img src=”roundhouseDestruction.jpeg” alt=”Photo of Camper Cat executing a roundhouse kick”>
br>
figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
/figcaption>
/figure>
Figure- The figure> represents self-contained content, potentially with an optional caption, which is specified using the figcaption> element. The figure, its caption, and its contents are referenced as a single unit.
figcaption- The figcaption> represents a caption or legend describing the rest of the contents of its parent figure> element.
To give a label to a specific form input
label for=”name”> input type=”text” id=”name” name=”name”>Name /label>:
In that lesson, we wrapped the radio button input element inside a label element along with the label text in order to make the text clickable. Another way to achieve this is by using the for attribute, as explained in this lesson.
form>
label for=”name”>Name: /label>
input type=”text” id=”name” name=”name”>
/form>
Semantically show the checkbox or radio inputs are part of the same group
Describe/label that set of inputs
fieldset>
legend>Choose one of these three items:/legend>
input id=”one” type=”radio” name=”items” value=”one”>
label for=”one”>Choice One/label>br>
input id=”two” type=”radio” name=”items” value=”two”>
label for=”two”>Choice Two/label>br>
input id=”three” type=”radio” name=”items” value=”three”>
label for=”three”>Choice Three /label>
/fieldset>
legend>
/legend>
Line break
br>
Allow a date input
input type=”date” id=”input1” name=”input1”>
Name the input field on the received form
the name attribute
input type=”date” id=”input1” name=”input1”>
Wrap a date
Add information to a date so if it’s colloquial (last Wednesday) it can have additional information for readers.
time
the datetime attribute
p>Master Camper Cat officiated the cage match between Goro and Scorpion
time datetime=”2013-02-13”>last Wednesday /time>,
which ended in a draw./p>
Make elements only visible to screen readers
What are the key elements of it?
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
Position absolute makes the order proper but visually it’s ignored in the flow of boxes. It’s shoved off to the left so it’s invisible.
the box is made small 1x1
overflow hidden makes any text that goes beyond that 1x1 box be hidden.
Top auto does something. Maybe it keeps the position high so the page isn’t scrollable necessarily.
Hide all content (2 ways)
CSS
display: none;
visibility: hidden;
Recommended contrast ratio for readable text
What is the ratio of same colour vs same colour?
What is the ratio of white vs black?
- 5:1
(1: 1 is same colour
21: 1 is white vs black)
Color rules (2)
- Color should not be used to convey useful information (for the blind)
- Text and background should not be distinguished only by color but also contrast (for the colour blind).
What does colourblindness tend to behave like?
Colours that are close are hard to distinguish.
Red green colourblindness.
Screen readers have an option to just hear the text for links on a page. How do you plan for that accordingly?
Move your anchor tags to more descriptive information than “click here” or “read more”
Give keyboard-only users a shortcut to access buttons instead of tabbing constantly
accesskey=”key”
button accesskey=”b”>Important Button/button>
Set something as reachable by pressing tab
What do the numbers represent?
(3 main categories)
What happens if you don’t specify a number?
div tabindex=”0”>Tabbable due to tabindex./div>
tabindex=”0” means that the element should be focusable in sequential keyboard navigation, AFTER any positive tabindex values and its order is defined by the document’s source order.
Positive tabindex values take precedence over 0 and auto.
A negative value (usually tabindex=”-1”) means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. It’s mostly useful to create accessible widgets with JavaScript.
A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex=”4” is focused before tabindex=”5” and tabindex=”0”, but after tabindex=”3”. If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source. The maximum value for tabindex is 32767.
If not specified, it takes the default value 0. It can be no tabindex as well.
