DEV Community

Cover image for Markdown Accessibility Github Action
Samyuktha Ganeshkumar
Samyuktha Ganeshkumar

Posted on

Markdown Accessibility Github Action

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

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

Screenshot of commit

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

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 model from HuggingFace to generate alt text. The end user can also create and use their Azure Computer Vision 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 runs each time to lint all the markdown files and fix errors if possible.

Link to Source Code

Markdown Accessibility Helper

A GitHub action that helps improve the accessibility of Markdown files in your repository by automatically adding alternative text to images that do not have it.

Features

  • Automatically adds alternative text to images in all markdown files that do not have it.
  • Recursively searches through all markdown files in all folders.
  • Supports both PNG and JPEG image formats.
  • Using the Azure Computer Vision Resource, you can specify a language for alt text generation. Supported languages: en - English (Default), es - Spanish, ja - Japanese, pt - Portuguese, zh - Simplified Chinese.
  • The markdownlint-cli2-action runs each time to lint all the markdown files and fix errors if possible.

Usage

Action Permissions: This action requires read and write access to your repository to modify the markdown files. You can update the permissions for this action in the Actions tab of your repository settings under Workflows Permissions. This only…

Permissive License

This project is licensed under the MIT 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 is a video demo of my solution!

Top comments (0)