Skip to content

USWDS-Site: Publish range slider accessibility checklist #3157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
heymatthenry wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

USWDS-Site: Publish range slider accessibility checklist #3157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4cd9a00
Add test data & changelog stubs
heymatthenry Apr 24, 2025
5bfc39d
Update range-slider.yml
amycole501 Apr 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions _components/range-slider/accessibility-tests.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
permalink: /components/range-slider/accessibility-tests/
layout: accessibility-test
component:
name: Range slider
title: Range slider accessibility tests
category: Components
lead: Any USWDS range slider component should pass these manual accessibility tests.
changelog:
key: 'component-range-slider-accessibility'
---
12 changes: 2 additions & 10 deletions _components/range-slider/range-slider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,8 @@ implementation:
description: 'Changes the preposition between current value and max value in screen reader readouts. For example, adding a value with the Spanish translation "de" enables a readout "like 20 de 100". When adding a range slider to a non-English page, be sure to update the preposition as necessary.'
default: 'of'
subnav:
- text: Preview
href: '#range-slider-preview'
- text: Code
href: '#range-slider-code'
- text: Guidance
href: '#range-slider-guidance'
- text: Package
href: '#range-slider-package'
- text: Latest updates
href: '#changelog'
- text: Range slider accessibility tests
href: /components/range-slider/accessibility-tests/
tags:
- form
- forms
Expand Down
73 changes: 73 additions & 0 deletions _data/accessibility-tests/range-slider.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
title: Range slider
component_status: pass
test_items:
# General tests
- summary: Range slider provides multiple ways to indicate value.
summary_additional: When operating the range slider, there are visible indicators of value in numbers or words that reflect the position of the slider button.
test_status: pass
test_type: general
version_tested: 3.8.2
wcag_criterion: 1.3.3
- summary: Range slider display is consistent on mobile devices.
summary_additional: When you view the range slider component on mobile devices and tablets, it displays in both portrait and landscape orientation with no loss of functionality.
test_status: pass
test_type: general
version_tested: 3.8.2
wcag_criterion: 1.3.4
- summary: Range slider elements have proper contrast.
summary_additional: When you use a color contrast analyzer, the contrast between the outline of the range slider button and slider bar is at least 3:1 from their respective surrounding backgrounds.
test_status: pass
test_type: general
version_tested: 3.8.2
wcag_criterion: 1.4.11
- summary: Touch target size for all clickable elements meets height and width requirements.
summary_additional: The size and spacing of the touch target are at least 24 pixels wide and 24 pixels tall.
test_status: pass
test_type: general
version_tested: 3.8.2
wcag_criterion: 2.5.8
- summary: Users can find information about how to operate the range slider.
summary_additional: Clear, readable information about how to operate the range slider appears above the component.
test_status: conditional
test_type: screen_reader
version_tested: 3.8.2
wcag_criterion: 3.3.2
# Zoom/screen magnification tests
- summary: Using zoom does not obstruct the range slider.
summary_additional: When you zoom to 400%, you can see and use all elements of the range slider and. It does not overlap with other content and no scrolling is needed to operate it.
test_status: pass
test_type: zoom
version_tested: 3.8.2
wcag_criterion: 1.4.10
# Keyboard navigation tests
- summary: Keyboard actions can access all range slider functionality.
summary_additional: You can use only a keyboard to operate the range slider to increase or decrease the value or type a value into the text field (if available).
test_status: pass
test_type: keyboard
version_tested: 3.8.2
wcag_criterion: 2.1.1
- summary: Range slider does not trap keyboard focus.
summary_additional: When you navigate through the range slider with a keyboard, you can easily move into and out to get to other content.
test_status: pass
test_type: keyboard
version_tested: 3.8.2
wcag_criterion: 2.1.2
- summary: Focus indicator is clearly visible around range slider elements.
summary_additional: When using the range slider, a visible indicator indicates the button touch target.
test_status: conditional
test_type: keyboard
version_tested: 3.8.2
wcag_criterion: 2.4.7
# Screen reader tests
- summary: Screen readers announce the range slider component and its function in the form or page.
summary_additional: When using a screen reader, you hear if the range slider is a required element and what purpose or function the range slider has within the form.
test_status: pass
test_type: screen_reader
version_tested: 3.8.2
wcag_criterion: 1.3.1
- summary: Screen readers announce the value and limit of the range slider.
summary_additional: When you interact with a range slider with a screen reader, you hear the slider label, the total amount available in the range, and the current value (Example: "50 out of 100").
test_status: conditional
test_type: screen_reader
version_tested: 3.8.2
wcag_criterion: 4.1.2
8 changes: 8 additions & 0 deletions _data/changelogs/component-range-slider-accessibility.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
title: Range slider accessibility tests
type: component
items:
- date: NNNN-NN-NN
summary: Added accessibility tests page.
affectsGuidance: true
githubPr: [Related PR number]
githubRepo: uswds-site
5 changes: 5 additions & 0 deletions _data/changelogs/component-range-slider.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ title: Range slider
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: 2023-11-09
summary: Added optional data attributes to customize text for screen readers.
summaryAdditional: The `data-text-unit` attribute provides additional context to screen reader users, and `data-text-preposition` allows for proper preposition translations on non-English pages.
Expand Down