Nonio Accessibility

Front-end Accessibility Checklist

In every pull request, developers are required to review the HTML code based on the following guidelines.

All <img>s have the alt attribute. Pass an empty value if it is a decoration: alt="".
All informative <svg>s have a <title> that renders the accessible name and role="img", and all decorative <svg>s have the aria-hidden attribute.

// Informative SVG
<svgrole="img"><title>Accessible label</title>...</svg>

// Decorative SVG
<svgaria-hidden="true">...</svg>

Let links be links. All <a>s have the href attribute defined, it cannot be empty. Links must navigate somewhere, either to a different page or another section of the same page. Links should not perform functions. Links trigger on enter.
Let buttons be buttons. All <button>s have type attribute defined, it can be submit, reset, or button depending on the scenario. Buttons must perform functions, it can never be used for navigation. Buttons trigger on enter or space.
<a> and <button> elements do not have tabindex and role attributes. These are already semantic interactive elements.
<input>s are not used as buttons.
Links and buttons have unique accessible labels (eg. multiple links or buttons cannot be exactly labelled as "read more").

⚠️ I hope you never have to do this but if you do...

If an <a> performs a function in addition to navigating somewhere , it must include the role="button" attribute, and additional work must be done to make such custom button trigger on space and enter. This is common for a control that does ajax functions with JS on but links to some other page with JS off.

Avoid using title attribute on any element unless it's an <iframe>. ( source)

The page has a skip link that would navigate the user to the main content of the page. This is usually visually hidden until the user focuses on it using the keyboard. The href must be set to the same id as the main content container. For example: <a href="#main-content">.
The skip link is the immediate child of the <body> and first-of-type.
Main content container has an id that corresponds with the skip link.

<body>
  <a href="#main-content">Skip to content</a>
  ...
  <main id="main-content">...</main>
  ...
</body>

The page has only 1 <header> that is a child of <body> and not a child of any landmarks. Such header is the equivalent of role="banner".
The page has only 1 <footer> that is a child of <body> and not a child of any landmarks. Such footer is the equivalent of role="contentinfo".
The page has only 1 <main>.
The page has an <aside> as a sibling of <main> if the content has complimentary info such as a sidebar.
The page has a <nav> for each group of navigation. If multiple <nav>s exist, use aria-label to name each one.
The page has <section>s if the content is divided into sections. Each <section> must have an immediate heading as the first child (h2 to h6) or aria-label that describes the section.
Landmarks do not need role attributes. Do not do this <main role="main"> or this <footer role="contentinfo">.

The page has only 1 <h1>.
The headings do not skip levels. For example, an <h3> cannot follow immediately after an <h1>.
The headings have unique accessible labels (eg. multiple headings cannot be exactly labelled as "Get Started").

Keyboard focus follows the visual layout of the content. Left-to-right, top-to-bottom for LTR languages. Right-to-left, top-to-bottom for RTL languages.
Text have at least a 4.5:1 contrast ratio with its background. Interactive and meaningful graphical elements must have a minimum 3:1 contrast ratio.
Text is able to enlarge to 400% without loss of information.
Web content can reflow, without horizontal scrolling, at a screen width of 320px (equivalent to a starting viewport width of 1280px wide at 400% zoom).
Click or touch areas should be a minimum of 44px x 44px unless the target is in a sentence or block of text.
Interactive controls have an enclosing indicator when gaining keyboard focus.
Videos have captions.
Motion is reduced or removed when the user device has "reduce motion" setting turned on.