Skip to content
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.

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

AC Content revision joe #161

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
1 change: 1 addition & 0 deletions Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ PLATFORMS
arm64-darwin-20
arm64-darwin-21
arm64-darwin-22
arm64-darwin-23
x86_64-darwin-20
x86_64-linux

Expand Down
6 changes: 3 additions & 3 deletions _checklist-web/breadcrumbs.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ order: 1

keyboard:
tab: |
Focus visibly moves to the link
Focus moves to the link and there is a highly visible visual indication of keyboard focus
enter: |
Activates the link

Expand All @@ -31,7 +31,7 @@ gherkin-keyboard:
- when: |
the tab key to move focus to a link
result: |
focus is strongly visually indicated
there is a highly visible visual indication of keyboard focus
- then: |
the enter key to activate the link
result: |
Expand Down Expand Up @@ -63,7 +63,7 @@ wcag:
- name: Robust
list:
- criteria: Meets criteria across platforms, devices and viewports
- criteria: Conveys the correct semantic role
- criteria: Conveys the correct semantic role and current state is announced
---

## Code example
Expand Down
4 changes: 2 additions & 2 deletions _checklist-web/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ order: 1

keyboard:
tab: |
Focus visibly moves to the button.
Focus moves to the button and there is a highly visible visual indication of keyboard focus
spacebar: |
Activates the button.
enter: |
Expand All @@ -33,7 +33,7 @@ gherkin-keyboard:
- when: |
the tab key to move focus to a button
result: |
focus is strongly visually indicated
there is a highly visible visual indication of keyboard focus
- then: |
the spacebar and/or enter key to activate the button
result: |
Expand Down
2 changes: 1 addition & 1 deletion _checklist-web/footer.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ order: 9

keyboard:
skip-links: |
Focus moves directly to the footer
If a skip link points to the footer, focus moves directly to the footer
tab: |
Links and buttons within the footer are focusable

Expand Down
4 changes: 1 addition & 3 deletions _checklist-web/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,13 @@ mobile:
swipe: |
Focus moves to the inputs inside the form
keyboard: |
Keyboard appears
Keyboard appears when interacting with text fields

screenreader:
name: |
If multiple forms are present (Ex: Search, Sign in, Newsletter subscription), the form must have a name
role: |
It is discoverable with screenreader shortcuts as a form landmark along with its name
mode: |
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

the screenreader switch from browse shortcuts to forms shortcuts

gherkin-keyboard:
- when: |
Expand Down
8 changes: 3 additions & 5 deletions _checklist-web/header.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,8 @@ keyboard:
skip-links: |
Focus moves directly to the header or navigation
tab: |
Nothing, headings are not focusable unless they are actionable
arrow-keys: |
Headings are browsed

Nothing, headers are not typically in the tab order

mobile:
swipe: |
Focus moves directly to the header or navigation
Expand All @@ -29,7 +27,7 @@ gherkin-keyboard:
- when: |
the tab key to enter the web browser window
result: |
focus is strongly visually indicated on interactive components
that there is a highly visible visual indication of keyboard focus on interactive controls within the header

gherkin-mobile:
- when: |
Expand Down
8 changes: 3 additions & 5 deletions _checklist-web/html.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ order: 0
keyboard:
tab: |
Enters the page and visibly focuses only interactive elements
zoom: |
Content zooms up to 200%

mobile:
swipe: |
Expand All @@ -29,7 +27,7 @@ gherkin-keyboard:
- when: |
the keyboard to open a new web page
result: |
the page has a unique logical title in the browser tab
a highly noticeable visual indication of keyboard focus on focusable controls

gherkin-mobile:
- when: |
Expand All @@ -40,8 +38,8 @@ gherkin-mobile:
content is accessible in landscape or portrait orientation

settings:
zoom/pinch: |
text can resize up to 200% without losing information
zoom: |
Text can be zoomed to 200% and the page can be zoomed to 400% without a loss of content or two-dimensional scrolling
---
## Developer notes

Expand Down
2 changes: 1 addition & 1 deletion _checklist-web/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ gherkin-keyboard:
- when: |
the tab key to move focus to a link
result: |
focus is strongly visually indicated
there is a highly visible visual indication of keyboard focus
- then: |
the enter key to activate the link
result: |
Expand Down
6 changes: 3 additions & 3 deletions _checklist-web/main.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ keyboard:

mobile:
swipe: |
Focus moves within main area
Focus moves within the main area

screenreader:
role: |
It is discoverable with screenreader shortcuts as main landmark
group: |
It contains the content portion of the page starting with the H1
It contains the content portion of the page ideally starting with the H1

gherkin-keyboard:
- when: |
Expand All @@ -29,7 +29,7 @@ gherkin-keyboard:

gherkin-mobile:
- when: |
swipe to elements in the header
swipe to elements in the page

---

Expand Down
12 changes: 6 additions & 6 deletions _checklist-web/nav.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ order: 2

keyboard:
skip-links: |
Focus moves directly to the nav element
Focus moves directly to the nav element or the first focusable control in the nav
tab: |
Focus moves to Links and buttons within the nav
Focus moves to controls within the nav and there is a highly visible visual indication of keyboard focus

mobile:
swipe: |
Expand All @@ -19,15 +19,15 @@ mobile:

screenreader:
name: |
It indicates its role AND IF multiple navigations are present (ex: Main navigation, Site map, Breadcrumbs), the name of the navigation
it indicates its role AND IF multiple navigations are present (ex: Main navigation, Site map, Breadcrumbs), the name of the navigation
role: |
It is discoverable with screenreader shortcuts as a navigation landmark
it is discoverable with screenreader shortcuts as a navigation landmark

gherkin-keyboard:
- when: |
the arrow keys to browse the navigation menu
tab is used to browse the navigation menu
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

result: |
the screen scrolls through the page
that there is a highly visible visual indication of keyboard focus on interactive controls within the navigation region

gherkin-mobile:
- when: |
Expand Down
4 changes: 2 additions & 2 deletions _checklist-web/pagination.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,15 @@ gherkin-keyboard:
- then: |
the tab key to move focus to a link in the nav and use the enter key
result: |
my browser goes to the intended location
my browser goes to the intended location or the page is dynamically updated and I'm notified about this change in the UI

gherkin-mobile:
- when: |
swipe to elements in the nav
- then: |
doubletap with the link in focus
result: |
my browser goes to the intended location
my browser goes to the intended location or the screen is dynamically updated and I'm notified about this change in the UI

wcag:
- name: Perceivable
Expand Down
17 changes: 8 additions & 9 deletions _checklist-web/search.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ categories: nav header

keyboard:
tab: |
Focus moves visibly to the search text input and search button
Focus moves to the search text input and search button [if present] and there is a highly visible visual indication of keyboard focus
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also find this all a bit confusing where we are saying focus is moving to both the search field AND the button. I feel like we should focus on the input behavior and make any mention of the button explicit and clear

space: |
Search button is activated
Search button is activated [if present]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think lines 12 and 14 are flipped? should be about the search in line 12 and the search button for line 14? because space inside the search field would just add a space to the string being searched

enter: |
Search is activated
Search is activated [if present]

mobile:
swipe: |
Focus moves to the search text input and search button
Focus moves to the search text input and search button [if present]
doubletap: |
Search button is activated
Search button is activated [if present]

screenreader:
name: |
Expand All @@ -31,9 +31,9 @@ gherkin-keyboard:
- when: |
the tab key to move focus to a search input
result: |
focus is strongly visually indicated
there is a highly visible visual indication of keyboard focus
- then: |
the tab key to move focus to the search submit button
the tab key to move focus to the search submit button [if present]
result: |
the button is focused
- then: |
Expand All @@ -55,9 +55,8 @@ wcag:
- name: Operable
list:
- criteria: Is keyboard operable
- criteria: Any click/tap target area is no smaller than 44x44px
- criteria: Any click/tap target area is ideally no smaller than 44x44px
- criteria: The disabled and focus states have a 3:1 minimum contrast ratio against default
- criteria: The focus indication has a minimum area equal to the width of the element and 2px in height
- criteria: A search submit button is also available and meets button design criteria
- name: Understandable
list:
Expand Down
2 changes: 1 addition & 1 deletion _checklist-web/skip-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ order: 1

keyboard:
tab: |
Focus moves to the skip link
Focus moves to the skip link and there is a visual indication of keyboard focus
enter: |
Activates the link, focus/tabindex moves directly to the targeted element

Expand Down
Loading