From 0e62d23d8951691ef1e5d0658d6c8d82bfd5c924 Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Fri, 27 Nov 2020 14:03:01 +0000 Subject: [PATCH 01/34] change 'experimental' to 'developers' --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index a5d221f9..414ac6f1 100644 --- a/index.js +++ b/index.js @@ -57,7 +57,7 @@ class Toolbar { $experimentalPlugins = (
  • - Experimental + Developers:
    + + + + +
    +
    +
    +

    Invalid Subheading

    +

    Button describedby two different IDs:

    +

    View details + »

    +

    Label 1

    +

    Label 2

    +
    +
    + +
    +
    +

    Heading

    +

    Button with text over-ridden by aria-label:

    +

    View details »

    +
    +
    +

    Heading

    +

    Button with aria-label and one aria-describedby

    +

    View + details »

    +
    +
    +

    Invalid Subheading

    +

    Button with aria-label and two aria-describedby paras

    +

    View details »

    +
    +
    +
    +
    +

    Heading

    +

    Button with one aria-labelledby

    +

    View details »

    +
    +
    +

    Heading

    +

    Button with two aria-labelledby attribs

    +

    View details + »

    +
    +
    +

    Subheading

    +

    Label 3

    +

    Label 4

    +

    Button with 2 aria-labelledby attribs and 2 aria-describedby attribs

    +

    View details »

    +
    +
    + +
    +

    Invalid h1

    +
    + +
    +
    +

    Heading

    +

    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor + mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna + mollis euismod. Donec sed odio dui.

    +

    View details »

    +
    +
    +

    Heading

    +

    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor + mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna + mollis euismod. Donec sed odio dui.

    +

    View details »

    +
    +
    +

    Invalid Subheading

    +

    Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula + porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, + ut fermentum massa justo sit amet risus.

    +

    View details »

    +
    +
    + +
    + +
    +

    © Company 2014

    +
    +
    + + + From 3919a8bbe93a1c080adcebe11e718ad4b0a53c89 Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Fri, 27 Nov 2020 18:35:28 +0000 Subject: [PATCH 13/34] rename landmarks plugin to landmarks+roles --- plugins/landmarks/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/landmarks/index.js b/plugins/landmarks/index.js index 491de1da..ffbae730 100644 --- a/plugins/landmarks/index.js +++ b/plugins/landmarks/index.js @@ -9,7 +9,7 @@ require("./style.less"); class LandmarksPlugin extends Plugin { getTitle() { - return "Landmarks"; + return "Landmarks, ARIA roles"; } getDescription() { From b4852c200e89aaf3071235793d30f93ef4b61734 Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Fri, 27 Nov 2020 18:35:50 +0000 Subject: [PATCH 14/34] Link to DNA page --- plugins/link-text/index.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/plugins/link-text/index.js b/plugins/link-text/index.js index 1520dbc3..6072b625 100644 --- a/plugins/link-text/index.js +++ b/plugins/link-text/index.js @@ -14,8 +14,7 @@ class LinkTextPlugin extends Plugin { getDescription() { return ` - Identifies links that may be confusing when read by a screen - reader + Identifies links that may be confusing because they lack context `; } @@ -90,12 +89,11 @@ class LinkTextPlugin extends Plugin { {" "} "{extractedText}" {" "} - is unclear without context and may be confusing to - screen readers. Consider rearranging the + is unclear without context and may be confusing. See DNA guidance on link text. Consider rearranging the {" "} {"<a></a>"} {" "} - tags or including special screen reader text. + tags or using aria-label. ); From 2d842069802dcea03e35a244ba58011a64be9065 Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Fri, 27 Nov 2020 18:38:33 +0000 Subject: [PATCH 15/34] remove label plugin, add empty elements plugin label plugin is deprecated; use aria label+descriptions plugin instead --- plugins/index.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/plugins/index.js b/plugins/index.js index 44c85260..1f4e6357 100644 --- a/plugins/index.js +++ b/plugins/index.js @@ -7,23 +7,24 @@ let AltTextPlugin = require("./alt-text"); let ContrastPlugin = require("./contrast"); let HeadingsPlugin = require("./headings"); -let LabelsPlugin = require("./labels"); +//let LabelsPlugin = require("./labels"); let LandmarksPlugin = require("./landmarks"); let LinkTextPlugin = require("./link-text"); let A11yTextWand = require("./a11y-text-wand"); +let EmptyElementsPlugin = require("./empty"); module.exports = { default: [ new HeadingsPlugin(), new ContrastPlugin(), new LinkTextPlugin(), - new AltTextPlugin(), + new AltTextPlugin(), + new EmptyElementsPlugin() ], experimental: [ - new LabelsPlugin(), + // new LabelsPlugin(), new LandmarksPlugin(), - new A11yTextWand(), - + new A11yTextWand() ], }; From 689ea09914231ef682f2e31eda86879c9773b457 Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Fri, 27 Nov 2020 18:39:04 +0000 Subject: [PATCH 16/34] New plugin to annotate empty elements. --- plugins/empty/index.js | 43 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 plugins/empty/index.js diff --git a/plugins/empty/index.js b/plugins/empty/index.js new file mode 100644 index 00000000..5ece696e --- /dev/null +++ b/plugins/empty/index.js @@ -0,0 +1,43 @@ +/** + * A plugin to identify empty elements, esp those to fake styling + *

    , ,

  • ,
      ,
        and

        + * do we need to strip out   too? TODO + * + * TODO: add tests on dummy index page for these + */ + + +let $ = require("jquery"); +let Plugin = require("../base"); +let annotate = require("../shared/annotate")("landmarks"); + + +let outlineItemTemplate = require("./index.js"); +require("./index.js"); + + +class EmptyElementsPlugin extends Plugin { + getTitle() { + return "Empty elements"; + } + + getDescription() { + return ` + Highlights empty elements that should be removed + `; + } + run() { + $("p:empty, h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, li:empty, ol:empty, ul:empty, br+br").each(function () { + annotate.label($(this), $(this).prop("tagName")); + }); + + } + + cleanup() { + annotate.removeAll(); + + } + } + + +module.exports = EmptyElementsPlugin; From e5dee0b1a752190e5c5206caa3a44b725ddae1ac Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Mon, 30 Nov 2020 11:13:19 +0000 Subject: [PATCH 17/34] Inject visible text into empty elements --- plugins/empty/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/plugins/empty/index.js b/plugins/empty/index.js index 5ece696e..96ee5608 100644 --- a/plugins/empty/index.js +++ b/plugins/empty/index.js @@ -2,7 +2,7 @@ * A plugin to identify empty elements, esp those to fake styling *

        , ,

      • ,
          ,
            and

            * do we need to strip out   too? TODO - * + * * TODO: add tests on dummy index page for these */ @@ -28,6 +28,7 @@ class EmptyElementsPlugin extends Plugin { } run() { $("p:empty, h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, li:empty, ol:empty, ul:empty, br+br").each(function () { + $(this).append("EMPTY ELEMENT"); annotate.label($(this), $(this).prop("tagName")); }); @@ -35,7 +36,7 @@ class EmptyElementsPlugin extends Plugin { cleanup() { annotate.removeAll(); - + } } From 6306ff9745f5ead887af77ce197a3cbfd26dad45 Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Mon, 30 Nov 2020 11:13:43 +0000 Subject: [PATCH 18/34] Add some empty elements to test page for testing empty elements pugin --- test/index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/test/index.html b/test/index.html index fecc481c..5028dafa 100644 --- a/test/index.html +++ b/test/index.html @@ -141,6 +141,7 @@

            Invalid Subheading

            Heading

            +

            Button with text over-ridden by aria-label:

            View details »

            @@ -157,6 +158,7 @@

            Invalid Subheading

            aria-describedby="lbl1 lbl2">View details »

            +

              Heading

              @@ -171,6 +173,7 @@

              Heading

              Subheading

              +

            1. Label 3

              Label 4

              Button with 2 aria-labelledby attribs and 2 aria-describedby attribs

              @@ -182,7 +185,7 @@

              Subheading

              Invalid h1

              - +

                Heading

                @@ -200,6 +203,7 @@

                Heading

                Invalid Subheading

                +

                Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

                From 74e9a051d5b7754730a689213a9ed11f13b2b36f Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Mon, 30 Nov 2020 17:40:32 +0000 Subject: [PATCH 19/34] Show icon reminding user to check quality of alt text --- plugins/empty/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/plugins/empty/index.js b/plugins/empty/index.js index 96ee5608..1a2c1dcc 100644 --- a/plugins/empty/index.js +++ b/plugins/empty/index.js @@ -28,7 +28,8 @@ class EmptyElementsPlugin extends Plugin { } run() { $("p:empty, h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, li:empty, ol:empty, ul:empty, br+br").each(function () { - $(this).append("EMPTY ELEMENT"); + $(this).append("EMPTY ELEMENT !!"); + $(this).addClass("tota11y-empty"); // so we can find them again annotate.label($(this), $(this).prop("tagName")); }); @@ -36,9 +37,10 @@ class EmptyElementsPlugin extends Plugin { cleanup() { annotate.removeAll(); - + $(".tota11y-empty").each(function () { + $(this).empty(); + }); } } - module.exports = EmptyElementsPlugin; From d67a671889914fc8cf89b9e6d037451a8350926b Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Mon, 30 Nov 2020 17:41:12 +0000 Subject: [PATCH 20/34] Remind user to check quality of alt text --- plugins/alt-text/index.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/plugins/alt-text/index.js b/plugins/alt-text/index.js index 50a5a1c0..cb91b8c9 100644 --- a/plugins/alt-text/index.js +++ b/plugins/alt-text/index.js @@ -60,7 +60,19 @@ class AltTextPlugin extends Plugin { elements.forEach(this.reportError.bind(this)); } - // Additionally, label presentational images + // present alt text for checking if attrib exists but not blank + $("img[alt]:not([alt=''])").each((i, el) => { + // "Error" labels have a warning icon and expanded text on hover, + // but we add a special `warning` class to color it differently. + let altMsg = "Check alt: " + $(el).attr("alt"); + + annotate + .errorLabel($(el), "Check!", $(el).attr("alt") ) + .addClass("tota11y-label-warning"); + }); + + + // label presentational images $("img[role=\"presentation\"], img[alt=\"\"]").each((i, el) => { // "Error" labels have a warning icon and expanded text on hover, // but we add a special `warning` class to color it differently. From ef7e8d5d5722478e625773aac69abf26eaaefb7a Mon Sep 17 00:00:00 2001 From: Bruce Lawson Date: Sat, 5 Dec 2020 14:17:00 +0000 Subject: [PATCH 21/34] Pass value attribute of input elements to the output of name+desc viewer --- plugins/a11y-text-wand/index.js | 26 ++++++++++++++++++++------ test/index.html | 2 ++ 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/plugins/a11y-text-wand/index.js b/plugins/a11y-text-wand/index.js index cffc54fe..7e099f21 100644 --- a/plugins/a11y-text-wand/index.js +++ b/plugins/a11y-text-wand/index.js @@ -25,13 +25,27 @@ class A11yTextWand extends Plugin { $(document).on("mousemove.wand", function (e) { let element = document.elementFromPoint(e.clientX, e.clientY); - let textAlternative = axs.properties.findTextAlternatives(element, {}); + let textAlternative = axs.properties.findTextAlternatives(element, {}); + +// TODO: nasty Brucie hack: if this element is an img, grab its alt text and show that (otherwise textAlternative is blank for some reason). Ditto if it's an input with a value attribute, like WordPress search button ) + + +//if ($(element).prop("nodeName") === "IMG" && element.hasAttribute("alt")) +// {textAlternative +=" "+$(element).attr("alt"); +//} + +if ($(element).prop("nodeName") === "INPUT" && element.hasAttribute("value")) + {textAlternative = $(element).attr("value");} + + + +// TODO: test with fieldset and legend. $(".tota11y-outlined").removeClass("tota11y-outlined"); $(element).addClass("tota11y-outlined"); - // append anything found in aria-describedby, as screen readers will //announce this too. It's a good way of adding accessible help text to form inputs— see https://developer.paciellogroup.com/blog/2014/12/using-aria-describedby-to-provide-helpful-form-hints/ - + // append anything found in aria-describedby, as screen readers will announce this too. It's a good way of adding accessible help text to form inputs— see https://developer.paciellogroup.com/blog/2014/12/using-aria-describedby-to-provide-helpful-form-hints/ + const describedBy = $(element).attr("aria-describedby"); if (describedBy) { let describedIDs = describedBy.split(/\s/); @@ -43,9 +57,9 @@ class A11yTextWand extends Plugin { if (!textAlternative) { $(".tota11y-info-section.active").html( - - No text visible to a screen reader - + + ** No text exposed to Assistive Tech! ** + ); } else { $(".tota11y-info-section.active").text(textAlternative); diff --git a/test/index.html b/test/index.html index 5028dafa..b837f4ad 100644 --- a/test/index.html +++ b/test/index.html @@ -94,6 +94,8 @@

                Hello, world!

                +

                +