A11y Feature Request
Describe the new a11y feature
Web pages have titles that describe their topic or purpose. Titles go in the <title> tag inside the <head>, and are displayed on the top bar of the browser as well as announced by assistive technologies (AT).
The new feature would be to show an error/warning if the title is missing or empty. This will match the WCAG Level A accessibility criterion 2.4.2.
Acceptance criteria
Possible solution
Detecting and showing an error if the <title> tag is missing is going to be complicated... but, we can cover part of the criteria: an empty title. We can use the :empty pseudo-class applied to the title to show a message if the <title> has no content (which means that the title is not descriptive.)
Here is a simple approach that will display an error (should it be a warning instead?) when a page has an empty title:
/* Make the head visible to show the title. This could have side effects but,
in theory, all the elements in the head are non-visible. So we should be ok :P */
head {
display: block;
}
/* Special case, remove the border and add display: block for it to be visible. */
head title:empty {
@include vectorMessage(error, "XXXXX", 458, "the title tag should not", "be empty as per criterion 2.4.2.");
display: block;
border: 0;
}I tested it on MacOS with Chrome, Firefox, and Safari, and they all show the error message if the <title> is empty.
Why is this a11y feature important?
A missing or empty title would be an accessibility issue because it makes it more difficult for some users to orient themselves and navigate through the pages (see WCAG techniques for more information)
A11y Feature Request
Describe the new a11y feature
Web pages have titles that describe their topic or purpose. Titles go in the
<title>tag inside the<head>, and are displayed on the top bar of the browser as well as announced by assistive technologies (AT).The new feature would be to show an error/warning if the title is missing or empty. This will match the WCAG Level A accessibility criterion 2.4.2.
Acceptance criteria
<title>tag must be present in the<head>.<title>tag must have descriptive content.Possible solution
Detecting and showing an error if the
<title>tag is missing is going to be complicated... but, we can cover part of the criteria: an empty title. We can use the:emptypseudo-class applied to the title to show a message if the<title>has no content (which means that the title is not descriptive.)Here is a simple approach that will display an error (should it be a warning instead?) when a page has an empty title:
I tested it on MacOS with Chrome, Firefox, and Safari, and they all show the error message if the
<title>is empty.Why is this a11y feature important?
A missing or empty title would be an accessibility issue because it makes it more difficult for some users to orient themselves and navigate through the pages (see WCAG techniques for more information)