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

Web Accessibility Lesson 5

By makzan

Web Accessibility Lesson 5

  • 543