This repo has been developed as part of an in-person web accessibility workshop. This is the hands-on portion, developed to help teach the building blocks of web accessibility through the completion of mini-exercises. Each exercise exposes a new method for improving the usability of the demo site provided in this repo.
The demo site is not accessible in many ways. Through the completion of mini-exercises, workshop participants improve the accessibility of the demo site and work to debug issues and find solutions for common accessibility problems. The presentation slides provide more context, detailing the mini-exercises to be completed with code samples as guidance and additional resources for self-exploration.
Presentation slides are available at https://docs.google.com/presentation/d/1WToCHudhUgJsmPq0N11Nm0wDAYmAHkce50n812dD810.
All required files are included in the repo. This project utilizes jQuery, HTML5, and CSS.
- MAMP (Mac/Windows): mamp.info/en/downloads
- LAMP (Linux): ampps.com/lamp
- VoiceOver (Mac): preinstalled, no download required
- NVDA (Windows): nvaccess.org/download
- ORCA (Linux): pkgs.org/download/orca
Go to MAMP download page at mamp.info/en/downloads. Select the "MAMP & MAMP PRO" version you want to download (Mac version circled in red).
Once the download is complete, double-click the installer .pkg file to start the installation process.
If you haven't already, download or clone this project repo (option to download zip file circled in red).
If you downloaded the project as a zip file, unzip it.
Open MAMP application. On Mac, the application will be located inside a MAMP directory within the Applications directory.
Once MAMP is open, select the MAMP tab from the menu options and then select Preferences. This will open the Preferences window.
From the Preferences window, select the Web Server tab. From there, click on the "Select" button and locate the unzipped project folder. Select the project folder, click the "Select" button and then confirm your selection using the "Ok" button.
Once you're back on the main MAMP screen, select the "Start Servers" button. This will launch a new browser window pointing to localhost:8888/. If the browser window doesn't automatically open, use any browser and enter the URL localhost:8888/ to view the project.
Step-by-Step instructions available at https://documentation.mamp.info/en/MAMP-Windows/Installation/.
We're using AAMPS on Linux for this setup. An installation guide is available at http://www.ampps.com/LAMP. There's also a wiki available at https://ampps.com/wiki/Installing_AMPPS_on_Linux.
VoiceOver comes preinstalled on Mac. To activate VoiceOver:
- Open System Preferences,
- Select Accessibility,
- Select VoiceOver from the menu on the left (under Vision),
- Select "Enable VoiceOver"
Check out the WebAIM "Using VoiceOver to Evaluate Web Accessibility" guide available at https://webaim.org/articles/voiceover for tips on using VoiceOver.
A "Getting and Setting up NVDA guide" is available at https://www.nvaccess.org/files/nvda/documentation/userGuide.html?#GettingAndSettingUpNVDA.
Check out the WebAIM "Using NVDA to Evaluate Web Accessibility" guide available at https://webaim.org/articles/nvda/.
Orca provides a "Getting Started" guide at https://help.gnome.org/users/orca/stable/index.html.en.