Page Accessibility Testing In Pure CSS – a11y-tests.css

Category: CSS & CSS3 | October 30, 2019
Author: matuzo
Views Total: 121 views
Official Page: Go to website
Last Update: October 30, 2019
License: MIT

Preview:

Page Accessibility Testing In Pure CSS – a11y-tests.css

Description:

a11y-tests.css is a pure CSS library to test the page accessibility by toggling color, blur, animation, large text, no mouse classes on the <html> element.

How to use it:

1. Download and import the a11y-tests.css into the webpage.

<link rel="stylesheet" href="a11y-tests.css" />

2. Toggle the following CSS classes to test the accessibility on the webpage.

  • .a11y-tests-grayscale: text color
  • .a11y-tests-blur: blur effect
  • .a11y-tests-no-mouse: no cursor
  • .a11y-tests-large-text: large text
  • .a11y-tests-no-animation: no animation
<html class="class here">
  ...
</html>

You Might Be Interested In:


Leave a Reply