Skip to content

Latest commit

 

History

History
46 lines (35 loc) · 1.15 KB

accessibility.md

File metadata and controls

46 lines (35 loc) · 1.15 KB

Accessibility

To ensure the application is accessible, the following rules should be followed.

  1. Valid list structures
  2. Button role

Valid list structures

ol and ul elements may only contain li elements. Unexpected elements may negatively impact the ability of screen readers to correctly announce list items.

Valid:

<ul>
  <li>Item X</li>
  <li>Item Y</li>
  <li>Item Z</li>
</ul>

Invalid:

<ul>
  <h2>Items</h2> <!-- Unexpected element -->
  <li>Item X</li>
  <li>Item Y</li>
  <li>Item Z</li>
</ul>

More info: https://dequeuniversity.com/rules/axe/4.1/list

Button role

Throughout the application we use links with .govuk-button styling to act as buttons. In order for screen readers to recognise these as buttons and not links, we need to use the role: "button" attribute on our links.

Valid:

<%= link_to "Button", route_path, class: "govuk-button", role: "button" %>

Invalid:

<%= link_to "Button", route_path, class: "govuk-button" %> <!-- note the missing role -->

More info: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role