Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here


W3C WAI’s Web Accessibility Tutorials

Subscribe to updates I use wai-tutorials

Statistics on wai-tutorials

Number of watchers on Github 119
Number of open issues 39
Average time to close an issue about 1 month
Main language CSS
Average time to merge a PR 6 days
Open pull requests 32+
Closed pull requests 18+
Last commit almost 2 years ago
Repo Created over 5 years ago
Repo Last Updated over 1 year ago
Size 15.6 MB
Homepage https://www.w3.or...
Organization / Authorw3c
Page Updated
Do you use wai-tutorials? Leave a review!
View open issues (39)
View wai-tutorials activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating wai-tutorials for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

WAI Tutorials

This is the repository for the WAI tutorials, see current draft.

You can find the current draft state of the document on this Github Pages site

How to contribute

Basically, editing files works like a Wiki.

Browse to the file using the Github Page and click on the Fork and Edit button of the page. This will bring you to the Github detail page of that file where you can start editing the file using the edit button (pen icon) in the top right corner, if youre logged into Github. Heres an example in the Images Tutorial.

You can start editing right away. We use the standard Markdown syntax. If you get the following note, this is expected behavior:

You are editing a file in a project you do not have write access to. We are forking this project for you (if one does not yet exist) to write your proposed changes to. Submitting a change to this file will write it to a new branch in your fork so you can send a pull request.

It is technical for All right, make your edits, we make sure you can send them in as a proposal!

Dont forget to add some descriptive text at the bottom that comments your change. Try to be concise. Klick the Propose this change button to continue. Then you get another comment field, you can write down your motivation for the change here. Once you click Send pull request, the editor will be notified of your proposal and may adopt it.

Note that the changes are not immediately reflected on any page. If you want to see your changes in HTML that way is more technical and is described briefly in the following part of the document. But there is a preview button in the editor that gives you a fairly good example of how the rendered HTML will look like.

wai-tutorials open issues Ask a question     (View All Issues)
  • almost 3 years Changes to list under "Why is this important?"
  • about 3 years Add links/information about newer technologies to the tutorials
  • about 3 years Menubar example: Only call preventDefault for keys that were consumed
  • about 3 years Menu Styling page: Consider using aria-current
  • about 3 years Menubar example: Add a separator
  • about 3 years Menubar example: Please add at least one submenu
  • about 3 years Add aria-orientation="horizontal" to the menu example
  • about 3 years Menu example: Implement proper tab/shift-tab behavior
  • about 3 years Menubar example: why is "menubar" on div and not ul?
  • about 3 years Menubar example: Delete aria-label="functions" in role="menu" ul?
  • over 3 years Add Open Graph Metadata to make sharing more beautiful.
  • over 3 years clarify `aria-labelledby` use/example for a search field
  • over 3 years We should consider qualifying the use of Title
  • almost 4 years Add usage clarification for "A not on hiding elements" in labels tutorial
  • almost 4 years Summary attribute
  • almost 4 years Required Fields 2 Problems
  • about 4 years Translate the document
  • over 4 years Let's drop the recommendation of scope
  • over 4 years Labels tutorial application
  • over 4 years <tfoot> example
  • over 4 years Add more detailed SVG examples
wai-tutorials open pull requests (View All Pulls)
  • Phone -> Telephone
  • Menus flyout simplified
  • Simplify and clarify the menu structure page
  • More precise concepts page
  • Wording application menu
  • Flyout wording/tersification
  • Menu styling
  • Update
  • Carousel Animation page
  • Restructuring/Slimming down carousel functionality page
  • Simplify carousel tutorial
  • Update
  • Update
  • Simplify carousel tutorial, mostly structure page
  • Update
  • Update
  • Update
  • Update
  • Add “(redundant)” to misleading functional image link
  • Added explanatory link to WAI-ARIA
  • Carousels 2016 updates
  • Menus 2016 updates
  • Page Structure 2016 updates
  • Image Maps: Fix full code example
  • Changes to Menus Approach 2
  • Clarify table headers/id example
  • Responsive Design Page Regions
  • Menus for Responsive Design
  • Form fields for Mobile
  • Carousels Styling for Mobile
  • Proposed mobile-friendly tip for images tutorial
  • Table tips: Add table headers tips for mobile
wai-tutorials list of languages used
Other projects in CSS