We've just upgraded our A11Y validation servers to the latest version of axe-core, 4.2.0, which includes new rules and improvements, so you may want to re-check your sites to get the most up-to-date results.
New accessibility rules in Axe Core 4.2
The latest upgrade of Axe Core, release 4.2.0, includes 4 new rules, which makes a total of 95 accessibility rules being checked. Axe Core is integrated into the Rocket Validator batch checker - you don’t need to install anything on your server, all comes included in our automated web validator.
Ensures table headers have discernible text
Table header elements should have visible text that describes the purpose of the row or column to both sighted users and screen reader users.
For example:
<table>
<tr>
<th>Student Name</th>
</tr>
</table>Learn more at Deque University - empty table header.
Ensures <frame> and <iframe> elements with focusable content do not have tabindex=-1
When a frame has a negative tabindex, the browser is prevented from redirecting the focus to the content inside that frame. This causes all its content from getting skipped in keyboard navigation, and if the frame is scrollable also prevents the focus from reaching any element from which the frame can be scrolled with the keyboard.
Learn more at Deque University - frame focusable content.
Nested interactive controls are not announced by screen readers
Interactive control elements should not have focusable descendants. Focusable elements with an interactive control ancestor (any element that accepts user input such as button or anchor elements) are not announced by screen readers and create an empty tab stop. That is, you could tab to the element but the screen reader would not announce its name, role, or value.
For example, this is incorrect:
<button>
<a rel="nofollow" href="https://www.w3.org/">The W3C</a>
</button>Learn more at Deque University - nested interactive.
Ensures “role=text” is used on elements with no focusable descendants
The role=”text” attribute should be put on an element with no focusable descendants. When a text node is split by markup (e.g.
<h1>Hello <span>World</span></h1>) VoiceOver will treat it as two separate phrases instead of just one. Adding role=”text” around the elements solves the problem. However, it also overrides the role of the element and all descendants and treats them all as text nodes. If one of the descendant elements is also focusable it would create an empty tab stop. That is, you could tab to the element but VoiceOver would not announce its name, role, or value.
Learn more at Deque University - aria text.
Axe Core 4.2.0 Release Changelog
Features
- add axe.frameMessenger with configurable allowedOrigins
- aria-allowed-attr: add ARIA 1.2 prohibited attrs check
- empty-table-header: new rule to flag empty table headers
- frame-focusable-content: new rule to test iframes with tabindex=-1 do not have focusable content
- locale: missing translations for DE
- locale: Polish translation
- nested-interactive: new rule to flag nested interactive elements
- role-text: add role-text rule
- setup/teardown: add functions to setup and teardown axe-core internal data, deprecate axe._tree
- standards: add graphics roles
- standards/aria-roles: add presentational children property
- utils.getRule: add function to get rule by id
- utils/matches: support selectors level 4 :not and :is
- virtual-node: add attrNames property which returns list of attribute names
Bug Fixes
- aria-allowed-attr: error when generic elements use aria-label and aria-labelledy
- aria-required-children: allow group and rowgroup roles
- aria-required-children: only match for roles that require children
- aria-valid-attr-value: pass for aria-errormessage when aria-invalid is not set or false
- aria-valid-attr-value: report when aria-labelledby ref is not in DOM
- aria-valid-attr-value: return false when int type attribute uses invalid values
- bypass: mark as needs review rather than failure
- focus-order-semantics: allow role=tooltip to pass
- heading-order: handle iframe as first result
- respondable: Avoid message duplication with messageId
- respondable: work on iframes in shadow DOM
- avoid ‘undefined’ showing in check messages
- properly translate checks when building axe.js using –lang
- aria-required-parent: only match for roles that require parents
- color-contrast: account for text client rects that start outside the parent container
- color-contrast-matches: do not pass empty string to getElementById
- frame-title: update rule description to be more descriptive
- heading-order: allow partial context to pass
- landmark-complementary-is-top-level: allow aside inside main
- metadata: consistenct use of ‘must’ and ‘should’
- region: allow role=alertdialog as region
- select-name: fix typo in accessible name help
- to-grid/get-headers: work with rowspan=0
- types: Add noHtml option
- utils: fix warning thrown by Webpack
- utils: remove attributes from source string
- add noHtml to axe.configure
- do not allow postMessage with axe version of x.y.z
Current accessibility ruleset
Check out the full list of accessibility rules that are being checked currently by our web crawler
Accessibility rules checked by Rocket Validator