Accessibility

Free Code Camp Notes

Three things to look out for:

Code should be well organised and use the appropriate html elements
Ensure test alternatives exist for visual content
Provide keyboard navigation

Grouping Content

For screen readers and keyboard navigation, you must group content appropriately

Headings

Only one <h1> element per page, this is the main subject of your content
Headings with equal (or higher) rank start new sections, headings with lower rank start subsections.
Use hierarchically. For example, going from <h2> to <h4> will confuse screen readers. Go from <h2> to <h3> if you need to drop a size.

Main

The <main> element is used to point to the main content in your page.
There should only be one per page
has an embedded landmark feature for assistive technology

Header

The <header> element is used to wrap introductory information or navigation links for its parent tag
shares the embedded landmark feature with <main>, allowing assistive technologies to quickly navigate to that content

Nav

The <nav> tag is meant to wrap around the main navigation links in your page
Has embedded landmark feature for easy screen reader navigation
If there are repeated site links at the bottom of the page, use<footer>

Footer

The <footer> tag is meant to wrap around content and links at the bottom of a page
Also as embedded landmark feature for easy screen reader navigation

Other Grouping Elements

<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content

Media

Images

<img> elements should always use an alt attribute. If the image has text in the describing it, use an empty string: alt=""

Audio

element gives semantic meaning when it wraps a sound or an audio stream
Needs a text alternative to be accessible to people who are deaf. This can be done with nearby text on the page or a link to a transcript
Also available is the controls attribute, the browser default control buttons, which supports keyboard functionality

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg" />
</audio>

Charts etc.

The <figure> element along with the related <figcaption> can be used to wrap a visual element on the page (like an image, diagram, or chart)
<figure> semantically groups content related to the visual element
<figcaption> provides a text alternative that explains the figure

<figure>
    <!-- Chart goes here -->
    <figcaption>Information about the chart</figcaption>
</figure>

Forms

Label

The <label> tag wraps the text for a specific form control item, usually the name of the form field or the label for a choice
The for attribute on a label tag explicitly ties the label with the form control and is used by screen readers
This is done by mapping to the id attribute of the form control (see below)
Using for makes the label clickable in radiobuttons

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
</form>

Radio Buttons & Fieldset

Radio buttons often come in a group where the user has to make a single choice. Group them semantically by wrapping them in a <fieldset> element
Use the <legend> tag to provide a description for the choices
These tags are not necessary when the choice is simple (e.g. male / female)

<form>
  <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>
</form>

Accessible Date Picker

<label for="dateinput">Enter a date:</label>
<input type="date" id="dateinput" name="datepicker">

N.B. when writing dates you should use the <time> element, along with the datetime attribute provided with a date format, so that screen readers can access the value:

<time datetime="2018-09-15">Thursday, September 15<sup>th</sup></time>

CSS

You can makean element only visible to a screen reader by using custom CSS - make it small and absolutely position it off screen. Here's an example of the CSS rules that accomplish this:

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

Notes:

display: none; or visibility: hidden; hides content for everyone, including screen readers
Zero values for pixel sizes, such as width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it

Other Tips

Use high contrast between text and background colour
Avoid colour combinations and contrasts that will be a problem for those with colour blindness

Keyboard

tabindex

If you want to be able to focus on an element using the keyboard, use the tabindex attribute
Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup.
This same functionality can be given to other elements by placing a tabindex="0" attribute on them e.g.

 <div tabindex="0">I need keyboard focus!</div>

A negative tabindex value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div used for a pop-up window is activated)
Setting a tabindex="1" will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default and tabindex="0" items, e.g.

 <div tabindex="1">I get keyboard focus, and I get it first!</div>

 <div tabindex="2">I get keyboard focus, and I get it second!</div>

Tables

Scope

Consider the following table with ambiguous data:

Last Name	First Name	City
Phoenix	Paul	York
Jackson	John	Cork

In this example, the data (Last Name, First Name, and City) can’t be distinguished from one another without knowing which header each corresponds to. The scope attribute with the value col defines the direction of the header cells and associates them with the corresponding data cells. The scope attribute is also needed for larger tables with one header row or column.

Here is how it is marked up:

<table>
  <caption>Teddy bear collectors:</caption>
  <tr>
    <th scope="col">Last Name</th>
    <th scope="col">First Name</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>Phoenix</td>
    <td>Paul</td>
    <td>York</td>
  </tr>
  <tr>
    <td>Jackson</td>
    <td>John</td>
    <td>Cork</td>
  </tr>
</table>

Caption & Summary

A <caption> element works like a heading for a table. This help users to find a table, understand what it’s about and decide if they want to read it
A summary conveys information about the organization of the data in a table and helps users navigate it. For example, if a table has an unusual structure (as in the examples below), information about what content can be found in which row or column can be provided to the user. A summary is usually only needed for complex tables

There are two ways to mark up a summary:

Nest the summary inside the element

<caption>This is the Caption<br>
 <span>This is the summary</span>
</caption>

Wrapping the summary in a span element allows us to select the text for alternative styling to the caption, but this is not necessary

Using aria-describedby

In this approach, an element with an id attribute is associated with a summary by using the aria-describedby attribute of the table. Any element with a unique id can be used as a summary for a table in this way.

<p id="tblDesc">This is also a summary</p>

<table aria-describedby="tblDesc">
 <!-- table data -->
</table>

dan-mckay/accessibility-basics.md