https://github.com/madalynrose/plexiglass

Libraries that remove mouse feedback to encourage keyboard and screen reader testing
https://github.com/madalynrose/plexiglass

Last synced: about 2 months ago
JSON representation

Libraries that remove mouse feedback to encourage keyboard and screen reader testing

• Host: GitHub
• URL: https://github.com/madalynrose/plexiglass
• Owner: madalynrose
• Created: 2020-01-08T17:21:12.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-05T04:58:23.000Z (over 1 year ago)
• Last Synced: 2024-07-26T06:02:52.879Z (about 2 months ago)
• Language: JavaScript
• Size: 1.1 MB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# plexiglass

![plexiglass icon](https://raw.githubusercontent.com/madalynrose/plexiglass/master/plexiglass-150.png)

This is a monorepo for libraries that remove mouse feedback to encourage keyboard and screen reader testing. 

By installing plexiglass on a page, users can still see the page without being able to "touch" it with a mouse.

Additionally, that plexiglass can be tinted opaque, further restricting the way the user can interact with the page.

It's a bit like manually testing your own code: if you know how it's meant to behave, your own interactions with it will match the patterns your code expects; visually seeing how far away an element is on the page or noting visual landmarks will change the way you navigate with the keyboard and will influence your experience of how long or frustrating a task is.

This is accomplished by:

* removing pointer events

* adding a black overlay to the page

With pointer events taken away, users can challenge themselves to navigate pages using solely the keyboard.

With a black overlay, users will have to rely on the keyboard and a screen reader to use the page.

### mozilla-plexiglass

This is a Mozilla addon that allows you to quickly toggle plexiglass options (pointer events and tint). It is recommended that you use this addon's tint option only on Windows, as VoiceOver does not play well with Firefox.

### gatsby-plugin-plexiglass

This is a Gatsby plugin that includes @marcysutton's [no-mouse-days](https://github.com/marcysutton/no-mouse-days) library. It allows you to choose a day to disable your mouse feedback and adds the option to add the opaque overlay in your `gatsby-config` file. These options will only be applied in development.