To give your document a proper structure for assistive
@@ -36,7 +36,7 @@ const ERRORS = {
// [1]: http://www.w3.org/html/wg/drafts/html/master/semantics.html#outline
// [2]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#The_HTML5_Outline_Algorithm
MULTIPLE_H1: {
- title: "<h1> used when one is already present"
+ title: "Error: <h1> used when one is already present"
},
// This error accepts two arguments to display a relevant error message
@@ -60,11 +60,35 @@ const ERRORS = {
return {
title: `
- Nonconsecutive heading level used (h${prevLevel} →
+ Error: Nonconsecutive heading level used (h${prevLevel} →
h${currLevel})
`,
description: description
};
+ },
+
+ HIDDEN_HEADER(level) {
+ return {
+ title: `Warning: Hidden heading level (h${level})`,
+ description: `
+
+ This document contains a hidden h${level}
+
+ `,
+ errorLevel: "warning",
+ };
+ },
+
+ ARIA_HIDDEN_HEADER(level) {
+ return {
+ title: `Warning: ARIA Hidden heading level (h${level})`,
+ description: `
+
+ This document contains an h${level} with aria-hidden set to true.
+
+ `,
+ errorLevel: "warning"
+ };
}
};
@@ -102,6 +126,14 @@ class HeadingsPlugin extends Plugin {
error = ERRORS.NONCONSECUTIVE_HEADER(prevLevel, level); // eslint-disable-line new-cap
}
+ if ($el.attr("aria-hidden")) {
+ error = ERRORS.ARIA_HIDDEN_HEADER(level);
+ }
+
+ if ($el.is(":hidden")) {
+ error = ERRORS.HIDDEN_HEADER(level);
+ }
+
prevLevel = level;
// Render the entry in the outline for the "Summary" tab
@@ -116,23 +148,26 @@ class HeadingsPlugin extends Plugin {
annotate.toggleHighlight($el, $item);
if (error) {
+ const { errorLevel = "error" } = error;
+
// Register an error to the info panel
let infoPanelError = this.error(
- error.title, $(error.description), $el);
+ error.title, $(error.description), $el, errorLevel);
// Place an error label on the heading tag
annotate.errorLabel(
$el,
$el.prop("tagName").toLowerCase(),
error.title,
- infoPanelError);
+ infoPanelError,
+ errorLevel);
// Mark the summary item as red
// Pretty hacky, since we're borrowing label styles for this
// summary tab
$item
.find(".tota11y-heading-outline-level")
- .addClass("tota11y-label-error");
+ .addClass(`tota11y-label-${errorLevel}`);
} else {
// Label the heading tag
annotate.label($el).addClass("tota11y-label-success");
diff --git a/plugins/shared/annotate/index.js b/plugins/shared/annotate/index.js
index d01b7bf0..340b498f 100644
--- a/plugins/shared/annotate/index.js
+++ b/plugins/shared/annotate/index.js
@@ -115,7 +115,7 @@ module.exports = (namespace) => {
// object will contain a "show()" method when the info panel is
// rendered, allowing us to externally open the entry in the info
// panel corresponding to this error.
- errorLabel($el, text, expanded, errorEntry) {
+ errorLabel($el, text, expanded, errorEntry, level = "error") {
let $innerHtml = $(errorLabelTemplate({
text: text,
detail: expanded,
@@ -137,7 +137,7 @@ module.exports = (namespace) => {
}
return this.label($el)
- .addClass("tota11y-label-error")
+ .addClass(`tota11y-label-${level}`)
.html($innerHtml);
},
diff --git a/plugins/shared/info-panel/error.handlebars b/plugins/shared/info-panel/error.handlebars
index c4842be4..1260910a 100644
--- a/plugins/shared/info-panel/error.handlebars
+++ b/plugins/shared/info-panel/error.handlebars
@@ -1,4 +1,4 @@
-
+
diff --git a/plugins/shared/info-panel/index.js b/plugins/shared/info-panel/index.js
index 6cfdc8b9..41d26ec1 100644
--- a/plugins/shared/info-panel/index.js
+++ b/plugins/shared/info-panel/index.js
@@ -53,8 +53,8 @@ class InfoPanel {
* Adds an error to the errors tab. Also receives a jQuery element to
* highlight on hover.
*/
- addError(title, $description, $el) {
- let error = {title, $description, $el};
+ addError(title, $description, $el, level = "error") {
+ let error = {title, $description, $el, level};
this.errors.push(error);
return error;
}
diff --git a/test/index.html b/test/index.html
index 257acf94..81aff3e8 100644
--- a/test/index.html
+++ b/test/index.html
@@ -19,6 +19,10 @@
font-size: 24px;
font-weight: bold;
}
+
+ .hidden {
+ display: none;
+ }
This heading should be hidden.
Project name