Using a Git Pre-Commit Hook with axe DevTools Linter

Link to Using a Git Pre-Commit Hook with axe DevTools Linter copied to clipboard
Free Trial

A Git pre-commit hook allows you to check files for accessibility concerns with axe DevTools Linter before they can be committed in Git.

Any time a user commits to Git with git commit the pre-commit hook will run and submit the code to a configured instance of axe DevTools Linter to be checked for accessibility issues.


Because the pre-commit hook requires axe DevTools Linter, you should check the installation guides for the server, Setting up the axe DevTools Linter and the Connector, Using axe DevTools Linter Connector.

The Hooks Directory

When you create a new repository, Git will create a .git/hooks directory that contains sample hooks. By naming a script pre-commit in that directory, you will cause that script to execute whenever someone tries to commit.

Example Linter Script

At the end of this section is an example script that you can use as a pre-commit script with Git. After you've copied it to the hooks directory, make sure the script is executable:

chmod +x pre-commit

The only line you should need to change in the script in the line that contains the hostname where your instance of axe DevTools Linter is running:

export AXE_LINTER_SERVER_URL=http://localhost

Less commonly, you might need to change the port used to communicate with the server:


The following is the example pre-commit script you can use with Git and the shared axe DevTools Linter SaaS server. To use this with the on-premises server, you need to change the AXE_LINTER_SERVER_URL and remove the --api-key parameter:

# axe DevTools Linter pre-commit
# This script will setup the environment variables needed for axe-linter-connector
# and execute axe-linter-connector. The output file will be reviewed and call back with exit codes:
## 0 - No Accessibility Defects
## 1 - axe DevTools Linter Detected Accessibility Defects
## 2 - Execution problem, or axe DevTools Linter unavailable.
echo "axe DevTools Linter Starting $(date)"
# Setup variables for axe DevTools Linter

if [[ -z "${AXE_LINTER_API_KEY}" ]]; then
   echo "AXE_LINTER_API_KEY must be set"
   exit 2
# Configure verbose output.
# Configure outfile: output in Generic Issue Import Format for in execution directory.
for i in $(git status --porcelain | sed s/^...//); do
   rm -f $OutFile
   shopt -s nocasematch;
   if [[ $i == *.html ]] || [[ $i == *.js ]] || [[ $i == *.jsx ]]|| [[ $i == *.ts ]]|| [[ $i == *.tsx ]]|| [[ $i == *.vue ]]|| [[ $i == *.htm ]]|| [[ $i == *.md ]]|| [[ $i == *.markdown ]];
      if $VerboseOutput; then
         echo "Accessibility check: file: $i"
      # execute axe DevTools Linter Connector
      axe-linter-connector -s $i -d . --api-key $AXE_LINTER_API_KEY --config ./axe-linter.yml --url $AXE_LINTER_SERVER_URL

      if [ ! -f "$OutFile" ];then
         echo "$OutFile Does Not Exist"
         exit 2
      elif cat "$OutFile" | grep -q "BUG"; then
         if $VerboseOutput; then
            cat $OutFile
         echo "**axe DevTools Linter Accessibility Issues Detected: $i"
         echo "No axe DevTools Linter Connector Issues Detected in: $i"
      if [ "$TempCode" != "0" ]; then
      rm $OutFile
if [ "$StatusCode" != "0" ]; then
   echo "Commit Failed due to Accessibility Issues"
exit $StatusCode