User Tools

Site Tools


accessibility:testing

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revisionBoth sides next revision
accessibility:testing [2023/07/10 13:20] – created sclaccessibility:testing [2023/07/10 14:28] scl
Line 29: Line 29:
 Keyboard navigation is not enabled by default in some browsers. Keyboard navigation is not enabled by default in some browsers.
  
-  * [https://stackoverflow.com/a/11713537|How to enable keyboard tabbing in Firefox on Macs]+  * [[https://stackoverflow.com/a/11713537|How to enable keyboard tabbing in Firefox on Macs]]
   * In Chrome, to go Settings > Accessibility. Turn on “Navigate pages with a text cursor” and “Show a quick highlight on the focused object.”   * In Chrome, to go Settings > Accessibility. Turn on “Navigate pages with a text cursor” and “Show a quick highlight on the focused object.”
-  * In Safari, go to Settings > Advanced and check “Press Tab to highlight each item on a webpage” ([https://twitter.com/springbroken/status/1552718321899954179|screenshot])+  * In Safari, go to Settings > Advanced and check “Press Tab to highlight each item on a webpage” ([[https://twitter.com/springbroken/status/1552718321899954179|screenshot]])
  
 Place your cursor in the address bar and then press the tab key to move sequentially through focusable items. Use Shift-Tab to go back. Press Enter or Space to open dropdowns or activate buttons. Within dropdown menus and tab sets, you should be able to use the arrow keys to navigate the subsections. Use Escape to close dropdowns, popups, and modals. Place your cursor in the address bar and then press the tab key to move sequentially through focusable items. Use Shift-Tab to go back. Press Enter or Space to open dropdowns or activate buttons. Within dropdown menus and tab sets, you should be able to use the arrow keys to navigate the subsections. Use Escape to close dropdowns, popups, and modals.
Line 39: Line 39:
 ==== References: ==== ==== References: ====
  
-[Keyboard Testing: The A11y Enhancement to Your Definition of Done](https://dev.to/steady5063/keyboard-testing-the-a11y-enhancement-to-your-definition-of-done-2n7c)+[[https://dev.to/steady5063/keyboard-testing-the-a11y-enhancement-to-your-definition-of-done-2n7c|Keyboard Testing: The A11y Enhancement to Your Definition of Done]]
  
 ===== Testing with Screen Readers ===== ===== Testing with Screen Readers =====
Line 45: Line 45:
 Getting started with screen readers can be challenging because they lack visible controls. Find a cheat sheet of keyboard shortcuts for the software you’re using, and have it ready before you begin. Getting started with screen readers can be challenging because they lack visible controls. Find a cheat sheet of keyboard shortcuts for the software you’re using, and have it ready before you begin.
  
-[https://www.sarasoueidan.com/blog/testing-environment-setup/|Setting up a screen reader testing environment on your computer, Sara Soueidan]+[[https://www.sarasoueidan.com/blog/testing-environment-setup/|Setting up a screen reader testing environment on your computer, Sara Soueidan]]
  
-[https://accessibility.huit.harvard.edu/manual-testing-accessibility#sr|Getting started with screen reader testing, Harvard University Digital Accessibility team]+[[https://accessibility.huit.harvard.edu/manual-testing-accessibility#sr|Getting started with screen reader testing, Harvard University Digital Accessibility team]]
  
 Guides to keyboard shortcuts in screen readers: Guides to keyboard shortcuts in screen readers:
  
-  * [https://dequeuniversity.com/screenreaders/survival-guide|Desktop Screen Readers Survival Guide - Basic Keyboard Shortcuts] Shows a combined chart of common shortcuts in all major screen readers +  * [[https://dequeuniversity.com/screenreaders/survival-guide|Desktop Screen Readers Survival Guide - Basic Keyboard Shortcuts]] Shows a combined chart of common shortcuts in all major screen readers 
-  * [https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts|JAWS Keyboard Shortcuts] +  * [[https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts|JAWS Keyboard Shortcuts]
-  * [https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts|NVDA Keyboard Shortcuts] +  * [[https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts|NVDA Keyboard Shortcuts]
-  * [https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts|VoiceOver Keyboard Shortcuts]+  * [[https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts|VoiceOver Keyboard Shortcuts]]
  
-To speed up testing, you can turn on the screen reader’s feature to display a transcript of the page. This shows exactly what the screen reader will announce. For Macs, the [https://www.smashingmagazine.com/2021/06/automating-screen-reader-testing-macos-autovo/|Auto VO] tool automates VoiceOver tests. The transcript will update live as you move through interactive controls.+To speed up testing, you can turn on the screen reader’s feature to display a transcript of the page. This shows exactly what the screen reader will announce. For Macs, the [[https://www.smashingmagazine.com/2021/06/automating-screen-reader-testing-macos-autovo/|Auto VO]] tool automates VoiceOver tests. The transcript will update live as you move through interactive controls.
  
 ===== Testing Color Contrast ===== ===== Testing Color Contrast =====
Line 62: Line 62:
 The various accessibility testing browser extensions will flag instances of insufficient color contrast. To test new color combinations, there are numerous tools. The most basic are: The various accessibility testing browser extensions will flag instances of insufficient color contrast. To test new color combinations, there are numerous tools. The most basic are:
  
-  * [https://webaim.org/resources/contrastchecker/|WebAIM Color Contrast checker] +  * [[https://webaim.org/resources/contrastchecker/|WebAIM Color Contrast checker]
-  * [https://webaim.org/resources/linkcontrastchecker/|WebAIM Link Contrast checker]+  * [[https://webaim.org/resources/linkcontrastchecker/|WebAIM Link Contrast checker]]
  
 To find new accessible color combinations, try: To find new accessible color combinations, try:
  
-  * [http://web-accessibility.carnegiemuseums.org/design/color/|Carnegie Museums’ color accessibility guidelines] +  * [[http://web-accessibility.carnegiemuseums.org/design/color/|Carnegie Museums’ color accessibility guidelines]
-  * [https://contrast-finder.tanaguru.com/|Tanaguru contrast finder] +  * [[https://contrast-finder.tanaguru.com/|Tanaguru contrast finder]
-  * [https://geenes.app/editor/accessibility+  * [[https://geenes.app/editor/accessibility|Geenes]]
-|Geenes]+
  
 ==== Stylesheets and Bookmarklets for Specific Issues ==== ==== Stylesheets and Bookmarklets for Specific Issues ====
Line 76: Line 75:
 Some developers have assembled stylesheets that you can apply to your pages to highlight specific accessibility problems. Some developers have assembled stylesheets that you can apply to your pages to highlight specific accessibility problems.
  
-  * [https://a11y-tools.com/bookmarklets/|A11y Audit bookmarklets] +  * [[https://a11y-tools.com/bookmarklets/|A11y Audit bookmarklets]
-  * [https://ffoodd.github.io/a11y.css/|A11y.css] +  * [[https://ffoodd.github.io/a11y.css/|A11y.css]
-  * [https://absichtbar.de/public/test/zugangstest_missing.css|Annika Brinkman’s CSS warnings stylesheet]+  * [[https://absichtbar.de/public/test/zugangstest_missing.css|Annika Brinkman’s CSS warnings stylesheet]]
  
 ==== Automated Testing ==== ==== Automated Testing ====
  
-  * [https://docs.deque.com/devtools-html/4.0.0/en/cli-home|axe DevTools HTML CLI] +  * [[https://docs.deque.com/devtools-html/4.0.0/en/cli-home|axe DevTools HTML CLI]
-  * [https://www.smashingmagazine.com/2021/06/automating-screen-reader-testing-macos-autovo/Automating Screen Reader Testing On macOS Using Auto VO]+  * [[https://www.smashingmagazine.com/2021/06/automating-screen-reader-testing-macos-autovo/Automating Screen Reader Testing On macOS Using Auto VO]]
accessibility/testing.txt · Last modified: 2024/04/22 14:46 by lhernandez

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.