unique-landmark feature creates false errors for nested header elements
The new unique-landmark
feature does not comply with the ARIA specification.
header
elements that are descendants of article
, aside
, main
, nav
, section
do not constitute an ARIA landmark as per https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/banner.html
Reduced test-case
Show the smallest possible markup that fails.
<!DOCTYPE html>
<html lang="en">
<head><title>Nested header is not a landmark.</title></head>
<body>
<header>ARIA Banner</header>
<main>
<article>
<header>
<h1>Title</h1>
</header>
<p>Content</p>
</article>
</main>
</body>
</html>
Configuration
Use html-validate --print-config FILENAME
or show the content of all relevant
.htmlvalidate.json
files.
{
"extends": [],
"plugins": [],
"rules": {
"area-alt": [
"error",
{
"accessible": true
}
],
"aria-hidden-body": "error",
"aria-label-misuse": "error",
"attr-case": "error",
"attr-delimiter": "error",
"attr-quotes": "error",
"attr-spacing": "error",
"attribute-allowed-values": "error",
"attribute-boolean-style": "error",
"attribute-empty-style": "error",
"attribute-misuse": "error",
"close-attr": "error",
"close-order": "error",
"deprecated": "error",
"deprecated-rule": "warn",
"doctype-html": "error",
"doctype-style": "error",
"element-case": "error",
"element-name": "error",
"element-permitted-content": "error",
"element-permitted-occurrences": "error",
"element-permitted-order": "error",
"element-permitted-parent": "error",
"element-required-ancestor": "error",
"element-required-attributes": "error",
"element-required-content": "error",
"empty-heading": "error",
"empty-title": "error",
"form-dup-name": "error",
"hidden-focusable": "error",
"input-attributes": "error",
"long-title": "error",
"map-dup-name": "error",
"map-id-name": "error",
"meta-refresh": "error",
"multiple-labeled-controls": "error",
"no-autoplay": [
"error",
{
"include": [
"audio",
"video"
]
}
],
"no-conditional-comment": "error",
"no-deprecated-attr": "error",
"no-dup-attr": "error",
"no-dup-class": "error",
"no-dup-id": "error",
"no-implicit-button-type": "error",
"no-implicit-close": "error",
"no-inline-style": "error",
"no-multiple-main": "error",
"no-raw-characters": "error",
"no-redundant-aria-label": "error",
"no-redundant-for": "error",
"no-redundant-role": "error",
"no-self-closing": "error",
"no-trailing-whitespace": "error",
"no-utf8-bom": "error",
"no-unused-disable": "error",
"prefer-button": "error",
"prefer-native-element": "error",
"prefer-tbody": "error",
"script-element": "error",
"script-type": "error",
"svg-focusable": "off",
"tel-non-breaking": "error",
"text-content": "error",
"unique-landmark": "error",
"unrecognized-char-ref": "error",
"valid-id": [
"error",
{
"relaxed": false
}
],
"void": "off",
"void-content": "error",
"void-style": "error",
"wcag/h30": "error",
"wcag/h32": "error",
"wcag/h36": "error",
"wcag/h37": "error",
"wcag/h63": "error",
"wcag/h67": "error",
"wcag/h71": "error",
"input-missing-label": "error",
"heading-level": "error",
"missing-doctype": "error",
"no-missing-references": "error",
"require-sri": "error"
},
"transform": {},
"root": true,
"elements": [
"html5"
]
}
Expected result
The document validates without error, since there is only a single banner landmark (the top level header
element) in it.
Actual result
The rule produces an error, because the implemented logic does not exclude nested header
elements from the check and misinterprets these as landmarks. This violates the ARIA spec for the banner
landmark: https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/banner.html
Version
-
html-validate
: html-validate-8.9.0