Skip to main content

Accessibility

ARIA​

ARIA = Accessible Rich Internet Applications

Common Attributes​

WAI-ARIA Roles​

A role attribute can be added to an element to tell the browser what type of behavior the element is representing when an equivalent semantic HTML element can’t be used.

Reference​

Examples​

Common Roles​

  • alert

  • banner

  • button

  • cell

  • checkbox

  • dialog

  • figure

  • form

  • grid

  • gridcell

  • heading

  • img

  • list

  • listbox

  • listitem

  • navigation

  • row

  • rowgroup

  • search

  • switch

  • tab

  • table

  • tabpanel

  • textbox

  • timer

Forms​

Notes​

  • Forms should be logical and easy to use

  • Keyboard accessible using the Tab key

  • Associate labels with controls

    • Use aria-labelledby and aria-label when the use of a <label> element is not possible.

    • Note: Screen reader users navigate using the Tab key. Although labels are announced when form inputs received keyboard focus, other text between the form controls is usually skipped. Be sure to include any instructions at the beginning of the form, or associate them with specific fields using aria-describedby. (https://webaim.org/techniques/forms/)

  • Groups of form controls, such as checkboxes and radio buttons, sometimes require a higher-level label (such as "Shipping Method" for a group of shipping options). This information can be associated to the group of form controls using <fieldset> and <legend>. The <fieldset> defines the group and the <legend> contains the description. Screen readers announce the <legend> when users navigate into the group. (https://webaim.org/techniques/forms/)

Accessible Form Controls​

Invisible Labels (for screen readers)​

// Only display content to screen readers
//
// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/

@mixin sr-only() {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate

@mixin sr-only-focusable() {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

Placeholder Text​

Dropdown / Combobox / Listbox​

References​