initial commit

_components/card/accessibility-tests.md

@@ -0,0 +1,11 @@
+---
+permalink: /components/card/accessibility-tests/
+layout: accessibility-test
+component:
+ name: card
+title: Card accessibility tests
+category: Components
+lead: Any USWDS card component should pass these manual accessibility tests.
+changelog:
+ key: 'component-card-accessibility'
+---

_components/card/card.md

@@ -14,16 +14,8 @@ redirect_from:
 layout: component
 lead: Cards contain content and actions about a single subject.
 subnav:
-- text: Preview
-  href: '#card-preview'
-- text: Code
-  href: '#card-code'
-- text: Guidance
-  href: '#card-guidance'
-- text: Package
-  href: '#card-package'
-- text: Latest updates
-  href: '#changelog'
+- text: Card accessibility tests
+  href: /components/card/accessibility-tests/
 type: component
 variants:
   - variant: "`.usa-card--flag`"

_data/accessibility-tests/card.yml

@@ -0,0 +1,92 @@
+title: Card
+component_status: pass
+test_items:
+# General tests
+  - summary: Color is not the only method used to convey meaning.
+    summary_additional: When you view the elements in a card, you can see and read text, and do not have to rely on color alone for meaning.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.2
+    wcag_criterion: 1.4.1
+  - summary: Card content meets color contrast requirements.
+    summary_additional: When you look at a card and use ANDI or another color contrast analyzer, contrast between the text and background color is at least 4:5:1.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.2
+    wcag_criterion: 1.4.3
+  - summary: Links provide direct location description.
+    summary_additional: You can read the text of any link in a card to understand where the link will take you.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.2
+    wcag_criterion: 2.4.4
+  - summary: Headings are clear and descriptive.
+    summary_additional: When you view a card, the heading is clear and concise.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.2
+    wcag_criterion: 2.4.6
+  - summary: Touch target size for all clickable elements meets height and width requirements.
+    summary_additional: When you use the browser inspect tool, the size and spacing of the touch target are at least 24px wide and 24px tall.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.2
+    wcag_criterion: 2.5.8
+# Zoom/screen magnification tests
+  - summary: Using zoom does not obstruct the card elements.
+    summary_additional: When you zoom in at 400%, you can see the card content and scroll up and down. It does not overlap with other page content and there is no loss of information.
+    test_status: pass
+    test_type: zoom
+    version_tested: 3.8.2
+    wcag_criterion: 1.4.10
+# Keyboard navigation tests
+  - summary: Content is accessible through keyboard alone.
+    summary_additional: When you use only a keyboard, all links and buttons in the card are accessible.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.2
+    wcag_criterion: 2.1.1
+  - summary: Keyboard actions will not trap focus.
+    summary_additional: When you use a keyboard, you can tab into and out of each card, and you can easily move in and out of content.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.2
+    wcag_criterion: 2.1.2
+  - summary: Focus follows a logical content order.
+    summary_additional: When you navigate through the card with a keyboard, the focus follows a logical order in relation to other card content.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.2
+    wcag_criterion: 2.4.3
+  - summary: Focus indicator is clearly visible around card interactive elements.
+    summary_additional: When you use a keyboard to tab into the card's interactive elements, there is a visible outline or other clear indication of focus.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.2
+    wcag_criterion: 2.4.7
+# Screen reader tests
+  - summary: Screen readers announce groups of cards as an unordered list.
+    summary_additional: When you use a screen reader, you hear each card in a group announced as a list item.
+    test_status: conditional
+    test_type: screen_reader
+    version_tested: 3.8.2
+    wcag_criterion: 1.3.1
+  - summary: Screen reader announces card content.
+    summary_additional: When you use a screen reader, you hear the hierarchy of headings and interactive elements as they are presented on the page.
+    test_status: conditional
+    test_type: screen_reader
+    version_tested: 3.8.1
+    wcag_criterion: 1.3.1
+  - summary: Card contents is announced in the same order it appears on the page.
+    summary_additional: When you navigate through card content with a screen reader, the announced content matches the visual presentation.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.2
+    wcag_criterion: 1.3.2
+  - summary: Screen reader announces roles and states of links.
+    summary_additional: When you use a screen reader and tab through the card's interactive elements, you hear each element's role announced. If there are links, you will hear if the link has been visited or not.
+    test_status: conditional
+    test_type: screen_reader
+    version_tested: 3.8.2
+    wcag_criterion: 4.1.2
+

_data/changelogs/component-card-accessibility.yml

@@ -0,0 +1,8 @@
+title: Card accessibility tests
+type: component
+items:
+ - date: NNNN-NN-NN
+   summary: Added accessibility tests page.
+   affectsGuidance: true
+   githubPr: [Related PR number]
+   githubRepo: uswds-site

_data/changelogs/component-card.yml

@@ -2,6 +2,11 @@ title: Card
 type: component
 changelogURL:
 items:
+  - date: NNNN-NN-NN
+    summary: Added WCAG compliance tag and accessibility test status section.
+    affectsGuidance: true
+    githubPr: [Related PR number]
+    githubRepo: uswds-site
   - date: 2024-10-04
     summary: Fixed a bug that caused the component to ignore the `$theme-card-font-family` setting.
     summaryAdditional: Confirm that your implementation of the card component displays with the expected font family.