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

_data/accessibility-tests/table.yml

@@ -0,0 +1,135 @@
+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 you view the table on a page,
+      you never have to rely on color alone to understand the table's meaning.
+    test_status: pass
+    test_type: general
+    version_tested: 3.6.0
+    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.6.0
+    wcag_criterion: 1.4.3
+  - summary: Table background color has sufficient contrast with page background color.
+    summary_additional: |
+      When you view a table with a background color,
+      the table's background color contrasts with the page's color, and it's obvious which content belongs in the table vs. on the surrounding page.
+    test_status: pass
+    test_type: general
+    version_tested: 3.6.0
+    wcag_criterion: 1.4.11
+# Zoom/screen magnification tests
+  - summary: Table content does not get cut off when text size is increased.
+    summary_additional: |
+      When you increase text size by 200%,
+      content in the table remains visible without the need to scroll.
+    test_status: pass
+    test_type: zoom
+    version_tested: 3.6.0
+    wcag_criterion: 1.4.4
+  - summary: Table content is visible and functional when screen is magnified.
+    summary_additional: |
+      When you zoom the screen to 200%,
+      content in the table remains visible and does not overlap with other content.
+    test_status: pass
+    test_type: zoom
+    version_tested: 3.6.0
+    wcag_criterion: 1.4.10
+  - summary: Table content does not get cut off when text spacing is changed.
+    summary_additional: |
+      When you adjust text spacing in the following ways, all content remains visible without overlap or the need for horizontal scrolling:
+      - line height is at least 1.5 times the font size,
+      - letter spacing is at least 0.12 times the font size,
+      - the spacing following paragraphs is at least 2 times the font size,
+      - and word spacing is at least 0.16 times the font size,
+    test_status: pass
+    test_type: zoom
+    version_tested: 3.6.0
+    wcag_criterion: 1.4.12
+# Keyboard navigation tests
+  - summary: Table elements can be navigated by keyboard without special cues.
+    summary_additional: |
+      When you use 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 table does not scroll with JAWS.
+      A user would need to use their mouse to follow along with the focus indicator in JAWS.
+    test_type: keyboard
+    version_tested:
+    wcag_criterion: 2.1.1
+  - summary: Table cells do not trap focus.
+    summary_additional: |
+      When you use a keyboard to navigate a table,
+      you can easily navigate in and out of the table cells using only keystrokes.
+    test_status:
+    test_type: keyboard
+    version_tested:
+    wcag_criterion: 2.1.2
+  - summary: Focus indicator is clear on interactive items in tables.
+    summary_additional: |
+      When you use 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.5.0
+    wcag_criterion: 2.4.7
+# Screen reader tests
+  - summary:
+    summary_additional: |
+      When using a screen reader to navigate a table,
+      the screen reader speaks one cell at a time and announces the correct header cells for context.
+      Tip: When using JAWS press the `ctrl` + `alt` keys to navigate within the table.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.6.0
+    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 order from left to right before moving down to the next row.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.6.0
+    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.6.0
+    wcag_criterion: 2.1.1
+  - summary: Table cells are associated with their related table headers.
+    summary_additional: |
+      When using a screen reader to navigate a table,
+      you can clearly hear which column head the data falls under.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.6.0
+    wcag_criterion: 2.4.6
+  - summary: Screen readers correctly announce table elements.
+    summary_additional: |
+      When using a screen reader to navigate a table,
+      the screen reader announces the table and calls the header rows "column headers".
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.6.0
+    wcag_criterion: 4.1.1
+  - 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.6.0
+    wcag_criterion: 4.1.2

_data/changelogs/component-table-accessibility.yml

@@ -0,0 +1,9 @@
+title: Table accessibility tests
+type: component
+changelogURL:
+items:
+  - date: NNNN-NN-NN
+    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: NNNN-NN-NN
+    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/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,8 +92,18 @@
   {% 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" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#name-role-value" %}
-{% endif %}
+{% endif %}