Search element should support aria-label
Running the validator against a <search> element with an aria-label gives an error that it cannot be used here (aria-label-misuse).
However <search> has a landmark role and should support aria-label.
Reference: the MDN docs for the search element.
The
<search>element defines asearchlandmark.
Reference: W3C
If a page includes more than one
searchlandmark, each should have a unique label.
Reference: W3C Aria docs
Reduced test-case
<search aria-label="Site-wide"></search>Configuration
// .htmlValidate.mjs
import { defineConfig } from "html-validate";
export default defineConfig({
extends: ["html-validate:recommended"],
rules: {
// PrismJS for some reason doesn't encode ">" (although it does encode "<")
"no-raw-characters": "off",
// Prettier currently uses self-closing tags (<img />) instead of void elements (<img>)
"void-style": "off",
"no-inline-style": "warn",
},
});Expected result
There is no error shown.
Actual result
/roux/_site/examples/search/basic.html
22:9 error "aria-label" is strictly allowed but is not recommended to be used on this element aria-label-misuseVersion
html-validate: 10.13.1