Web accessibility and styles
Web Accessibility Lesson 5
Color Contrast
https://contrast-ratio.com
Firefox Accessibilty Dev Tool
Turn ON gfx.webrender.all
Remember to
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7775234/Screenshot_2020-09-30_at_1.53.44_AM.png)
Focus Styles
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7731282/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7731284/image.png)
Color Blindness
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7775235/Screenshot_2020-09-30_at_1.54.41_AM.png)
Font Size
Accessible Font Size
Variable unit
- use em, rem, %
- avoid setting root/body font-size
Responsive Font Size
by using clamp
Dynamic Type
for iOS
font: -apple-system-body
font: -apple-system-headline
font: -apple-system-subheadline
font: -apple-system-caption1
font: -apple-system-caption2
font: -apple-system-footnote
font: -apple-system-short-body
font: -apple-system-short-headline
font: -apple-system-short-subheadline
font: -apple-system-short-caption1
font: -apple-system-short-footnote
font: -apple-system-tall-body
Test in your device
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7775323/image.png)
More CSS
prefers-color-scheme
body {
background: white;
color: #222;
}
a,a:visited {
color: blue;
}
@media (prefers-color-scheme: dark) {
body {
background: black;
color: white;
}
a,a:visited {
color: yellow;
}
}
prefers-reduced-motion
Writing Accessibility Report
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7774809/Screenshot_2020-09-29_at_7.10.34_PM.png)
However, in the majority of situations using this methodology alone, without additional quality assurance measures, does not directly result in WCAG 2.0 conformance claims.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7775130/Screenshot_2020-09-29_at_11.33.40_PM.png)
Exercise Time
Try to generate a report
by using WCAG-EM reporting tool
Further Resources
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1257713/images/7775141/Screenshot_2020-09-30_at_1.08.22_AM.png)
a11yresources
A growing list of accessibility tools.
aXe
For automated accessibility testing
CodeSniffer
Bookmarkets to test web pages
Web Accessibility Lesson 5
By makzan
Web Accessibility Lesson 5
- 580