Markdown Accessibility Github Action
Tags: githubhack23
Published: 2023-05-22 14:59:39

## What I built 

I built a GitHub action called "Markdown Accessibility" that improves the accessibility of Markdown files in a repository by automatically adding alternative text to images that do not have it.

### Category Submission

Maintainer Must-Haves

### App Link

Published on GitHub Marketplace: https://github.com/marketplace/actions/markdown-accessibility

### Screenshots 

Here is a workflow in a sample repo where the alt text checker in this GitHub action checks for files that have images with missing alt text.

![Screenshot of workflow showing the alt text checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzapsbfbusq6eq670p0c.png)

Here is the commit made by this GitHub action when included in the workflow showing the insertion of alt text.

![Screenshot of commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbjmdapez69jlov20s87.png)

Here are the linting errors produced by the markdown-lint-cli2-action. Note: It does not fail the entire workflow.

![Screenshot of errors produced by markdownlint-cli2-action  action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akpy0uiumyccxk5nzip9.png)

### Description 

This action searches through all markdown files in all folders. If an image does not have an alt text, the action uses the [microsoft/git-base-coco](https://huggingface.co/microsoft/git-base-coco) model from HuggingFace to generate alt text. The end user can also create and use their [Azure Computer Vision](https://azure.microsoft.com/en-us/products/cognitive-services/vision-services) resource for alt text generation by providing their key and endpoint as repository secrets. When using the Azure Computer Vision Resource, they can also specify a language for alt text generation for this action in their workflow file. The alt text from both these ways will be inserted into the markdown file and a new commit on the user repo is created showing this change. 

It supports both PNG and JPEG image formats in HTML and Markdown styles. Additionally, the [markdownlint-cli2-action](https://github.com/DavidAnson/markdownlint-cli2-action) runs each time to lint all the markdown files and fix errors if possible.

### Link to Source Code 

{% github https://github.com/sam9111/markdown-accessibility-helper %}

### Permissive License 

This project is licensed under the [MIT License](https://github.com/sam9111/markdown-accessibility-helper/blob/main/LICENSE)

## Background (What made you decide to build this particular app? What inspired you?) 

People with limited eyesight or those who are surfing without visuals can better grasp the content of the image you're using if you provide other explanations. Although GitHub utilises the file name you upload as the alt element, it does not provide a person who cannot view the picture enough context. I chose to build this project because I strongly believe in the power of accessibility. I wanted to create a solution that could automatically enhance the accessibility of documentation in other projects.

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

I developed this project using Python and utilized libraries such as transformers and azure-cognitiveservices-vision-computervision. This hackathon opened me up to the world of CI/CD pipelines in GitHub. Learning how GitHub Actions work and how to modify files in another repository using this action was fun and it was indeed very challenging since I had to overcome my fear of making git errors!

### Additional Resources/Info

[Here](https://www.loom.com/share/8eda48ae676849959e4fc636f6879fc7) is a video demo of my solution!