Bakh Fix Demo

There are several tools to detect inaccessibility (audit), but we wanted to create the first one that makes accessibility happen!

Auto Bakh Fix automatically generates, saves, and adds the missing code to your site to make it accessible. The tool currently focuses on the 6 most frequent, impactful, and often easy-to-fix accessibility errors. 96.5% of all errors detected fall into these six categories. (Ouvre un nouvel onglet)

This works in 3 steps:

  1. Your site is automatically audited
  2. A pedagogical form allows you to enter the correct information
  3. We generate the code

You can save the generated code, create the corresponding js file, and add it to your site to make it accessible (in compliance with standards), all for free. Then contact our experts and our community of people with disabilities (paid testers) to go even further (human validation, total compliance, complex cases).

To test the result directly on your browser, save the result and then reload the page.

Once you have installed Auto Bakh Fix (by adding it to your bookmars or via a local Chrome plugin), go to the site you want to make accessible. Launch the tool and you will see a form added at the bottom of the site to guide you in making it accessible.

Test with Chrome plugin (dev)

  1. Download the zip file containing the extension (Open a new tab). Make sure to save it to a location on your computer where you can easily find it.
  2. Extract the contents of the zip file. You should see a folder containing the extension’s files, including a manifest.json file.
  3. Open Google Chrome and navigate to the menu button (three dots in the top right corner).
  4. Select « More tools » and then « Extensions » from the dropdown menu.
  5. Turn on the « Developer mode » toggle in the top right corner of the Extensions page.
  6. Click the « Load unpacked » button in the top left corner of the Extensions page.
  7. Navigate to the folder containing the extension’s files (the one you extracted from the zip file) and select it.
  8. Click « Open » to install the extension.
  9. The extension should now appear in the list of installed extensions on the Extensions page.
  10. Click on the extension icon on the top-right corner of the Chrome browser window. This will open the extension’s popup.
  11. Check « Audit » to enable the automatic audit function and « BakhFix » to enable the generated code application on the page

Test with bookmark

Auto Bakh Fix

Add the above link on your bookmarks (by drag and dropping it to the bookmarks bar for example), then use bookmark to test on this page or another. Note that after saving your inputs, you will need to refresh the page and relaunch the bookmark to see the results.

Understanding the correction form

  • Alt – Relevant alternative text for this image (text that provides the same information to people who cannot see the image)
  • Element – Selector for the component (tag)
  • View element – adds focus, a blue outline to the relevant element, making it easy to locate.
  • Apply to all checkbox – To apply the fix on all the elements corresponding to the selector (for example if the selector pur in « Element » is « img.decorative » and the alt empty, it’ll add an empty alt to all the images with the « decorative » class instead of just the first one found).
  • Add/Edit attribute – This is for components that lack one or multiple attributes to be accessible. It could be an untitled button or link, which violates accessibility guidelines, or an unlabeled form field. To help you identify the issue, you’ll receive a description of the type of error, the name of the element (attribute) that needs to be changed, and the value that should be provided to make it accessible.
  • Save button – This button allows you to save the generated fix code locally. You can then refresh the page to execute the fix.)
  • Save and Download Code button – This button allows you to integrate the generated code into your website to make it more accessible.

The absence of a DOCTYPE declaration is one of the six most common errors. Unlike the other errors that can be fixed with Javascript code, this one must be corrected manually and directly in your HTML code.

Fortunately, it’s very easy to fix by adding the following code at the top of your HTML page:

<!DOCTYPE html>

Here’s an example of the expected result after adding this declaration:

<!DOCTYPE html>
<html>
<head>

Test Sample

Here’s some examples of website where you can test the Auto Bakh Fix tool