Accessibilty STARK

In

Definition

  • Semantinc HTML
  • Tabindex
  • Aria Attributes
  • Aria Role
  • Keyboard navigation and screen readers

Semantic HTML

Assistive technologies such as screen readers are able to interpret what’s on the page by parsing the HTML of the page. They enable users to take actions based on the elements (e.g. Button = “you should click on it”).

Button, not div

  • button get accessibilty “for free”.
  • divs are container elements, so when a screen reader encounters a div, it automatically thinks it is a presentational element.
  • if a div has content or children within it, the screen reader announces role="group" and the user will completely miss that the div is interactive.

Headings with h1-6 tags, not CSS

  • Heading tags such as <h1> and <h2> let an assitive technology know that this is important text, and the screen reader will announce “Heading”.
  • Using CSS means losing the significance to screen reader.

Tabindex

IT makes interactive elements keyboard-navigable.

  • tabindex=0: set focus to an element in the default tabbing order.
  • tabindex=-1: programmatically focus an element using JavaScript.
  • Do not assign a value of > 1 to tabindex.
  • You should only add tabindex to interactive elements. Don’t add it to div, use a semantic element such as button.

ARIA attributes

Aria attributes are a set of HTML attributes that you use to provide additional information about the purpose and state of elements on a web page. These attributes are especially beneficial to assistive technologie,s to provide more context and better navigation for users.

  • aria-label: used to provide a label or name for an element.
  • aria-hidden: used to indicate that an element should be hidden from assistive technologies. This can be useful for elements that are used for layout purposes but are not relevant to the content of the page.
  • aria-describedby: used to associate an element with a description, which helps to provide context of an element.
  • aria-live: used to indicate that an element’s content may change dynamically, and that assistive technologies should pay attention to changes in the element’s content.

Aria Role

The aria-role attribute to defines the purpose of an HTML element, and provide its semantic meaning.

  • button: an element should be treated as a button.
  • alert: an element is an alertbox.
  • presentation: an element is only presentational.
  • grid: in a grid component with CSS and divs, you can use role="grid" to let assistive technologies know about the semantics of the component. Exercise with caution.

Keyboard navigation and screen readers

Many users with motor disabilities rely on their keyboard and assitive technologies to navigate the web. So it’s critical that every component be navigable using a keyboard and screen reader.

  • tab key to navigate to different sections of the site.
  • spacebar to select elements, such as a checkbox.
  • enter to press buttons.

Tests

  • Focus remains visible: ensure that you can clearly see which element is being focused on the page. Focus should always remain visible.
  • Tab order: when tabbing through sections, the order of tabbing should follow the natural flow and logical structure of the website. It should not jump back and forth between sections.
  • Keyboard traps: ensure that when navigating with the keyboard, the focus doesn’t get trapped on an element. e.g. modals, widgets: ensure you are able to navigate back to the site.