search

a11yproject / a11yproject.com

The A11Y Project is a community-driven effort to make digital accessibility easier.
https://a11yproject.com
Apache License 2.0
3.76k stars 557 forks source link
a11y accessibility eleventy inclusive-design user-experience

readme

A11Y.

The A11Y Project

The Accessibility (A11Y) Project is an Open-source, community-driven effort to make digital accessibility easier.

Contributing

You can learn about helping this project by reading our Code of Conduct, Contributor documentation, and Content Style Guide. Please familiarize yourself with them before submitting content.

This README is focused on the technical side of the project. If you are interested in contributing information like Posts or Resources, please refer to our Contributing Guidelines.

Development

Technology

The A11Y Project uses Eleventy to manage its content. Eleventy relies on Markdown, Sass, Nunjucks, and JSON to function.

It may be helpful to familiarize yourself with these technologies, depending on what you want to do. For more information, check out our Contributor documentation.

Requirements

You'll need access to the following programs and technology in order to get the website running on your computer to work on:

  1. A command line application such as Terminal.
    • If you want to learn more about working in the command line, Wes Bos offers a great free course.
    • If you are using Windows, Hyper is a good, free command-line application you can download, install, and run.
  2. Git version control and a GitHub account.
    • You can check to see if Git is already installed on your computer by typing git --version into your command line application. If it is installed it will list the currently installed version (e.g. git version 2.18.0).
    • If you prefer to use a GUI to work with version control, GitHub offers a free desktop app.
  3. Node.js, a programming environment powered by JavaScript.
    • You can check to see if Node.js is already installed on your computer by typing node -v into your command line application. If it is installed it will list the currently installed version (e.g. v16.4.0). The A11Y Project requires a minimum version of 16.0.0.
    • It may also be helpful to use a program such as nvm to help manage your Node.js versions. This will ensure that the version of Node.js your computer uses to run various things won't conflict with an updated version. For Windows users, you could use coreybutler/nvm-windows.

Installation

Once you have met the prerequisites, follow these steps to install the website on your computer:

  1. Clone this repository by entering this command into your command line application: git clone https://github.com/a11yproject/a11yproject.com.git. It will create a version-controlled copy of the website in the directory you entered the command in.
  2. Navigate into the project's root directory by typing cd a11yproject.com in your command line application.
  3. Install the project's Node.js modules by typing npm install into your command line application. A list of these modules should be displayed after they are downloaded and installed.

Running the website

After cloning and installing project Node.js modules, you will need to tell Node.js to compile the project and turn it into a website. To do this:

Your command line application will then display some information about Eleventy, including a line that starts with Local:. You can copy the URL it points to (it should read something like http://localhost:3000) and paste it into a browser tab. This will load a local copy of the website that you can interact with to preview your changes.

You can also use the External URL to preview the local copy on another device connected to the same network, which helps you check to see how the site looks and functions on things like smartphones. This is done via Browsersync.

Updating the website

Saving project files will make Node.js regenerate the website to reflect the changes you made. Your command line application will display some new messaging to reflect this, including any errors you might accidentally make. Don't worry! Since the site uses version control, you're not in danger of seriously breaking anything. If you fix the error, Node.js should continue to run.

Make sure you edit the files in the src/ subdirectory. Any edits made in the dist subdirectory will be overwritten by the next change to any file in src/ and all your hard work will be lost!

Quitting

You can tell Node.js to stop running by pressing the Control and C keys at the same time in your command line application, or by closing the command line application window or tab.

Code Tour

If you use Visual Studio Code as your code editor, you can take an introductory tour of the repository via the CodeTour extension.

Troubleshooting

Please refer to our Troubleshooting documentation for help with issues running the site.