Before You Start!
It's important to understand how other people make use of the web. If you don't have experience with a screen reader, try something simple, try the ChromeVox browser extension for Chrome.
Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
A11yGoat
What is A11yGoat
This is a site that has been made purposely inaccessible as a way to teach people about accessibility. Learn accessibility by doing.
A11y?
A11y is a numeronym! Cool word, right? It is a tag used for web accessibility in the same way i18n is for internationalization and l10n is localization. Popularized because “accessibility” takes up 10% of a tweet. It’s taking the first and last letters and telling you how many letters are in between. a + (ccessibilit == 11) + y I can’t tell you definitively how it’s pronounced, because I don’t believe anyone has ever committed to something. I say “Alley”, but I don’t see why “Ally” wouldn’t be just as good. Try not to sweat it.
Goat?
This I’m borrowing from the WebGoat project, which is an open source project that provides a purposely insecure site to help teach web security. The “goat”, as they explain, comes from the word scapegoat. They’re intention is that “developers should not feel bad about knowing ___” … “so blame it on the ‘goat.” I don’t think I fully understand that sentiment, but since the inspiration came from WebGoat, A11yGoat made sense.
How to Run
You can view and use it freely on the github public site. Coding exercises are inline and completable in the static version there.
How to Contribute
-
As an accesisbility professional
Please feel free to browse the public site and if you have suggestions or can think of things to add, add them via the issue tracker
-
As a developer:
A11yGoat is built with Jekyll so that the code for the exercises is modularized and hopefully, easy to add to, without having to deal with any kind of backend. You can make an issue or pull request. We are still early in the project life, so if you’ve got a better way to do templating (that doesn’t involve a server side), or you think they layout would look better with something that effects all pages, please file an issue first so we can discuss.