Beim A-Tag 2015 habe ich die neuen WCAG-2.0-Tools vorgestellt, einen Blick auf die Taskforces geworfen und die ATAG-Spezifikation angekündigt.

1. Neue Infos rund um WCAG 2.0Neue Infos rund um WCAG 2.0Neue Infos rund um WCAG 2.0Neue Infos rund um WCAG 2.0
Eric Eggert, W3C/WAI, @yatil, w3.org/People/yatil

2. Web AccessibilityWeb Accessibility
TutorialsTutorials

3. Seitenstruktur (Entwurf)
Menüs (Entwurf)
Bilder
Tabellen
Formulare
Karussells (Entwurf)

4. KonzepteKonzepte
Why is this important?
Related WCAG 2.0
resources
Technologies covered in this
Tutorial:
CSS Fonts
CSS Transforms HTML5
MathML WAI-ARIA
Images must have text alternatives that describe the
information or function represented by the images. This
ensures that images can be used by people with various
disabilities. This tutorial demonstrates how to provide
appropriate text alternatives based on the purpose of the
image:
Informative images: Images that graphically represent
concepts and information, typically pictures, photos and
illustrations. The text alternative should be at least a
short description conveying the essential information
presented by the image.
Decorative images: Provide a null text alternative (
alt="") when the only purpose of an image is to add
visual decoration to the page, rather than to convey
information that is important to understanding the
page.
Functional images: The text alternative of an image
used as a link or as a button should describe the
functionality of the link or button rather than the visual
Tutorials home Images Images Concepts
1
2
3
4
5
6
7
This is an Editor’s draft, for preview purposes only. Please see, and link to, released tutorials at
w3.org/WAI/tutorials/.
Web Accessibility Tutorials
Guidance on how to create websites that meet WCAG
Images Concepts
On this page
Images Tutorial
Images Concepts
Informative Images
Decorative Images
Functional Images
Images of Text
Complex Images
Groups of Images
Image Maps
An alt Decision Tree
Tips and Tricks
All Tutorials
Page Structure DRAFT
Menus DRAFT
Images
Tables

5. GrundStrukturGrundStruktur
Associating labels explicitly
Hiding label text
Approach 1: Hiding the label element
Approach 2: Using aria-label
Approach 3: Using the title attribute
Note on hiding elements
Associating labels implicitly
Labelling buttons
Visual position of label text
Related WCAG 2.0 resources
Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and
drop-down menus. In most cases this is done by using the <label> element.
Labels need to describe the purpose of the form control. This section of the tutorial describes
how to provide labels that are properly associated with form controls. Later sections explain
how to provide instructions, validate user input, and provide feedback to help users complete
your form.
A label and a form control need to be associated with each other either implicitly or explicitly.
Web browsers provide the label as a larger clickable area, for example, to select or activate the
control. It also ensures that assistive technology is able to refer to the correct label when
presenting a form control.
Associating labels explicitly
Whenever possible, use the label element to explicitly associate text with form elements.
The for attribute of the label must exactly match the id of the form control.
EXAMPLE:
First name:
Subscribe to newsletter
CODE SNIPPET: HTML
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"><br>
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
Hiding label text
Tutorials home Forms Labeling Controls
1
2
3
4
5
6
7
This is an Editor’s draft, for preview purposes only. Please see, and link to, released tutorials at w3.org/WAI/tutorials/.
Web Accessibility Tutorials
Guidance on how to create websites that meet WCAG
Labeling Controls
On this page
Forms Tutorial
Forms Concepts
Labeling Controls
Grouping Controls
Form Instructions
Validating Input
User Notifications
Multi-page Forms
Custom Controls
All Tutorials
Page Structure
DRAFT
Menus DRAFT
Images
Tables
Forms
Carousels DRAFT
SHARE
SHARE

6. StylingStyling
Vertical menu
Horizontal menu
Styling menu items
Menu feedback
Related WCAG 2.0 resources
With a consistent styling users are able to find menus more easily. There are two basic design
patterns that are commonly used on web sites: vertical and horizontal menus.
Regardless of the orientation, each menu item should have enough space so it doesn’t overlap
other content on the page or gets cut off. Such items are a potential accessibility barrier,
especially for users increasing the font size and can also be a problem when translating the
menu into another language. Try to avoid line breaks or hyphenation in menu items as they are
harder to understand.
Vertical menu
Ensure that the menu column is wide enough to accommodate all current and future menu
items.
EXAMPLE:
Home
Shop
SpaceBears
MarsCars
Contact
Horizontal menu
Horizontal menus should be positioned near the top of the screen so they are easier to find.
EXAMPLE:
Tutorials home Menus Menu Styling
1
2
3
4
This is an Editor’s draft, for preview purposes only. Please see, and link to, released tutorials at w3.org/WAI/tutorials/.
Web Accessibility Tutorials
Guidance on how to create websites that meet WCAG
[APPROVED DRAFT]
Menu Styling
On this page
SHARE
SHARE
Menus Tutorial
Menu Concepts
Structure
Styling
Fly-out Menus
Applications Menus
All Tutorials
Page Structure
DRAFT
Menus DRAFT
Images
Tables
Forms
Carousels DRAFT

7. Funktionalität eines KarussellsFunktionalität eines Karussells
Position slides
Adding previous and next buttons
Announcing slides
Items navigation
Focusing carousel items
Putting it all together
Related WCAG 2.0 resources
Carusels display the one content item at a time while hiding the others. They allow users to
browse through them.
Position slides
If the JavaScript is enabled, a class active is added to the carousel region so we can
distinguish between that state and the non-JavaScript fallback. The slides are positioned
absolutely in the carousel, and the current slide is positioned frontmost using z-index.
CODE SNIPPET:
.active .slide {
display: none;
position: absolute;
top: 0;
left: 0;
border: none;
}
.slide.current {
display: block;
z-index: 500;
}
The outcome looks like this:
EXAMPLE:
Featured Articles:
Tutorials home Carousels Functionality
Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
1
2
3
This is an Editor’s draft, for preview purposes only. Please see, and link to, released tutorials at w3.org/WAI/tutorials/.
Web Accessibility Tutorials
Guidance on how to create websites that meet WCAG
[ROUGH DRAFT]
Functionality
On this page
SHARE
Carousels Tutorial
Carousel Concepts
Structure
Functionality
Animations
Complete code
example
All Tutorials
Page Structure
DRAFT
Menus DRAFT
Images
Tables
Forms
Carousels DRAFT

8. menüs für Anwendungenmenüs für Anwendungen
EXAMPLE:
Web application menus use the same basic structure as navigation menus: They often consist of
a horizontal menu bar and use fly-out functionality.
Some additional WAI-ARIA roles help users with assistive technology to operate those menus in a
way that is similar to the way they use menus in desktop software. When using those roles, the
keyboard interaction should be similar to desktop software as well: the tab key is used to
iterate through the top-level items only, the up and down arrows are used to navigate the sub
menus.
Note that the keyboard behavior is not automatically changed when adding those roles, but
needs to be added using scripting. A detailed explanation on the WAI-ARIA attributes and
keyboard behavior can be found in the WAI-ARIA Authoring Practices document (draft) .
In addition to the aria-expanded and aria-haspopup attributes, the following roles are
used in the example:
menubar: Represents a (usually horizontal) menu bar.
menu: Represents a set of links or commands in a menu bar, it is used for the fly-out
menus.
menuitem: Represents an individual menu item.
The markup has no links at all: It is a nested list with WAI-ARIA roles as the application would be
non-functional without JavaScript available anyway.
Tutorials home Menus Web Application Menus
1
2
3
4
This is an Editor’s draft, for preview purposes only. Please see, and link to, released tutorials at w3.org/WAI/tutorials/.
Web Accessibility Tutorials
Guidance on how to create websites that meet WCAG
[APPROVED DRAFT]
Web Application Menus
File Edit Format View Help
Menus Tutorial
Menu Concepts
Structure
Styling
Fly-out Menus
Applications Menus
All Tutorials
Page Structure
DRAFT
Menus DRAFT
Images
Tables
Forms
Carousels DRAFT

9. DemoDemo

11. tutorialstutorials
https://w3.org/WAI/tutorials
https://w3c.github.io/wai-tutorials/

12. Tips for Getting StartedTips for Getting Started
with Web Accessibilitywith Web Accessibility

13. Tips for getting startedTips for getting started

14. Tips for getting startedTips for getting started
Designing
Writing
Developing
http://w3c.github.io/wai-quick-start/

15. EvaluationEvaluation
tools listtools list

16. evaluation tools listevaluation tools list

17. Evaluation Tools ListEvaluation Tools List
https://www.w3.org/WAI/ER/tools/

18. WCAG-EMWCAG-EM
Report ToolReport Tool

19. WCAG-EM Report ToolWCAG-EM Report Tool
WCAG-EM Report Tool
Website Accessibility Evaluation Report Generator
This tool helps you generate a report according to the Website Accessibility Conformance Evaluation Methodology (WCAG-EM). It does not perform any
accessibility checks. It helps you follow the steps of WCAG-EM, to generate a structured report from the input that you provide. It is designed for experienced
evaluators who know Web Content Accessibility Guidelines (WCAG) 2.0 and are somewhat familiar with WCAG-EM. For an introduction to WCAG-EM, see the
WCAG-EM Overview.
Note: This tool does not automatically save the information that you enter. To save your data in a file locally on your computer, use Windows shortcut keys
Ctrl+S or Mac shortcut keys ⌘S to open the Save dialog. (Or the 'Save' link at the top of the page will open the Save Evaluation Report page and from there
the 'Save data file locally to your computer' link will open the Save dialog.)
How this tool works
Tips for using this tool
Feedback: We welcome ideas, bug reports, and comments via GitHub or e-mail to wai-eo-editors@w3.org (a publicly archived list) or wai@w3.org (a WAI staff-only list).
Status: Version 1.0, 26 Febuary 2015
Development Team: Shadi Abou-Zahra, W3C/WAI (Project Lead) and Wilco Fiers, accessibility.nl (Design and development). Contributors: Shawn Lawton Henry and the Education and Outreach Working Group.
Developed with support from the WAI-ACT Project, a project of the European Commission IST Programme.
[WAI Site Map] [Help with WAI Website] [Search] [Contacting WAI]
Copyright © 2014 W3C (MIT, ERCIM, Keio, Beihang) Usage policies apply.
New Report Open Save Key Resources
Start 1. Define Scope 2. Explore Website 3. Select Sample 4. Audit Sample 5. Report Findings View Report


Next step: Define Scope 
®

20. WCAG-EM Report ToolWCAG-EM Report Tool
http://www.w3.org/WAI/eval/report-tool/#/

21. WCAG QuickWCAG Quick
referencereference

22. Heute:Heute:
http://www.w3.org/WAI/WCAG20/quickref/
Customize this Quick Reference
Technologies:
Show HTML techniques and failures
Show CSS techniques and failures
Show SMIL techniques and failures
Show Client-side Scripting techniques and failures
Show Server-side Scripting techniques and failures
Show Flash techniques and failures
Show PDF techniques and failures
Show Silverlight techniques and failures
Show WAI-ARIA techniques and failures
Levels:
Show Level A Success Criteria
Show Level AA Success Criteria
Show Level AAA Success Criteria
Sections:
Show Sufficient Techniques and Failures
Show Advisory Techniques
Save Settings Option:
Save these settings (requires cookies)
Customize with Settings Above
How to Meet WCAG 2.0
A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements
(success criteria) and techniques
Introduction
[Hide Introduction]
This web page can be used as a checklist for WCAG 2.0. It provides:
All of the requirements (called "success criteria") from Web
Content Accessibility Guidelines (WCAG) 2.0
Techniques to meet the requirements, which are linked to pages
with descriptions, code examples, browser and assistive technology
support notes, and tests.
Failures to avoid, which are linked to pages with descriptions,
examples, and tests.
"Understanding" links to pages that explain the intent of the
guideline or success criterion, how it helps people with different
disabilities, key terms, and resources.
You can customize what is included in this page by selecting from the
Customize this Quick Reference section which Technologies, Levels of
success criteria, and Sections of techniques you want to include.
For an introduction to WCAG, Techniques, and Understanding
documents, see the WCAG Overview.
Note that even content that conforms at the highest level (AAA) will not be
accessible to individuals with all types, degrees, or combinations of
disability, particularly in the cognitive language and learning areas. Authors
are encouraged to seek relevant advice about current best practice to
ensure that Web content is accessible, as far as possible, to this
community.
About the Techniques
For important information about the techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG
2.0.
Note: The basis for determining conformance to WCAG 2.0 is the success criteria, not the techniques. (The success criteria have 3-level numbering (0.0.0) and in this
page they are followed by a link "Understanding Success Criterion".) All techniques are informative; that means they are not required. There may be other techniques
besides the ones listed here.
New Techniques and Comments
The Techniques for WCAG 2.0 document is updated periodically, and anyone can submit techniques that will be considered for inclusion in an update. Please submit
corrections, updates, or new information related to techniques, failures, or other WCAG documentation to the WCAG Working Group, per the instructions for
commenting.

23. In Zukunft:In Zukunft:
http://w3c.github.io/wai-wcag-quickref/
Status: This is an incomplete rough mockup of a redesign. The published version of the How to Meet WCAG 2.0 quick reference is at: www.w3.org/WAI/WCAG20/quickref/ More
[Mockup] How to Meet WCAG 2.0
A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques
About this Quick Reference
Principle 1 – Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
1.1 Text Alternatives
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.1.1 Non-text Content — Level A
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations
listed below. Show full description
Understanding 1.1.1
BACK TO TOP
1.2 Time-based Media
Provide alternatives for time-based media.
1.2.1 Audio-only and Video-only (Prerecorded) — Level A
For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media
alternative for text and is clearly labeled as such: Show full description
Understanding 1.2.1
BACK TO TOP
1.2.2 Captions (Prerecorded) — Level A
HideContents Filter
1.1 Text Alternatives
1.1.1 Non-text Content
1.2 Time-based Media
1.2.1 Audio-only and Video-only
(Prerecorded)
1.2.2 Captions (Prerecorded)
1.2.3 Audio Description or Media
Alternative (Prerecorded)
1.2.4 Captions (Live)
1.2.5 Audio Description
(Prerecorded)
1.2.6 Sign Language (Prerecorded)
1.2.7 Extended Audio Description
(Prerecorded)
1.2.8 Media Alternative
(Prerecorded)
1.2.9 Audio-only (Live)
1.3 Adaptable
1.3.1 Info and Relationships
1.3.2 Meaningful Sequence
1.3.3 Sensory Characteristics
1.4 Distinguishable
1.4.1 Use of Color
1.4.2 Audio Control
1.4.3 Contrast (Minimum)
1.4.4 Resize text
1.4.5 Images of Text
1.4.6 Contrast (Enhanced)
1.4.7 Low or No Background Audio
1. Perceivable
Show techniques for 1.1
SHARE
Show techniques for 1.1.1
SHARE
Show techniques for 1.2.1
SHARE
Showing all success criteria and all techniques. Link to this view

24. WCAG 2.0:WCAG 2.0:
Stabiler StandardStabiler Standard

25. TechnikenTechniken
UnderstandingUnderstanding
(2 Updates/Jahr)

26. WCAG 2.0:WCAG 2.0:
Neue InitiativenNeue Initiativen

27. Mobile AccessibilityMobile Accessibility
task forcetask forceWCAG WG & UAWG
http://www.w3.org/WAI/GL/mobile-a11y-tf/

28. Mobile Accessibility: How WCAG 2.0 andMobile Accessibility: How WCAG 2.0 and
Other W3C/WAI Guidelines Apply to MobileOther W3C/WAI Guidelines Apply to Mobile
Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
W3C First Public Working Draft 26 February 2015
This version:
http://www.w3.org/TR/2015/WD-mobile-accessibility-mapping-20150226/
Latest published version:
http://www.w3.org/TR/mobile-accessibility-mapping/
Latest editor's draft:
http://w3c.github.io/Mobile-A11y-TF-Note/
Editors:
Kim Patch, Redstart Systems
Jeanne Spellman, W3C
Kathy Wahlbin, Interactive Accessibility
Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.
Abstract
This document, “Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile” describes how the Web Content Accessibility Guidelines (WCAG) 2.0 [WCAG20] and
its principles, guidelines, and success criteria can be applied to mobile web content, mobile web apps, native apps, and hybrid apps using web components inside native apps. It provides
informative guidance, but does not set requirements. It also highlights the relevance of the User Agent Accessibility Guidelines 2.0 [UAAG20] in the mobile context.
This document is intended to become a Working Group Note and is part of a series of technical and educational documents published by the W3C Web Accessibility Initiative (WAI).
Status of This Document
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this
technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
This document is a First Public Working Draft by the Mobile Accessibility Task Force (Mobile A11Y TF) operating under the terms of its Work Statement under the joint coordination and review
of the Web Content Accessibility Guidelines Working Group (WCAG WG) and the User Agent Accessibility Guidelines Working Group (UAWG), which is part of the Web Accessibility Initiative
(WAI) of the World Wide Web Consortium (W3C). This document is intended to become a W3C Note.
Feedback on this draft is essential to the success of this guidance. The Mobile Accessibility Task Force asks in particular:
1. Is this document helpful in understanding the applicability of WCAG 2.0 and UAAG 2.0 to the mobile environment?
2. Is the format of this information helpful for designers, developers and testers of content that can be viewed with mobile devices and in mobile apps? Is it useful for policymakers?
3. In Appendix A, is listing relevant existing WCAG 2.0 techniques helpful for mobile content and mobile app developers?
4. Are there additional accessibility needs in the mobile environment related to the WCAG principles that we should address?

29. Cognitive and Learning DisabilitiesCognitive and Learning Disabilities
Accessibility Task ForceAccessibility Task Force
PFWG & WCAG WG
http://www.w3.org/WAI/PF/cognitive-a11y-tf/

30. Low vision AccessibilityLow vision Accessibility
task forcetask force
„in Diskussion“
http://www.w3.org/WAI/GL/low-vision-a11y-tf/

31. NormativeNormativeNormativeNormative WCAG 2.0WCAG 2.0
ErweiterungenErweiterungen

32. ATAG 2.0ATAG 2.0
One more thing…One more thing…

33. VÖ: 24.09.2015VÖ: 24.09.2015

34. ATAG hilft WCAGATAG hilft WCAG
zu erreichenzu erreichen

35. BarrierefreieBarrierefreie
Content managementContent management
systemesysteme

36. Eric EggertEric Eggert
ee@w3.org
http://w3.org/People/yatil/
http://slides.com/yatil/atag-wcag-2015/