Skip to content

Accessibility

Key Points

  • Read and apply WCAG 2.1 guidelines to the best of your abilities.
  • Review and apply Lighthouse's Accessibility Best Practices
  • During development & code-review, test accessibility according to the Development & Code-Review Checklist below.
  • We can not certify or promise a site's compliance to any accessibility standards (ex. WCAG 2.0, WCAG 2.1 AA, Section 508).
    • Claiming compliance/adherence to a standard could make Miva legally liable if our clients were sued for accessibility related items.
    • We just do our best to make sites as accessible as possible based on industry standard best-practices and recommendations.
    • Compliance certifications and claims should be conducted by a third-party that has expertise in that.
  • Tools like accessibe.com can be used but are considered a band-aid. The underlying problems should be fixed in the code.

Development & Code-Review Checklist

Best Practices

Provide Keyboard Access And Indicate Focused Element

Accessible websites enable people to access all content and functionality — links, forms, media controls, etc. — through a keyboard.

Keyboard focus should be visible and should follow a logical order through the page elements. Visible keyboard focus could be a border or highlight, as shown below, that moves as you tab through the web page.

Be sure that you can:

  • Tab to all: Check that you can tab to all the elements, including links, form fields, buttons, and media player controls.
  • Tab away: Check that you can tab away from all elements that you can tab into.
  • Tab order: Check that the tab order follows the logical reading order (e.g., for left-to-right languages: top to bottom, left to right) in sequence.
  • Visual focus: Check that the focus is clearly visible as you tab through the elements, that is, you can tell which element has focus, e.g., links have a gray outline around them or are highlighted.
  • All functionality accomplished with keyboard: Check that you can do everything with the keyboard; that is, you don't need the mouse to activate actions, options, visible changes, and other functionality.
  • Drop-down lists: Check that after you tab into a drop-down list, you can use the arrow keys to move through all the options without triggering an action.
  • Image links: Check that when images are links, they have clear visual focus and can be activated using the keyboard (usually by pressing the Enter key).

The above content was provided by w3.org/WAI/test-evaluate/preliminary/#interaction

Heading Levels Should Have a Meaningful Hierarchy

Ensure the heading hierarchy is meaningful. Pages should start with an <h1> — which is usually similar to the page title — and subsequent h-tags should not skip levels. Further Reading.

Avoid picking a heading tag because you're trying to alter the CSS style of a heading. Instead decouple your CSS styles from the heading tags, pick heading tags that make a coherent document outline, and style headings with classes.

Incorrect 
<h2>Contact Us</h2>
<!-- More content here... -->
<h1>Support Links</h1>
<!-- More content here... -->
<h4>Footer Links</h4>
Correct 
<h1 class="c-type-title-2">Contact Us</h1>
<!-- More content here... -->
<h2 class="c-type-title-1">Support Links</h2>
<!-- More content here... -->
<h2 class="c-type-title-4">Footer Links</h2>

Contrast Ratio / Color Contrast

Ensure Background and foreground colors have a sufficient contrast ratio.

Incorrect

Hello World!

Correct

Hello World!

Specify Alternate Content Properly

Provide alternate content for multimedia elements such as images, videos, and audio elements.

For images, this involves proper use of the alt attribute. See the WAI alt Decision Tree for a breakdown of when alt content should/shouldn't be used. For video and audio, use transcripts or captions if available.

When there IS NOT surrounding text:

Incorrect 
<img src="chart.jpg">
Correct 
<img src="chart.jpg" alt="2021 Rainfall Chart for the United States">

When there IS surrounding text:

Incorrect 
<a href="/link.html">
    <img src="shirt.jpg" alt="Red T-shirt" title="Red T-Shirt">
    Red T-Shirt
</a>
Correct 
<a href="/link.html">
    <img src="shirt.jpg" alt="">
    Red T-Shirt
</a>

Use Semantic HTML Elements & Attributes

Use Semantic HTML Elements

Use HTML elements for their intended purpose. Avoid using a tag for something that it was not meant to be used for.

Incorrect 
<span class="c-button-primary" onclick="handleEvent();" role="button" tabindex="0" aria-pressed="false">>Click Me</span>
Correct 
<button class="c-button-primary" id="js-handle-event">Click Me</button>

Avoid Redundant title Attributes

Avoid adding button[title] and a[title] when it matches the content of the element:

Incorrect 
<button title="Submit">Submit</button>
<a href="&mvte:product:link;" title="&mvte:product:name;">&mvte:product:name;</a>
Correct 
<button>Submit</button>
<a href="&mvte:product:link;">&mvte:product:name;</a>

Avoid Redundant alt Attributes

Avoid adding img[alt] when it matches the surrounding text-content. It can help avoid redundant and repetitive text-to-speech.

Incorrect 
<div>
    <img src="&mvte:product:src;" alt="&mvte:product:name;">
    <a href="&mvt:product:link;">
        &mvte:product:name;
    </a>
</div>
Correct 
<div>
    <img src="&mvte:product:src;" alt="">
    <a href="&mvt:product:link;">
        &mvte:product:name;
    </a>
</div>

Avoid Redundant Aria Attributes

Many HTML5 elements have default implicit ARIA semantics, so do not use ARIA roles, properties, or states if the feature is defined in the HTML5 Recommendation.

For example, avoid adding aria-labelledby on an input when the input is already identified in the label[for].

Incorrect 
<label id="username-label" for="username">
    Username:
</label>
<input type="text" id="username" aria-labelledby="username-label">`
Correct 
<label for="username">
    Username:
</label>
<input type="text" id="username">

Additionally, avoid adding [role="button"] on a <button>.

Incorrect 
<button role="button">Submit</button>
Correct 
<button>Submit</button>

Support Resizing Text

Ensure the site displays well as the text is enlarged or decreased.

Some people need to enlarge web content in order to read it. Some need to change other aspects of text display: font, space between lines, and more.

When pages are not designed properly, they can be unusable when the text size is changed, especially when it is changed through text-only zoom or text settings. Sometimes columns and sections overlap, the space between lines disappears, lines of text become too long, or text disappears. -- w3.org/WAI/test-evaluate/preliminary/#resize