This is an incomplete, unapproved draft. The current draft is at
wai-media-guide.netlify.com/
Web Accessibility Tutorials
Guidance on how to create websites that meet WCAG
Jump to the navigation
Changelog
On this page
(skip)
May 2017
Overall changes:
New Publications: Page Structure, Menus Tutorial, and Carousels Tutorial
Minor Updates: Images, Forms, and Tables Tutorial
March 2015
September 2014
SHARE
Link to this section:
Shortcut to copy the link:
ctrl
+
C
or
⌘
C
E-mail a link to this section
Close
May 2017
SHARE
Link to this section:
Shortcut to copy the link:
ctrl
+
C
or
⌘
C
E-mail a link to this section
Close
Overall changes:
Introducing cross-links to other documents
Making demos easier to discover
Using a new, easier to read font
SHARE
Link to this section:
Shortcut to copy the link:
ctrl
+
C
or
⌘
C
E-mail a link to this section
Close
New Publications: Page Structure, Menus Tutorial, and Carousels Tutorial
Substantive clarification and simplification of the language from the previously published draft
Page Structure:
Vastly expanded page structure tutorial
Rename “Page Sections” to “Page Regions” to clarify terminology, added example images
Add a “Labeling Regions” page
Clarify the headings page, including a better description of ranks and example images for different uses of headings.
Move “articles” and “sections” from the “Page Sections” page to the “Content Structure” page
Clarify and expand on the ordered, unordered, and description lists
Remove “Styling” and “In-page Navigation” pages to focus the tutorial
Add an example that shows all techniques used
Menus:
Clearer language and structure on the structure page
Complete overhaul of the styling page to focus on menu identification and interaction
Clarify structure of the fly-out menus page
Application menus: Move code and example to separate page, clarified ARIA information
Remove the multiple ways page to focus the tutorial
Carousels:
Moved styling considerations to one central new styling page
Updated structure of the functionality page, including new content for announcing the current carousel item and focus management
Updated structure and more focus on the animations page
Moved the working example and the full code examples to their own pages
SHARE
Link to this section:
Shortcut to copy the link:
ctrl
+
C
or
⌘
C
E-mail a link to this section
Close
Minor Updates: Images, Forms, and Tables Tutorial
Several minor editorial changes
Images Tutorial:
Add new description to the decision tree (Show differences)
Forms Tutorial:
Use color #767676 instead of #777 for placeholders (Show differences)
Forms Tutorial:
Emphasize explicit labels, add aria-labelledby example to labels page (Show differences)
Forms Tutorial:
Add information about focus management when an error occurs (Show differences)
SHARE
Link to this section:
Shortcut to copy the link:
ctrl
+
C
or
⌘
C
E-mail a link to this section
Close
March 2015
Updates
Images Tutorial
Forms Tutorial
Tables Tutorial
Draft Publication
Page Structure Tutorial
Menus Tutorial
Carousels Tutorial
SHARE
Link to this section:
Shortcut to copy the link:
ctrl
+
C
or
⌘
C
E-mail a link to this section
Close
September 2014
First Publication:
Images Tutorial
Forms Tutorial
Tables Tutorial
All Tutorials
Accessible Media
review-draft
BESbswy
BESbswy
BESbswy
BESbswy
BESbswy
BESbswy
BESbswy
BESbswy
BESbswy
BESbswy
BESbswy
BESbswy