Skip to content

Commit 2e6aebc

Browse files
nonprofittechynonprofittechy
authored
Merge pull request #567 from SuffolkLITLab/a11y_comments
Fix Accessibility Suggestions
2 parents a30dd15 + 259474e commit 2e6aebc

File tree

1 file changed

+46
-45
lines changed

1 file changed

+46
-45
lines changed

‎docs/coding_style/accessibility.md‎

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -13,51 +13,6 @@ Other parts of web accessibility involve writing the interview in a way that the
1313

1414
To help you find accessibility problems in your interview you can use the [WAVE browser extension](https://wave.webaim.org/extension/), or if you want to check accessibility of your interview automatically, you can use the [ALKiln testing framework](../components/ALKiln/automated_testing.mdx#accessibility).
1515

16-
## Accessibility testing tools
17-
18-
Testing your interview with assistive technology and accessibility tools is essential to ensure it works for all users. Here are some popular tools to help you test and validate the accessibility of your interviews:
19-
20-
### Screen readers
21-
22-
Screen readers are assistive technologies that read content aloud for users who are blind or have low vision. Testing with screen readers helps ensure your interview is usable for these users.
23-
24-
**Free screen readers:**
25-
* **[NVDA (NonVisual Desktop Access)](https://www.nvaccess.org/)** - Free, open-source screen reader for Windows. Widely used and regularly updated.
26-
* **[VoiceOver](https://www.apple.com/accessibility/vision/)** - Built into macOS and iOS devices. Activate with Command+F5 on Mac.
27-
* **[Orca](https://help.gnome.org/users/orca/stable/)** - Open-source screen reader for Linux systems.
28-
* **[ChromeVox](https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn)** - Chrome extension screen reader, useful for quick testing.
29-
30-
**Commercial screen readers:**
31-
* **[JAWS (Job Access With Speech)](https://www.freedomscientific.com/products/software/jaws/)** - Popular commercial screen reader for Windows with advanced features.
32-
* **[Dragon NaturallySpeaking](https://www.nuance.com/dragon.html)** - Voice recognition software that can be used alongside screen readers.
33-
34-
### Browser accessibility checkers
35-
36-
These tools can automatically scan your interview pages for accessibility issues:
37-
38-
* **[WAVE Web Accessibility Evaluator](https://wave.webaim.org/extension/)** - Browser extension that highlights accessibility issues directly on the page.
39-
* **[axe DevTools](https://www.deque.com/axe/devtools/)** - Browser extension for Chrome, Firefox, and Edge that integrates with developer tools.
40-
* **[Lighthouse](https://developer.chrome.com/docs/lighthouse/)** - Built into Chrome DevTools, includes accessibility auditing alongside performance testing.
41-
* **[Accessibility Insights](https://accessibilityinsights.io/)** - Microsoft's accessibility testing tools for web and Windows applications.
42-
43-
### Manual testing tools
44-
45-
* **[Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/)** - Desktop application for testing color contrast ratios.
46-
* **[Accessibility bookmarklets](https://accessibility-bookmarklets.org/)** - Collection of browser bookmarklets for quick accessibility checks.
47-
* **[Web Accessibility Toolbar](https://www.tpgi.com/web-accessibility-toolbar/)** - Internet Explorer and Firefox toolbar with accessibility testing features.
48-
49-
### Mobile accessibility testing
50-
51-
* **[TalkBack](https://support.google.com/accessibility/android/answer/6283677)** - Android's built-in screen reader.
52-
* **[Switch Access](https://support.google.com/accessibility/android/answer/6122836)** - Android feature for users with motor disabilities.
53-
* **[Voice Control](https://support.apple.com/en-us/HT210417)** - iOS voice navigation feature.
54-
55-
### Automated testing integration
56-
57-
* **[ALKiln](../components/ALKiln/automated_testing.mdx#accessibility)** - Assembly Line's testing framework with built-in accessibility testing using aXe-core.
58-
* **[Pa11y](https://pa11y.org/)** - Command-line accessibility testing tool that can be integrated into CI/CD pipelines.
59-
* **[aXe-core](https://github.com/dequelabs/axe-core)** - Open-source accessibility testing engine used by many tools.
60-
6116
## Use colors that contrast strongly with their backgrounds
6217

6318
One thing that you have control over in your interviews is your interview "branding", including fonts, styles, and importantly, colors. Making sure the text colors and background colors that you choose have high enough contrast is important to both low-vision and sighted users. Web accessibility standards like WCAG 2 define the **minimum** proper color contrast between an element and it's background color as 4.5:1. For larger text like headings, the minimum is 3:1.
@@ -141,3 +96,49 @@ Comboboxes, as implemented in docassemble, have [several usability problems](htt
14196
```
14297

14398
* if the combo box suggestions are validated by the interview, add some some of those suggestions into examples on the page (which makes them easier to discover for some users) and turn the field into a text input where the validation errors are descriptive.
99+
100+
## Accessibility testing tools
101+
102+
You should test your interview with assistive technology as much as you can! The best way to improve your interviews for assistive technology users is by actually experiencing them yourself.
103+
Here are some common tools to help you test and validate the accessibility of your interviews:
104+
105+
### Screen readers
106+
107+
Screen readers are assistive technologies that read content aloud for users who are blind or have low vision. Each of these screen readers behaves differently, so test with as many of them as
108+
you can.
109+
110+
It's important to note that you shouldn't rewrite your content based on how it sounds in the screen reader. When using a screen reader, some words and acronyms will be pronounced differently than you might expect. This is fine; screen reader users are used to these differences. For more discussion here, see [Adrian Roselli's post about this](https://adrianroselli.com/2023/04/dont-override-screen-reader-pronunciation.html).
111+
112+
**Free screen readers:**
113+
* **[NVDA (NonVisual Desktop Access)](https://www.nvaccess.org/)** - Free, open-source screen reader for Windows. Widely used and regularly updated.
114+
* **[VoiceOver](https://www.apple.com/accessibility/vision/)** - Built into macOS and iOS devices. Activate with Command+F5 on Mac.
115+
* **[Orca](https://help.gnome.org/users/orca/stable/)** - Open-source screen reader for Linux systems.
116+
117+
**Commercial screen readers:**
118+
* **[JAWS (Job Access With Speech)](https://www.freedomscientific.com/products/software/jaws/)** - The most popular screen reader for Windows with advanced features.
119+
120+
### Browser accessibility checkers
121+
122+
These tools can automatically scan your interview pages for accessibility issues:
123+
124+
* **[WAVE Web Accessibility Evaluator](https://wave.webaim.org/extension/)** - Browser extension that highlights accessibility issues directly on the page.
125+
* **[axe DevTools](https://www.deque.com/axe/devtools/)** - Browser extension for Chrome, Firefox, and Edge that integrates with developer tools.
126+
* **[Lighthouse](https://developer.chrome.com/docs/lighthouse/)** - Built into Chrome DevTools, includes accessibility auditing alongside performance testing.
127+
* **[Accessibility Insights](https://accessibilityinsights.io/)** - Microsoft's accessibility testing tools for web and Windows applications.
128+
129+
### Manual testing tools
130+
131+
* **[Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/)** - Desktop application for testing color contrast ratios.
132+
* **[Accessibility bookmarklets](https://accessibility-bookmarklets.org/)** - Collection of browser bookmarklets for quick accessibility checks.
133+
134+
### Mobile accessibility testing
135+
136+
* **[TalkBack](https://support.google.com/accessibility/android/answer/6283677)** - Android's built-in screen reader.
137+
* **[Switch Access](https://support.google.com/accessibility/android/answer/6122836)** - Android feature for users with motor disabilities.
138+
* **[VoiceOver](https://support.apple.com/guide/iphone/turn-on-and-practice-voiceover-iph3e2e415f/ios)** - iOS's built-in screen reader.
139+
140+
### Automated testing integration
141+
142+
* **[ALKiln](../components/ALKiln/automated_testing.mdx#accessibility)** - Assembly Line's testing framework with built-in accessibility testing using aXe-core.
143+
* **[aXe-core](https://github.com/dequelabs/axe-core)** - Open-source accessibility testing engine used by many tools.
144+
* **[Pa11y](https://pa11y.org/)** - Command-line accessibility testing tool that can be integrated into CI/CD pipelines.

0 commit comments

Comments
 (0)