...
 
Commits (10)
# html-validate changelog
## [3.4.1](https://gitlab.com/html-validate/html-validate/compare/v3.4.0...v3.4.1) (2020-10-13)
### Bug Fixes
- **rules:** ignore links hidden from accessibility tree - fixes [#97](https://gitlab.com/html-validate/html-validate/issues/97) ([064514b](https://gitlab.com/html-validate/html-validate/commit/064514b83efbbe1a42fdad719d57af7f1b8106ef))
# [3.4.0](https://gitlab.com/html-validate/html-validate/compare/v3.3.0...v3.4.0) (2020-10-08)
### Bug Fixes
......
......@@ -4,7 +4,8 @@ const markup: { [key: string]: string } = {};
markup["incorrect"] = `<a><img src="cat.gif"></a>`;
markup["correct"] = `<a>lorem ipsum</a>
<a><img src="cat.gif" alt="cat page"></a>
<a aria-label="lorem ipsum"></a>`;
<a aria-label="lorem ipsum"></a>
<a aria-hidden="true"></a>`;
describe("docs/rules/wcag/h30.md", () => {
it("inline validation: incorrect", () => {
......
......@@ -16,11 +16,14 @@ links and determine whenever to follow the link or not. Assistive technology may
also present a list of links in which case the description is the only thing the
user will be presented with.
Links can be excluded from the accessibility tree with `aria-hidden="true"`.
The rule recognizes the following patterns:
- Text (non-whitespace) inside the link
- Images with `alt` text (non-whitespace)
- `aria-label` either on the link or at least one descendant.
- `aria-hidden` on the link
[1]: https://www.w3.org/WAI/WCAG21/Techniques/html/H30
......@@ -38,4 +41,5 @@ Examples of **correct** code for this rule:
<a>lorem ipsum</a>
<a><img src="cat.gif" alt="cat page"></a>
<a aria-label="lorem ipsum"></a>
<a aria-hidden="true"></a>
</validate>
This diff is collapsed.
......@@ -34,6 +34,12 @@ describe("wcag/h30", () => {
expect(report).toBeValid();
});
it("should not report when link is hidden from accessibility tree", () => {
expect.assertions(1);
const report = htmlvalidate.validateString('<a aria-hidden="true">');
expect(report).toBeValid();
});
it("should report error when link is missing text", () => {
expect.assertions(2);
const report = htmlvalidate.validateString("<a></a>");
......
import { DOMReadyEvent } from "../../event";
import { Rule, RuleDocumentation, ruleDocumentationUrl } from "../../rule";
import { hasAltText, hasAriaLabel } from "../helper";
import { inAccessibilityTree } from "../helper/a17y";
import { classifyNodeText, TextClassification } from "../helper/text";
export default class H30 extends Rule {
......@@ -16,6 +17,11 @@ export default class H30 extends Rule {
this.on("dom:ready", (event: DOMReadyEvent) => {
const links = event.document.getElementsByTagName("a");
for (const link of links) {
/* ignore links with aria-hidden="true" */
if (!inAccessibilityTree(link)) {
continue;
}
/* check if text content is present (or dynamic) */
const textClassification = classifyNodeText(link);
if (textClassification !== TextClassification.EMPTY_TEXT) {
......