Accessibility updates [uswds-site 1227] #4197

thisisdano · 2021-05-14T16:00:22Z

Summary

This adjusts some of the component code templates to allow the final output code to pass accessibility tests on our website

Requirements

This is a companion to uswds/uswds-site#1227
Approve and merge this PR first. Then link the uswds-site PR to the develop branch.

Details

See code comments

This is not technically complementary content, as it appears within the main role section

thisisdano · 2021-05-17T03:31:17Z

README.md

@@ -247,7 +247,7 @@ We recommend using a **minifier** like [csso](https://github.com/css/csso) to co

 ### Use another framework or package manager

-If you’re using another framework or package manager that doesn’t support `npm`, you can find the source files in this repository and use them in your project. Otherwise, we recommend that you follow the [download instructions](#download). Please note that the core team [isn’t responsible for all frameworks’ implementations](https://github.com/uswds/uswds/issues/877).
+If you’re using another framework or package manager that doesn’t support `npm`, you can find the source files in this repository and use them in your project. Otherwise, we recommend that you follow the [download instructions](#download-and-install). Please note that the core team [isn’t responsible for all frameworks’ implementations](https://github.com/uswds/uswds/issues/877).


Fix internal link

thisisdano · 2021-05-17T03:32:10Z

src/components/banner/banner.config.yml

@@ -5,6 +5,7 @@ context:
  banner:
    text: "An official website of the United States government"
    action: "Here’s how you know"
+    aria_label: "Official government website"


Use explicit ARIA label metadata...

thisisdano · 2021-05-17T04:08:55Z

src/components/button-groups/button-groups.njk

@@ -1,6 +1,6 @@
 <ul class="usa-button-group">
  <li class="usa-button-group__item">
-    <a href="#" class="usa-button usa-button--outline">Back</a>
+    <a href="javascript:void(0);" class="usa-button usa-button--outline">Back</a>


Avoid em empty hash links, use javascript:void(0); instead

Does this mean we have to update the href's in breadcrumb?

I guess so... I wonder why those weren't flagged as errors....

thisisdano · 2021-05-17T04:10:03Z

src/components/banner/banner.config.yml

@@ -36,6 +38,8 @@ variants:
          Un <strong>candado</strong> ($LOCK_IMG) o <strong>https://</strong> significa que usted se conectó de forma segura a un sitio web $TLD.  Comparta información sensible sólo en sitios web oficiales y seguros.
  - name: dot-mil
    context:
+      banner:
+        aria_label: "Official government website,"


... and use trailing commas as a hack to provide legible ARIA labels but still make them unique

thisisdano · 2021-05-17T04:16:11Z

src/components/summary-box/summary-box.njk

@@ -1,21 +1,21 @@
-<div class="usa-summary-box" role="complementary">
+<div class="usa-summary-box">


Remove complementary role for content inside a main element

Does this appear as a region in Voiceover or do we need to add an aria-label?

It does not have an explicit region now. I can give it one

thisisdano · 2021-05-17T04:16:26Z

src/components/summary-box/summary-box.njk

  <div class="usa-summary-box__body">
    <h3 class="usa-summary-box__heading">Key information</h3>
    <div class="usa-summary-box__text">
      <ul class="usa-list">
        <li>If you are under a winter storm warning,
-          <a class="usa-summary-box__link" href="#usa-anchor-find-shelter">find shelter</a>
+          <a class="usa-summary-box__link" href="javascript:void(0);">find shelter</a>


Don't use fake anchor links

thisisdano · 2021-05-17T04:16:58Z

src/components/table/table--scrollable.njk

@@ -1,4 +1,4 @@
-<div class="usa-table-container--scrollable">
+<div class="usa-table-container--scrollable" tabindex="0">


Assure that scrollable elements are focusable

thisisdano · 2021-05-17T04:17:21Z

src/components/type/lists.njk

@@ -1,6 +1,6 @@
  <div class="grid-row grid-gap">
    <div class="mobile-lg:grid-col-4">
-      <h6 class="margin-0">Unordered list</h6>
+      <h3 class="site-preview-heading margin-0">Unordered list</h3>


Use proper heading level

thisisdano · 2021-05-17T04:18:33Z

src/components/type/typesetting.njk

-    </section>
-  </div>
+<div class="usa-line-length-example">
+  <h3 class="site-preview-heading margin-top-0">Line length</h3>


Use proper heading level and only include sample text within the usa-prose

mejiaj

A few questions on Identifier and Breadcrumb href. Everything else looks good.

src/components/breadcrumb/breadcrumb.config.yml

mejiaj · 2021-05-17T16:44:09Z

src/components/button-groups/button-groups.njk

@@ -1,6 +1,6 @@
 <ul class="usa-button-group">
  <li class="usa-button-group__item">
-    <a href="#" class="usa-button usa-button--outline">Back</a>
+    <a href="javascript:void(0);" class="usa-button usa-button--outline">Back</a>


Does this mean we have to update the href's in breadcrumb?

src/components/identifier/identifier.config.yml

src/components/navigation/sidenav.config.yml

mejiaj · 2021-05-17T17:32:08Z

src/components/summary-box/summary-box.njk

@@ -1,21 +1,21 @@
-<div class="usa-summary-box" role="complementary">
+<div class="usa-summary-box">


Does this appear as a region in Voiceover or do we need to add an aria-label?

Co-authored-by: James Mejia <[email protected]>

…w-site-pa11y

thisisdano added 15 commits April 19, 2021 16:11

Use unique IDs in breadcrumb

119864b

Use unique aria-labels for banners

5b2f3eb

Use unique aria labels for footer

8ff46c2

Add unique labels for identifier

e712dc2

Use h3 for list headings

06a245e

Use underscore hack to provide unique labels

cbe75ac

Use underscore hack for footer labels

09a3674

Use unique aria labels

3a23b3a

Use proper heading levels

6ace906

Use unique aria labels

cca6bc0

Remove complementary role

b10c786

This is not technically complementary content, as it appears within the main role section

Allow keyboard focus on scrollable tables

b907286

Use void links

ef048c0

Fix download links

d952987

Use void in button-group links

c1068ca

thisisdano mentioned this pull request May 16, 2021

Add pa11y as a local and CI test uswds/uswds-site#1227

Merged

thisisdano changed the title ~~Accessibility updates~~ Accessibility updates [uswds-site 1227] May 17, 2021

thisisdano requested a review from mejiaj May 17, 2021 03:30

thisisdano added the needs: additional change to website label May 17, 2021

thisisdano added 4 commits May 16, 2021 21:07

Use commas for better voicing

d1d96f9

Use trailing comma hack for breadcrumbs

07a1ae8

Use trailing comma hack for sidenav

f0b6d31

Use trailing comma hack for sidenav

4a22724

thisisdano commented May 17, 2021

View reviewed changes

thisisdano added 3 commits May 16, 2021 21:29

Update snyk and reinstall deps

fabbae6

Merge branch 'develop' into dw-site-pa11y

3e6a2f9

Update package-lock.json

3f96929

thisisdano marked this pull request as ready for review May 17, 2021 04:42

mejiaj reviewed May 17, 2021

View reviewed changes

Replace placeholder hash links with javascript:void(0);

d16b19f

thisisdano and others added 5 commits May 17, 2021 12:49

Give summary box an ARIA region labeled with the component hed ID

8e3831b

Remove wrap class from breadcrumb default

8eb9161

Co-authored-by: James Mejia <[email protected]>

Add ARIA label to default sidenav

52ca395

Merge branch 'dw-site-pa11y' of https://github.com/uswds/uswds into d…

11dca56

…w-site-pa11y

Default to js:void for sidenav links

46615f3

mejiaj approved these changes May 17, 2021

View reviewed changes

thisisdano merged commit 2650f15 into develop May 17, 2021

thisisdano deleted the dw-site-pa11y branch May 17, 2021 21:26

mejiaj pushed a commit that referenced this pull request Jun 24, 2021

Add #4197: Accessibility updates [uswds-site 1227].

26d4632

		@@ -1,21 +1,21 @@
		<div class="usa-summary-box" role="complementary">
		<div class="usa-summary-box">

		@@ -1,4 +1,4 @@
		<div class="usa-table-container--scrollable">
		<div class="usa-table-container--scrollable" tabindex="0">

Accessibility updates [uswds-site 1227] #4197

Accessibility updates [uswds-site 1227] #4197

Uh oh!

Conversation

thisisdano commented May 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Requirements

Details

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

thisisdano commented May 14, 2021 •

edited

Loading