https://github.com/intergalacticspacehighway/accessibility-testing-utils

https://github.com/intergalacticspacehighway/accessibility-testing-utils

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/intergalacticspacehighway/accessibility-testing-utils
• Owner: intergalacticspacehighway
• Created: 2020-12-21T04:02:12.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-22T14:07:57.000Z (almost 4 years ago)
• Last Synced: 2024-08-10T07:27:08.142Z (3 months ago)
• Language: JavaScript
• Size: 366 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
## Accessibility testing utils

### Installation

```

yarn add accessibility-testing-utils -D

OR

npm install accessibility-testing-utils  --save-dev

```

### 1. Blur the site to test tab navigation and accessibility role/label/state.

   ![](repo-assets/blur.png)

- This will disable pointer events, forcing you to use tabs so you can test the labels, state, values etc with a VoiceOver just like a real person.

- Credits

  http://udacity.github.io/ud891/lesson3-semantics-built-in/03-experience-screen-reader/

#### Usage

```

import {blurElementStyle} from "accessibility-testing-utils"

{children}

```


### 2. Testing alt attribute in images. 

   ![](repo-assets/img-alt.png)

- This will make `src` of all the images an invalid string.

- Even though tools like Lighthouse makes sure image has a valid alt attribute, but it's better to test it manually.

- [Watch this](https://www.youtube.com/watch?v=XCa6U1BllCY) to know why this is important.

- PS - Hello world image is a bad alt text. (Image text is redundant here)

### Usage

```

import { testImageAltAttribute } from 'accessibility-testing-utils';

 React.useEffect(()=>{

    testImageAltAttribute()

  },[])

```