Accessibility This is an accessibility checklist used by Duet’s core team when developing new features. It helps us improve the
experience for everyone who uses our products.
Generic All Duet’s automated accessibility checks pass.
Passes automated validation using Axe Chrome extension.
Passes automated validation using Wave Chrome extension.
Works with NVDA screen reader on Windows.
Works with Jaws screen reader on Windows.
Works with VoiceOver on macOS.
Works with VoiceOver on iOS.
Works with TalkBack on Android.
Works when text size is increased to 200%.
Works when zoomed in 400%.
Content Content is written in plain, easy to understand language.
<button>, <a>, and <label> contents are unique and descriptive.
There is only one <h1> heading per page.
Heading elements appear in logical order.
Heading levels aren’t skipped.
List elements (<ol>, <ul>, <dl>) are used for list content.
Skip link is provided and it’s keyboard focusable.
Main contents line height is at least 1.5 times the font size.
Markup HTML has been validated with W3 validator.
<html> element has correct lang attribute.
Each page has a unique <title>.
Markup uses landmarks to indicate content regions.
No tabindex attribute values other than 0 or -1.
No autofocus attributes in markup.
No title attribute tooltips in markup.
<a> element is used for all links.
<button> element is used for all buttons.
Markup uses <svg> based icons instead of icon fonts.
<table> element is used to describe tabular data.
<th> is used for table headers.
<caption> element is used to provide titles for tables.
<duet-visually-hidden> is used instead of aria-label.
Keyboard Tested to be keyboard accessible.
All interactive elements have visible focus styles.
Keyboard focus order matches the visual layout.
There are no invisible focusable elements.
Buttons are accessible using space and enter keys.
Menus and overlays can be closed using esc key.
Images All <img> elements have alt attribute values.
Complex charts and graphs have text alternatives.
Decorative <svg> elements use aria-hidden='true'.
<img> elements with an <svg> source use role='img' attribute.
Forms All inputs are associated with a corresponding label element.
<fieldset> and <legend> elements are used where appropriate.
Form input fields support autocomplete.
Input error messages are associated with the inputs they correspond to.
Color contrast All text contents have a contrast ratio of at least 4.5:1.
All UI components have a contrast ratio of at least 3:1.
Interface has been tested with a color blindness simulator.
Color isn’t the only way information is conveyed.
Mobile Website can be rotated to any orientation.
Website works on 320px wide viewport.
The whole page doesn’t scroll horizontally.
All touch targets are at least 44x44px, except when placed inline.
Viewport zooming isn’t disabled.