9 Applied Accessibility

Question 1

How to make sure Screen Readers (devices that read to the blind) can easily parse the web page for titles and topics.

Answer 1

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.

Question 2

Any general rules of thumb for using heading numbers?

4 things

Answer 2

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.

Question 3

Additional tags for added accessibility and functionality
(6 tags)

How do they work?

Answer 3

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.

Question 4

What does it mean to have “semantic meaning”

Answer 4

To add additional LOGICAL or REFERENCE meaning.

Question 5

to wrap independent self contained content (like a book or article or blog post)

Answer 5

article>

/article>

Question 6

to group thematically related content (like a chapter or article section)

Answer 6

section>

/section>

Question 7

for the main navigation links. The navigation center. Don’t necessarily need if the footer covers it all. They can navigate straight to it.

Answer 7

nav>

/nav>

Question 8

wraps the main content (1 per page). Allows “jump to main”

Answer 8

main>

/main>

Question 9

for links, resources, copywriter, notes etc. They can navigate straight to it.

Answer 9

footer>

/footer>

Question 10

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??)

Answer 10

header>

/header>

Question 11

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?

Answer 11

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>

Question 12

Tags to wrap a chart or figure and it’s caption to give alternative material

Answer 12

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.

Question 13

To give a label to a specific form input

Answer 13

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>

Question 14

Semantically show the checkbox or radio inputs are part of the same group

Describe/label that set of inputs

Answer 14

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>

Question 15

Line break

Answer 15

br>

Question 16

Allow a date input

Answer 16

input type=”date” id=”input1” name=”input1”>

Question 17

Name the input field on the received form

Answer 17

the name attribute

input type=”date” id=”input1” name=”input1”>

Question 18

Wrap a date

Add information to a date so if it’s colloquial (last Wednesday) it can have additional information for readers.

Answer 18

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>

Question 19

Make elements only visible to screen readers

What are the key elements of it?

Answer 19

.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.

Question 20

Hide all content (2 ways)

Answer 20

CSS

display: none;
visibility: hidden;

Question 21

Recommended contrast ratio for readable text

What is the ratio of same colour vs same colour?

What is the ratio of white vs black?

Answer 21

4. 5:1
   (1: 1 is same colour
   21: 1 is white vs black)

Question 22

Color rules (2)

Answer 22

1. Color should not be used to convey useful information (for the blind)
2. Text and background should not be distinguished only by color but also contrast (for the colour blind).

Question 23

What does colourblindness tend to behave like?

Answer 23

Colours that are close are hard to distinguish.

Red green colourblindness.

Question 24

Screen readers have an option to just hear the text for links on a page. How do you plan for that accordingly?

Answer 24

Move your anchor tags to more descriptive information than “click here” or “read more”

Question 25

Give keyboard-only users a shortcut to access buttons instead of tabbing constantly

Answer 25

accesskey=”key”

button accesskey=”b”>Important Button/button>

Question 26

Set something as reachable by pressing tab

What do the numbers represent?
(3 main categories)

What happens if you don’t specify a number?

Answer 26

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.