USWDS-Site: Add table accessibility tests page

_components/table/accessibility.md

@@ -0,0 +1,13 @@
+---
+permalink: /components/table/accessibility-tests/
+layout: styleguide
+component:
+  name: table
+title: Table accessibility tests
+category: Components
+lead: Any USWDS table should pass these manual accessibility tests.
+changelog:
+  key: 'component-table-accessibility'
+---
+
+{% include accessibility-tests/index.html %}

_components/table/table.md

@@ -11,26 +11,8 @@ redirect_from:
 - /components/tables/
 layout: styleguide
 subnav:
-- text: Standard table
-  href: '#standard-table'
-- text: Striped table
-  href: '#striped-table'
-- text: Borderless table
-  href: '#borderless-table'
-- text: Scrollable table
-  href: '#scrollable-table'
-- text: Responsive stacked table
-  href: '#responsive-stacked-table'
-- text: Sortable table rows
-  href: '#sortable-table-rows'
-- text: Sticky table headers
-  href: '#sticky-table-headers'
-- text: Guidance
-  href: '#table-guidance'
-- text: Package
-  href: '#table-package'
-- text: Latest updates
-  href: '#changelog'
+- text: Table accessibility tests
+  href: /components/table/accessibility-tests/
 tags:
   - table
   - zebra stripes
@@ -64,6 +46,8 @@ variants:
 changelog:
   key: component-table
 ---
+
+{: .margin-top-4 }
 Tables help logically organize information and group like things together, and they [make it easier to understand complex content](https://www.plainlanguage.gov/guidelines/design/use-tables-to-make-complex-material-easier-to-understand/), as explained on plainlanguage.gov. They’re especially useful for showing long lists of sequential or structured content. Users read tables one row or column at a time, making it easy to digest and compare information.
 
 Tables also help users find specific information within a large data set. For example, if someone is looking for how much their tax is based on their income for a particular year, it’s much easier to find the intersection of that year and income range than to scan or read an entire paragraph of text.

_data/accessibility-tests/table.yml

@@ -0,0 +1,102 @@
+title: Table
+component_status: pass
+test_items:
+# General tests
+  - summary: Color is not the only method used to convey meaning in a table.
+    summary_additional: |
+      When viewing the table,
+      you never have to rely on color alone to understand the table's meaning.
+    test_status: pass
+    test_type: general
+    version_tested: 3.7.1
+    wcag_criterion: 1.4.1
+  - summary: Table content meets color contrast requirements.
+    summary_additional: |
+      When you view the content in a table and use ANDI or color contrast analyzer to look at the hex colors,
+      contrast between the table background and text is at least 4.5:1.
+    test_status: pass
+    test_type: general
+    version_tested: 3.7.1
+    wcag_criterion: 1.4.3
+# Zoom/screen magnification tests
+  - summary: Table content is visible and functional when screen is magnified.
+    summary_additional: |
+      When you zoom to 200%,
+      content in the table remains visible and does not overlap with other content.
+    test_status: pass
+    test_type: zoom
+    version_tested: 3.7.1
+    wcag_criterion: 1.4.10
+# Keyboard navigation tests
+  - summary: Table elements can be navigated by keyboard without special cues.
+    summary_additional: |
+      When using a keyboard to navigate a table,
+      a user can navigate using arrow keys or the tab key with no unexpected cues or instruction.
+    test_status: exception
+    status_details: |
+      The scrollable table does not scroll with left and right arrow keystrokes in JAWS and NVDA. 
+      The offscreen table data is read aloud, but a user would need to use their mouse to follow along with the focus indicator.
+    github_issue_number: 5828
+    github_issue_repo: uswds
+    test_type: keyboard
+    version_tested: 3.7.1
+    wcag_criterion: 2.1.1
+  - summary: Table cells do not trap focus.
+    summary_additional: |
+      When using a screen reader and keyboard keystrokes to navigate a table,
+      you can easily navigate in and out of the table cells using only keystrokes.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.7.1
+    wcag_criterion: 2.1.2
+  - summary: Focus indicator is clear on interactive items in tables.
+    summary_additional: |
+      When using a keyboard to navigate a table,
+      a focus indicator appears around all interactive elements (e.g., arrows for sorting, links).
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.7.1
+    wcag_criterion: 2.4.7
+# Screen reader tests
+  - summary: Table cells are read one at a time and provide context for each cell.
+    summary_additional: |
+      When using a screen reader to navigate a table,
+      the screen reader speaks one cell at a time and explains where each cell is in the table.
+      Tip: When using JAWS, press the `ctrl` + `alt` keys to navigate within the table.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.7.1
+    wcag_criterion: 1.3.1
+  - summary: Table cells are read in a logical order.
+    summary_additional: |
+      When using a screen reader to navigate a table,
+      you hear the table cells for an entire row read in the correct order (e.g., from left to right for English) before moving down to the next row.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.7.1
+    wcag_criterion: 1.3.2
+  - summary: Merged table headers are correctly associated with table cells.
+    summary_additional: |
+      When using a screen reader to navigate a table with merged header cells,
+      you can understand which lower-level data is organized under merged header cells.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.7.1
+    wcag_criterion: 2.4.6
+  - summary: The table has a header, and it is associated with the correct table cells.
+    summary_additional: |
+      When using a screen reader to navigate a table,
+      you can clearly hear which column header the data falls under.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.7.1
+    wcag_criterion: 2.4.6
+  - summary: Table elements have the appropriate name, role, and state.
+    summary_additional: |
+      When using a screen reader to navigate a table,
+      the screen reader announces the name and role of interactive elements such as scrolling, sorting, and clicking.
+      For sortable tables, you hear whether the column is sorted and how it is sorted.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.7.1
+    wcag_criterion: 4.1.2

_data/changelogs/component-table-accessibility.yml

@@ -0,0 +1,9 @@
+title: Table accessibility tests
+type: component
+changelogURL:
+items:
+  - date: 2024-03-20
+    summary: Added accessibility tests page.
+    affectsGuidance: true
+    githubPr: 2538
+    githubRepo: uswds-site

_data/changelogs/component-table.yml

@@ -4,6 +4,11 @@ type: component
 changelogURL:
 
 items:
+  - date: 2024-03-20
+    summary: Added WCAG compliance tag and accessibility test status section.
+    affectsGuidance: true
+    githubPr: 2538
+    githubRepo: uswds-site
   - date: 2024-03-11
     summary: Created the `.usa-table--sticky-header` variant to allow sticky positioning on table headers.
     summaryAdditional: Also added the `$theme-table-sticky-top-offset` setting, which controls the top position of sticky headers.

_includes/accessibility-tests/compliance-tag.html

@@ -1,4 +1,7 @@
 <!-- Add compliance tag -->
+{% assign component_name = page.component.name | default: page.title | downcase %}
+{% assign component_key = component_name | slugify %}
+{% assign component = site.data.accessibility-tests[component_key] %}
 {% assign status_label =  "Did not pass WCAG 2.1 AA" %}
 {% if component.component_status == "pass" %}
   {% assign status_label =  "Passed WCAG 2.1 AA" %}

_includes/accessibility-tests/index.html

@@ -27,9 +27,6 @@
 {% assign fail_icon = 'cancel' %}
 {% assign conditional_icon = 'info' %}
 
-<!--Add WCAG compliance status tag-->
-{% include accessibility-tests/compliance-tag.html %}
-
 <!--Add test results summary-->
 {% include accessibility-tests/test-results-summary.html page='checklist' %}
 

_includes/accessibility-tests/wcag-details.html

@@ -2,7 +2,11 @@
   Catalog details related to WCAG criterion items.
   This information is used in the checklist tags on the accessibility tests pages.
 -->
-
+{% if item.wcag_criterion == "1.1.1" %}
+  {% assign criterion_level = "A" %}
+  {% assign criterion_name = "Non-text content" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#non-text-content" %}
+{% endif %}
 {% if item.wcag_criterion == "1.3.1" %}
   {% assign criterion_level = "A" %}
   {% assign criterion_name = "Info and relationships" %}
@@ -13,6 +17,11 @@
   {% assign criterion_name = "Meaningful sequence" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#meaningful-sequence" %}
 {% endif %}
+{% if item.wcag_criterion == "1.3.6" %}
+  {% assign criterion_level = "AAA" %}
+  {% assign criterion_name = "Identify purpose" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#identify-purpose" %}
+{% endif %}
 {% if item.wcag_criterion == "1.4.1" %}
   {% assign criterion_level = "A" %}
   {% assign criterion_name = "Use of color" %}
@@ -28,11 +37,26 @@
   {% assign criterion_name = "Resize text" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#resize-text" %}
 {% endif %}
+{% if item.wcag_criterion == "1.4.6" %}
+  {% assign criterion_level = "AAA" %}
+  {% assign criterion_name = "Contrast enhanced" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#contrast-enhanced" %}
+{% endif %}
 {% if item.wcag_criterion == "1.4.10" %}
   {% assign criterion_level = "AA" %}
   {% assign criterion_name = "Reflow" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#reflow" %}
 {% endif %}
+{% if item.wcag_criterion == "1.4.11" %}
+  {% assign criterion_level = "AA" %}
+  {% assign criterion_name = "Non-text contrast" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#non-text-contrast" %}
+{% endif %}
+{% if item.wcag_criterion == "1.4.12" %}
+  {% assign criterion_level = "AA" %}
+  {% assign criterion_name = "Text spacing" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#text-spacing" %}
+{% endif %}
 {% if item.wcag_criterion == "2.1.1" %}
   {% assign criterion_level = "A" %}
   {% assign criterion_name = "Keyboard" %}
@@ -68,6 +92,16 @@
   {% assign criterion_name = "Target size" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#target-size" %}
 {% endif %}
+{% if item.wcag_criterion == "3.2.4" %}
+  {% assign criterion_level = "AA" %}
+  {% assign criterion_name = "Consistent identification" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#consistent-identification" %}
+{% endif %}
+{% if item.wcag_criterion == "4.1.1" %}
+  {% assign criterion_level = "A" %}
+  {% assign criterion_name = "Parsing" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#parsing" %}
+{% endif %}
 {% if item.wcag_criterion == "4.1.2" %}
   {% assign criterion_level = "A" %}
   {% assign criterion_name = "Name, role, value" %}

_includes/component.html

@@ -15,9 +15,6 @@ <h2 class="usa-alert__heading">{{ page.alert-heading }}</h2>
 </div>
 {% endif %}
 
-<!-- Add wcag compliance status tag -->
-{% include accessibility-tests/compliance-tag.html %}
-
 {% if page.parent == null and content.size > 1 %}
 <h2 class="site-component-section-title">About the {{ componentName }} {{ page.type }}</h2>
 <div class="font-lang-md measure-5 margin-top-3 margin-bottom-6">

_layouts/styleguide.html

@@ -32,6 +32,9 @@ <h1 id="{{ page.title | slugify }}" class="site-page-title">{{ page.title }}</h1
 
         {% include lead.html text=page.lead %}
 
+        <!-- Add wcag compliance status tag -->
+        {% include accessibility-tests/compliance-tag.html %}
+
         {{ content }}
 
         {% include changelog.html %}