Merge pull request #8 from isabela-pf/keyboardstart

Create draft keyboard navigation event content

workshop-resources/keyboard-navigation/README.md

@@ -0,0 +1,25 @@
+# Keyboard navigation Workshops
+
+Learn how to surf the web with a keyboard and contribute feedback for keyboard navigation fixes! 
+
+Keyboard navigation review workshops gather community to learn and practice expected keyboard navigation behavior. Participants also learn foundational tests they can perform and how to describe and present these issues constructively. This can be done confidently for any web interface, and could be adapted to desktop apps. At the end, everyone's work gets wrapped up to a neat for contribution back to the main project.
+
+## Resources
+
+In this directory, you'll find the
+- [agenda template](agenda-template.md)
+- [keyboard navigation review template](review-template.md)
+
+## Past events
+
+Listed from oldest to newest
+
+| Year | Project | Working PR | Contributing PR | Status | Other info | 
+|------|---------|------------|-----------------|--------|------------|
+|  |  |  |  |  |  |
+
+## Roll the credits
+
+While anyone can run these events, there are a few kind people who conceptualized, prototyped, and tested them out from the beginning. Special thanks to
+- [@tonyfast](https://github.com/tonyfast/)
+- [@isabela-pf](https://github.com/isabela-pf/)

workshop-resources/keyboard-navigation/agenda-template.md

@@ -0,0 +1,82 @@
+# Template for keyboard navigation event agendas
+
+> *Event agendas are the core resource for an event. This document consolidates all links and knowledge needed in order to participate in the event and helps participants know what to expect. While this document does not usually get contributed to a project, saving it as record of the event is recommended. Agendas may benefit from the addition of resources specific to the project the event is supporting, like a documentation style guide, a project glossary, or the like.*
+
+> *Please delete any comments using the `>*text here*` syntax before using this template in the wild.*
+
+An event for [project name and link]()!
+
+## Intro
+
+Event time: Weekday, month day ([check the time in your timezone](https://arewemeetingyet.com/))
+
+Welcome! Thank you for taking the time to learn a few ways to make open source-—or any digital space—-more accessible by testing keyboard accessibility.
+
+We are all learning, so please don't hesitate to ask questions.
+
+## Agenda
+
+> *Choose which agenda works best for you based on time available, or adapt to fit your time needs.*
+
+> *For a one-hour event*
+
+- 0 minutes-20: Welcome, keyboard navigation information, and goals for the event
+- 20–30: Questions 
+- 30–50: Work time!
+- 50–60: Review contributions upon request and answer final questions
+- Optional: Submit your favorite reviews to the hall of fame! 
+
+> *For a two-hour event*
+
+- 0 minutes-20: Welcome, keyboard navigation information, and goals for the event
+- 20–30: Questions 
+- 30-35: Break
+- 35–90: Work time!
+- 90–95: Break
+- 95–120: Review contributions upon request and answer final questions
+- Optional: Submit your favorite reviews to the hall of fame! 
+
+## Resources
+
+Needed for the event:
+- [The collaborative event PR]()
+- [Slides]()
+- [Project we are contributing to (ie. the documentation, website, or something similar; this should be the final rendered place.)]()
+- [Keyboard navigation - what to press](https://github.com/isabela-pf/a11y-events/tree/main/workshop-resources/keyboard-navigation/what-to-press.md) 
+
+Extra information: 
+- [Keyboard Accessibility - WebAIM](https://webaim.org/techniques/keyboard/)
+- [Browsing with a keyboard - Tetralogical blog](https://tetralogical.com/blog/2021/10/26/browsing-with-a-keyboard/)
+- [Quick accessibility tests anyone can do - Tetralogical blog](https://tetralogical.com/blog/2022/01/18/quick-accessibility-tests-anyone-can-do/)
+
+
+## How to participate
+
+1. Go to [our working PR]() and review the types of keyboard navigation review listed.
+2. Comment on the PR which section of review you plan to work on. You can work as a team if desired!
+3. Using the steps listed in your section of the working PR and the Resources section of this agenda, review the interface.
+4. Take note of what happens when completing review steps, making sure you can reproduce the review as needed. Mark down any questions you have as well!
+5. Make sure to note fill out all areas in your section, even if you need to mark them as n/a  or not completable. While you can always add more information, these are the foundation.
+6. Submit your review notes on the PR via single-comment [GitHub suggestions](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request). Add review on the line of the "Result" prompt, into a table cell, or in the "Notes" prompt at the end of each section.
+
+**Note:** If you think anything is missing, please tell [event host] and they can add it.
+
+7. Repeat steps 2 through 6 as much as you'd like. Be sure to coordinate with others to cover as much as we can.
+8. **Optional:** If you have time, you can team up with other participants and give feedback on each others' review.
+9. You did it! Great work! 
+
+## Review checklist
+
+These are a few of the main things we need to make sure our reviews are trackable and reproducible.
+
+The review has
+- [ ] All requested information has been added or marked "n/a"
+- [ ] There is enough information that someone could recreate the review task (it's reproducible)
+- [ ] If an area could not be completed, it is marked "could not be completed" with additional notes as needed
+- [ ] The review is added as a [GitHub suggestion](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request) (so reviewers get credit)
+
+## Questions
+
+We'll try and answer questions during the event, but often people have questions that will require a little research or we just plain run out of time. Feel free to leave questions so we can get back to them post-event.
+
+- [Your questions here! Adding your name is optional.]

workshop-resources/keyboard-navigation/review-template.md

@@ -0,0 +1,210 @@
+# Collaborative keyboard navigation review
+
+Please add your findings as [GitHub suggestions](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request) so you are credited in the commit history!
+
+## Keyboard navigation accessibility review of [tool name]
+
+Reviewed via based on [this link we'll all be working off of]().
+
+- Review date:
+- Operating system:
+- Browser: 
+- Keyboard language(s) used:
+- Any other details (ie. dependencies, github repo, etc.):
+
+### Authors
+
+Participants may add their name below if they would like to be listed publicly as a part of the review.
+
+1.
+2.
+3.
+4.
+5. 
+6.
+7.
+8.
+9.
+10. 
+
+## Review
+
+### Content order
+
+When accessed via keyboard, the content order is logical. ([WCAG 2.2 Focus order](https://www.w3.org/TR/WCAG22/#focus-order))
+
+1. From the top of the page, press the Tab key repeatedly until reviewer reaches the end of content.
+2. Reviewers will know it is the end because if they press Tab once more their keyboard focus will return to the browser.
+3. If the reviewer cannot make it to the end of content, please take note of where the focus gets stuck.
+
+Does the content order follow reviewer expectations based on reading the content?
+Result:
+
+Does the content order make sense for interacting with the content?
+Result:
+
+Are any major content areas missed when navigating via keyboard?
+Result:
+
+Are any interactive content areas missed when navigating via keyboard?
+Result:
+
+Other notes or recommendations:
+
+### Areas to navigate
+
+All areas of the tool can be accessed using keyboard navigation. ([WCAG 2.2 Keyboard](https://www.w3.org/TR/WCAG22/#keyboard))
+
+1. Navigate via the Tab key major content areas
+2. Use the arrow keys to navigate within major content areas.
+
+| Area | Able to navigate to the area (yes/no/not applicable) | Able to navigate fully within the area (yes/no/not applicable) | Able to navigate out of the area (yes/no/not applicable) |
+|---|---|---|---|
+| Navigation 1 | a | b | c |
+| Navigation 2 | d | e | f |
+| Aside/related content | g | h | i |
+| Main area | j | k | l |
+| Main area section | m | n | o |
+| Footer | p | q | r |
+
+Other notes by area:
+
+### Keyboard/tab traps
+
+When navigating via keyboard, there are no areas where keyboard focus can enter but not exit. The focus never gets "trapped." ([WCAG 2.2 No keyboard trap](https://www.w3.org/TR/WCAG22/#no-keyboard-trap))
+
+From the above section (Areas to navigate), please list all areas where the reviewer could not navigate out of using the keyboard. Notes are welcome!
+
+Keyboard/tab traps:
+- tab trap 1
+- tab trap 2
+
+Other notes or recommendations:
+
+### Skip links
+
+When using keyboard navigation, there is a link to switch keyboard focus directly to the tool's main content and skip header navigation or repeated content. ([WCAG 2.2 Bypass Blocks](https://www.w3.org/TR/WCAG22/#bypass-blocks))
+
+1. From the top of the page, press the Tab key. If you have already been interacting with the page, reviewer may need to reload page and then press Tab.
+2. Once focus is on the skip link, press Space or Enter to activate it.  
+
+Is there a skip link?
+Result:
+
+Is the skip link prompt visible?
+Result:
+
+What does the skip link prompt skip?
+Result:
+
+Where does the skip link prompt move user focus to?
+Result:
+
+Does the skip link behavior meet reviewer expectations?
+Result:
+
+Other notes or recommendations:
+
+### Interactive Areas
+
+All buttons, links, form fields, or similar interactive areas can be both accessed and activated using only the keyboard. ([WCAG 2.2 Keyboard](https://www.w3.org/TR/WCAG22/#keyboard))
+
+1. Navigate via the Tab key to interactive areas. 
+2. Activate interactive areas using the Enter or Spacebar key.
+
+| Interactive area | Able to navigate to the area (yes/no/not applicable) | Able to input information (yes/no/not applicable) | Able to activate the area (yes/no/not applicable) |
+|---|---|---|---|
+| Button 1| a | b | c |
+| Button 2| d | e | f |
+| Button 3 | g | h | i |
+| Link 1 | j | k | l |
+| Link 2 | m | n | o |
+| Form field 1 | p | q | r |
+| Add table rows as needed! |  |  |  |
+| |  |  |  |
+
+Other notes by area:
+
+### Focus
+
+There is a visible focus state for all content. It appears by default when navigating via keyboard. ([WCAG 2.2 Focus visible](https://www.w3.org/TR/WCAG22/#focus-visible))
+
+1. From the top of the page, press the Tab key repeatedly until reviewer reaches the end of content. 
+2. If end of content cannot be reached, the reviewer may report on what they could interact with.
+3. If the reviewer is comfortable, they may also use the browser inspector to select an area and toggle focus per area.
+
+Is there visible focus styling? If so, please briefly describe it.
+Result:
+
+Is the focus styling consistent throughout?
+Result:
+
+Are there any areas without visible focus styling?
+Result: 
+
+Was the reviewer ever unclear about where their keyboard focus was during the review? If so, please note where or why.
+Result:
+
+Other notes or recommendations:
+
+### Mixed input
+
+It is possible to complete tasks while switching between input mechanisms, for example using a keyboard and mouse and touch screen. ([WCAG 2.2 Concurrent input mechanisms](https://www.w3.org/TR/WCAG22/#concurrent-input-mechanisms))
+
+1. Locate an interactive area.
+2. Complete the interaction using keyboard controls.
+3. Complete the interaction using the mouse.
+4. Complete the interaction using touch controls.
+5. If the task has multiple steps, the reviewer can try using a different interaction for each step.
+6. Repeat as needed across interactive areas.
+
+#### Task name + region
+
+Does the task have multiple steps? If yes, please list them.
+Result:
+
+Can the task be completed with only keyboard controls?
+Result:
+
+Can the task be completed with only mouse controls?
+Result:
+
+Can the task be completed with only touch screen contorls?
+Result:
+
+### Keyboard shortcuts
+
+Keyboard shortcuts--key combinations that initiate an action-- may not inhibit keyboard navigation. Keyboard shortcuts also need to be configurable. ([WCAG 2.2 Character key shortcuts](https://www.w3.org/TR/WCAG22/#character-key-shortcuts))
+
+[List of shortcuts for this tool]().
+
+1. Search for where keyboard shortcut settings may be edited.
+2. Review list of keyboard shortcuts.
+3. Choose a shortcut and answer the prompts.
+4. Repeat as needed.
+
+Can shortcuts be turned off?
+Result:
+
+Can shortcuts be configured (remapped to different keys than the default)?
+Result:
+
+Do any shortcuts conflict with browser or operating system controls?
+Result:
+
+Other notes or recommendations:
+
+#### Shortcut name
+
+Shortcut keys:
+
+How many keys are needed?
+Result: 
+
+How close together are the keys?
+Result:
+
+Does the shortcut only activate when focus is on the related part of the interface?
+Result:
+
+Other notes or recommendations:

workshop-resources/keyboard-navigation/what-to-press.md

@@ -0,0 +1,11 @@
+# Keyboard navigation - what to press
+
+- Tab: go to the next focusable element
+- Shift + Tab: go to the previous focusable element
+- Enter or Space: activate interactive area (like buttons) or to confirm a selection
+- Arrow keys: navigate within a focusable element (like selecting items within a menu)
+
+For more specific controls, review [Keyboard Testing - WebAIM](https://webaim.org/techniques/keyboard/#testing).
+
+## Reference:
+[Browsing with a keyboard - Tetralogical blog](https://tetralogical.com/blog/2021/10/26/browsing-with-a-keyboard/)