question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Proposed better organization of a11y audits

See original GitHub issue

I was wondering how LH folks feel about me putting together a PR to better categorize the accessibility audits? The current categories are kind of vague, e.g. “uses attributes correctly” for example.

Here’s a proposed reorg:

Best practices

- [id] attributes on the page are unique
- [user-scalable="no"] is not used in the <meta name="viewport"> element and the [maximum-scale] attribute is not less than 5.
- The document does not use <meta http-equiv="refresh">

Navigation

- [accesskey] values are unique
- No element has a [tabindex] value greater than 0
- The page contains a heading, skip link, or landmark region

Names and labels

- Document has a <title> element
- Form elements have associated labels
- Buttons have an accessible name
- Links have a discernible name
- <frame> or <iframe> elements have a title
- <object> elements have [alt] text
- Image elements have [alt] attributes
- <input type="image"> elements have [alt] text

ARIA

- [role]s have all required [aria-*] attributes
- Elements with [role] that require specific children [role]s, are present
- [role]s are contained by their required parent element
- [role] values are valid
- [aria-*] attributes match their roles
- [aria-*] attributes have valid values
- [aria-*] attributes are valid and not misspelled

Audio and video

- <audio> elements contain a <track> element with [kind="captions"]
- <video> elements contain a <track> element with [kind="captions"]
- <video> elements contain a <track> element with [kind="description"]

Tables and lists

- Cells in a <table> element that use the [headers] attribute only refer to other cells of that same table.
- <th> elements and elements with [role="columnheader"/"rowheader"] have data cells they describe.
- Presentational <table> elements avoid using <th>, <caption> or the [summary] attribute.
- <dl>'s contain only properly-ordered <dt> and <dd> groups, <script> or <template> elements.
- Definition list items are wrapped in <dl> elements
- Lists contain only <li> elements and script supporting elements (<script> and <template>).
- List items (<li>) are contained within <ul> or <ol> parent elements

Contrast

- Background and foreground colors have a sufficient contrast ratio

Internationalization and localization

- <html> element has a [lang] attribute
- <html> element has a valid value for its [lang] attribute
- [lang] attributes have a valid value

Manual audits

# Note, these are unchanged

- Interactive elements indicate their purpose and state
- Visual order on the page follows DOM order
- The page has a logical tab order
- Interactive controls are keyboard focusable
- The user's focus is directed to new content added to the page
- User focus is not accidentally trapped in a region
- Offscreen content is hidden from assistive technology
- Headings don't skip levels
- HTML5 landmark elements are used to improve navigation
- Custom controls have associated labels
- Custom controls have ARIA roles

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
robdodsoncommented, Jan 15, 2019

oops I just remembered that some of these are manual audits, let me redo the list with that section…

0reactions
robdodsoncommented, Jan 15, 2019

OK, I’ll follow up with a PR then 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

The A11Y Project: Home
The A11Y Project is a community-driven effort to make digital accessibility easier. ... Learn more about this workshop ... Conduct an accessibility audit....
Read more >
Why it's Important to Establish Audit Processes for Accessibility
Accessibility audits are a series of tests performed and provide a broader scope of information to improve online experiences.
Read more >
How to run an accessibility audit - Siteimprove
The first step in any accessibility strategy is assessing your existing digital products, more commonly, your organization's website. What is an accessibility ......
Read more >
United Nations Global Audit of Web Accessibility
November 2006. The United Nations contracted Nomensa to conduct this audit on. Internet accessibility for persons with disabilities. The audit, the first of....
Read more >
Accessibility audits: how to do a 'quick and dirty' audit - Inviqa
Here I show you how to do an accessibility audit. And explain why it's a great place to start your accessibility journey.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found