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


Author: matuzo
Views Total: 242 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>

See also  Create Simple Tooltips For DOM Elements Using Pure CSS/CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *