Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/khiga8/github-a11y

Browser extension that encourages accessibility awareness while using GitHub
https://github.com/khiga8/github-a11y

a11y accessibility accessibility-checker browser-extension chrome-extension github markdown

Last synced: 5 days ago
JSON representation

Browser extension that encourages accessibility awareness while using GitHub

Host: GitHub
URL: https://github.com/khiga8/github-a11y
Owner: khiga8
Created: 2022-02-11T05:46:45.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2023-08-23T21:33:17.000Z (about 1 year ago)
Last Synced: 2024-04-13T16:14:29.959Z (7 months ago)
Topics: a11y, accessibility, accessibility-checker, browser-extension, chrome-extension, github, markdown
Language: JavaScript
Homepage:
Size: 200 KB
Stars: 21
Watchers: 1
Forks: 5
Open Issues: 9
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# github-a11y

This is a browser extension that runs a simple JavaScript snippet on github.com domain and aims to encourage accessibility mindfulness while navigating GitHub. Users interact with GitHub predominantly through the markdown editor. The markdown editor allows users to set headings and share images, both of which require care to ensure accessibility.

## Setup

### Chrome

1. Clone or download this repo.
2. Navigate to `chrome://extensions/`.
3. Flip on "Developer Mode" in the upper right-hand corner.
4. Select "Load unpacked".
5. Choose this unzipped repo folder.
6. Navigate to github.com.
7. **Optional but recommended**: Set custom styles to your preference. Learn
more in the [Customization note](#customization-note).

### Firefox

** Note: Firefox cannot load this extension until support for Manifest V3 and
background services is released. See
https://github.com/mozilla/web-ext/issues/2379#issuecomment-1174962312 **

1. Clone or download this repo. Make sure to extract any compressed files to the directory structure of this project.
2. Navigate to `about:debugging#/runtime/this-firefox`.
3. Select `Load Temporary Add-on...`.
4. Choose a file in the repository directory.
5. Navigate to github.com.
6. **Optional but recommended**: Set custom styles to your preference. Learn more in the [Customization note](#customization-note).

## Features

This extension will only run on GitHub domain and does the following on all markdown bodies on GitHub:

- Creates a text overlay over all images with the alt text. This includes Pull Requests, Issues, Repo READMEs, and Discussions.
- If an image is missing an alt text, it will appear with a red border.
- If an image has alt text but is non-descriptive like `image` or the default macOS screenshot name, it will appear with a red border.
- **If an image has an empty string alt like `""`, it will also appear with a red border**.
Typically, an empty string alt indicates that an image is decorative and should be hidden. However, on GitHub, all markdown images are rendered within a link element. Therefore, we recommend that all images in GitHub markdown have an alt text provided, or else link will be announced without a name,

Example screenshots of two images that have been posted on a GitHub issue, each appearing with alt text overlay. The first has unhelpful alt text based on the filename, `Screen Shot 2022-02-10` while the second image has a more intentional alt text, `Screenshot of example select menu...`.

- Appends the heading level that is used after the heading text within markdown bodies. Heading levels are useful for conveying semantics for screen reader, and other assistive technology users, but they are not currently surfaced on GitHub. This extension makes the heading level more visually apparent.

Example screenshots of heading levels appended at end of heading text line inside a GitHub markdown, each represented by a different color

### Customization note

The styling I've set may not be suitable for all users. Feel free to customize these however you like when you download these files.

You can do this by modifying `styles.css`. There are CSS variables at the top which you may set to your preference. For example, you may choose to set a different color for each heading level or remove the border. If you'd prefer the headings to be positioned at the front, follow the notes in `contentScript.js`. Once changes are made, `Update` on `chrome://extensions/` so changes are reflected in the extension.

## Resources

### Image alt text

- [WebAIM: Alternative Text](https://webaim.org/techniques/alttext/)

### Heading levels

- [WAI: Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)
- [Medium: Headings for Visually Inclined](https://medium.com/@inkblotty/headings-for-the-visually-inclined-c537e87865f)

## Bug?

This extension may break if GitHub markup changes.
If you encounter a bug, please file a ticket. Contributions welcome.