Skip to content

Latest commit

 

History

History
133 lines (106 loc) · 5.54 KB

README.md

File metadata and controls

133 lines (106 loc) · 5.54 KB
Raw

Accessify

Accessify makes use of Accessibility Theme Builder SDK and WCAG Accessibility Guidelines to provide feedback to developers during development on areas where the product is failing to meet accessibility standards.

Project Structure

Code for this project can be found within the code folder.

The code/cli and code/vscode-extension folders contain the relevant code required to run Accessify as a Command Line Interface (CLI) and a Visual Studio Code (VSCode) Extension, repectively.

The code/sdk folder contains code for Accessify's Software Development Kit (SDK), which serves as the backbone of the Accessify tool. It validates the user's HTML based on specified rules and requirements.

Prerequisites

This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v

Installation

To use the Accessify tool, you have to first build the Accessify SDK. This can be achieved by following the steps below.

  1. Open the project folder
  2. Navigate to the hackproject/code/sdk folder.
  3. Run the following command to install the dependencies: 
    $ npm install
  4. Build the SDK by running the following command: 
    $ npm run build
    This will generate a build folder that will be used by both the CLI and the VSCode Extension.

Usage

Using the CLI

The following steps assume you have opened a UNIX-based terminal

  1. Open the project folder in your terminal.

  2. Navigate to the hackproject/code/cli folder.

  3. Run the following command to install the dependencies:

    $ npm install

  4. Set execution permission on the ./run.sh file by using the following command, allowing it to be run as a program.

    $ chmod +x ./run.sh

  5. Validate your required HTML file or entire directory based on specified options with their respective values using the following command.

    $ ./run.sh <path-to-file-or-directory> [options]

    options

     --css   # Specify path to a CSS file
 --validator # Specify what type of validation to use. Options: {contrast | typography | attribute | all} (default: all)
 --requirement   # Specify the type WCAG requirement to validate by {AA | AAA} (default: AA)

    examples

    • Validate ./static/index.html using the default options and no other CSS file. 
      $ ./run.sh ./static/index.html
    • Use the contrast validator for ./static/index.html using the ./static/style.css. 
      $ ./run.sh ./static/index.html --css ./static/style.css --validator contrast
    • Validate all HTML files in the ./static/ directory using the WCAG AAA Requirements. 
      $ ./run.sh ./static --requirement AAA

Using the VSCode Extension

The following steps assume you have already installed VSCode on your computer.

  1. Open an new VSCode window.

  2. Open the hackproject/code/vscode-extension folder in VSCode so that the .vscode folder is at the root of your VSCode workspace, as shown in the image below.
    vscode-extension-demo

  3. Right-click on the VSCode File Explorer and select Open in Integrated Terminal. This should open a terminal where you can run commands.
    vscode-extension-terminal

  4. Ensure that Accessify is compatible with your VSCode by doing the following.

    • Check your VSCode version.
    • Open the package.json file and verify that engines.vscode is set to ^your-vscode-version-or-lower. For example, if your VSCode version is 1.78.0, then engines.vscode should be set to ^1.78.0, ^1.77.0, ^1.73.0, or a lower version. You can find your VSCode version by running the following command in the terminal: 
      $ code --version

  5. Run the following command to install the dependencies:

    $ npm install

  6. Compile the VSCode Extension by running the following command:

    $ npm run compile

    At this point, please ensure that your folder structure looks like this:

    /
│   .eslintrc.json
│   .gitignore
│   .vscodeignore
│   CHANGELOG.md
│   package-lock.json
│   package.json
│   README.md
│   tsconfig.json
│   vsc-extension-quickstart.md
├───.vscode
├───node_modules
├───out
└───src

  7. Inside your VSCode editor, press F5. This will run the extension in a new Extension Development Host window, and you should see Accessify is now active! in your DEBUG CONSOLE.

  8. In the new Extension Development Host window, Press Ctrl+Shift+P to open the Command Palette.

  9. Type Accessify in the search box and select Accessify from the list of commands.

  10. If everything is set up correctly, your HTML file will be validated by Accessify. HTML elements in the current .html file with accessibility issues will be highlighted, and when you hover over them, you should see a tooltip with the issue. Here's an example image of how the output might look like:
    vscode-extension-demo