A11y
Workshop
Rhiana Heppenstall
3P Learning
Hands on accessibility testing in your browser!
About Me
Accessibilty Rhiana
〞
We don't have time to make things accessible
– Your boss probably
Make things accessible
1.
???
2.
Profit!
3.
Tools & Tests
Colour Blindness
2. Test for colour blindness and readability
Did you find any issues?
1. Bring up a website
3. Using the Wave tool to check your website structure
4. Try to operate your website using only the keyboard
5. Check your HTML for errors
Colour Blindness
| Type | Males | Females |
|---|---|---|
| Red/Green | 8% | 0.5% |
| Blue/Yellow | 0.01% | 0.01% |
| Monochrome | 0.003% | 0.003% |
2. Test for colour blindness and readability
Did you find any issues?
1. Bring up a website
3. Using the Wave tool to check your website structure
4. Try to operate your website using only the keyboard
5. Check your HTML for errors
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius, mi at rhoncus facilisis, nisi odio vehicula tortor, mauris ante sit amet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius, mi at rhoncus facilisis, nisi odio vehicula tortor, mauris ante sit amet mauris.
Text Readability
| Type | AA | AAA |
|---|---|---|
| Small Text | 4.5:1 | 7:1 |
| Large Text | 3:1 | 4.5:1 |
| Graphics | 3:1 | 3:1 |
Colour Contrast Ratios
2. Test for colour blindness and readability
Did you find any issues?
1. Bring up a website
3. Using the Wave tool to check your website structure
4. Try to operate your website using only the keyboard
5. Check your HTML for errors
Images or SVG's
| Type | alt text |
|---|---|
| Image | Precise description not relying on sight |
| Image of text | the text or don't |
| Decorative | empty string |
| Image inside a link | link text |
2. Test for colour blindness and readability
Did you find any issues?
1. Bring up a website
3. Using the Wave tool to check your website structure
4. Try to operate your website using only the keyboard
5. Check your HTML for errors
Headings & Links
| Type | Guidelines |
|---|---|
| Headings | One lvl 1 Step up or down by 1 |
| Links | Unique Stand alone context |
| Landmarks | Header, Main, Footer, Nav |
2. Test for colour blindness and readability
Did you find any issues?
1. Bring up a website
3. Using the Wave tool to check your website structure
4. Try to operate your website using only the keyboard
5. Check your HTML for errors
<a href="#">
Read more
<span class="sr-only">
about what Digital Access can do
</span>
</a>
Keyboard
| Use | Guidelines |
|---|---|
| Tab | Can tab to everything in order |
| Focus | Can see every tab |
| Skip | Skip to content |
2. Test for colour blindness and readability
Did you find any issues?
1. Bring up a website
3. Using the Wave tool to check your website structure
4. Try to operate your website using only the keyboard
5. Check your HTML for errors
a:hover,
a:focus {
...
}
HTML
| Guidelines |
|---|
| In order |
| No errors |
| Semantic elements |
2. Test for colour blindness and readability
Did you find any issues?
1. Bring up a website
3. Using the Wave tool to check your website structure
4. Try to operate your website using only the keyboard
5. Check your HTML for errors
Congrats!
You've just tested your site for accessibility!
Where to now?
| Company | Reference |
|---|---|
| University of SA | Professional Certificate in Web Accessibility |
| A11y Camp Conferences |
a11ybytes a11yBytes YouTube |