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
Focus Styles
Color Blindness
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
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
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.
Exercise Time
Try to generate a report
by using WCAG-EM reporting tool
Further Resources
a11yresources
A growing list of accessibility tools.
aXe
For automated accessibility testing
CodeSniffer
Bookmarkets to test web pages