Skip to content

Instantly share code, notes, and snippets.

@dan-mckay
Created December 6, 2018 15:23
Show Gist options
  • Save dan-mckay/fad23e195798106a17fc0c78523cd57a to your computer and use it in GitHub Desktop.
Save dan-mckay/fad23e195798106a17fc0c78523cd57a to your computer and use it in GitHub Desktop.
Accessibility Basic Notes

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

Links

  • Give links meaning by using brief but descriptive text within the a tags to provide more meaning
  • Avoid using things like Click Here, be more descriptive about the location
  • Use the accesskey attribute to specify a shortcut key to open the link for keyboard users
  • This works with links, buttons, and form controls, e.g. <button accesskey="b">Important Button</button>

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:

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

  1. 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment