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, ...
Web AccessibilityWeb Accessibility
TutorialsTutorials
Seitenstruktur (Entwurf)
Menüs (Entwurf)
Bilder
Tabellen
Formulare
Karussells (Entwurf)
KonzepteKonzepte
Why is this important?
Related WCAG 2.0
resources
Technologies covered in this
Tutorial:
CSS Fonts
CSS Tr...
GrundStrukturGrundStruktur
Associating labels explicitly
Hiding label text
Approach 1: Hiding the label element
Approach 2...
StylingStyling
Vertical menu
Horizontal menu
Styling menu items
Menu feedback
Related WCAG 2.0 resources
With a consistent...
Funktionalität eines KarussellsFunktionalität eines Karussells
Position slides
Adding previous and next buttons
Announcing...
menüs für Anwendungenmenüs für Anwendungen
EXAMPLE:
Web application menus use the same basic structure as navigation menus...
DemoDemo
tutorialstutorials
https://w3.org/WAI/tutorials
https://w3c.github.io/wai-tutorials/
Tips for Getting StartedTips for Getting Started
with Web Accessibilitywith Web Accessibility
Tips for getting startedTips for getting started
Tips for getting startedTips for getting started
Designing
Writing
Developing
http://w3c.github.io/wai-quick-start/
EvaluationEvaluation
tools listtools list
evaluation tools listevaluation tools list
Evaluation Tools ListEvaluation Tools List
https://www.w3.org/WAI/ER/tools/
WCAG-EMWCAG-EM
Report ToolReport Tool
WCAG-EM Report ToolWCAG-EM Report Tool
WCAG-EM Report Tool
Website Accessibility Evaluation Report Generator
This tool hel...
WCAG-EM Report ToolWCAG-EM Report Tool
http://www.w3.org/WAI/eval/report-tool/#/
WCAG QuickWCAG Quick
referencereference
Heute:Heute:
http://www.w3.org/WAI/WCAG20/quickref/
Customize this Quick Reference
Technologies:
Show HTML techniques and ...
In Zukunft:In Zukunft:
http://w3c.github.io/wai-wcag-quickref/
Status: This is an incomplete rough mockup of a redesign. T...
WCAG 2.0:WCAG 2.0:
Stabiler StandardStabiler Standard
TechnikenTechniken
UnderstandingUnderstanding
(2 Updates/Jahr)
WCAG 2.0:WCAG 2.0:
Neue InitiativenNeue Initiativen
Mobile AccessibilityMobile Accessibility
task forcetask forceWCAG WG & UAWG
http://www.w3.org/WAI/GL/mobile-a11y-tf/
Mobile Accessibility: How WCAG 2.0 andMobile Accessibility: How WCAG 2.0 and
Other W3C/WAI Guidelines Apply to MobileOther...
Cognitive and Learning DisabilitiesCognitive and Learning Disabilities
Accessibility Task ForceAccessibility Task Force
PF...
Low vision AccessibilityLow vision Accessibility
task forcetask force
„in Diskussion“
http://www.w3.org/WAI/GL/low-vision-...
NormativeNormativeNormativeNormative WCAG 2.0WCAG 2.0
ErweiterungenErweiterungen
ATAG 2.0ATAG 2.0
One more thing…One more thing…
VÖ: 24.09.2015VÖ: 24.09.2015
ATAG hilft WCAGATAG hilft WCAG
zu erreichenzu erreichen
BarrierefreieBarrierefreie
Content managementContent management
systemesysteme
Eric EggertEric Eggert
ee@w3.org
http://w3.org/People/yatil/
http://slides.com/yatil/atag-wcag-2015/
Neue Infos rund um WCAG 2.0
Nächste SlideShare
Wird geladen in …5
×

Neue Infos rund um WCAG 2.0

660 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
660
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Neue Infos rund um WCAG 2.0

  1. 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. 2. Web AccessibilityWeb Accessibility TutorialsTutorials
  3. 3. Seitenstruktur (Entwurf) Menüs (Entwurf) Bilder Tabellen Formulare Karussells (Entwurf)
  4. 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. 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. 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. 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. 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. 9. DemoDemo
  10. 10. tutorialstutorials https://w3.org/WAI/tutorials https://w3c.github.io/wai-tutorials/
  11. 11. Tips for Getting StartedTips for Getting Started with Web Accessibilitywith Web Accessibility
  12. 12. Tips for getting startedTips for getting started
  13. 13. Tips for getting startedTips for getting started Designing Writing Developing http://w3c.github.io/wai-quick-start/
  14. 14. EvaluationEvaluation tools listtools list
  15. 15. evaluation tools listevaluation tools list
  16. 16. Evaluation Tools ListEvaluation Tools List https://www.w3.org/WAI/ER/tools/
  17. 17. WCAG-EMWCAG-EM Report ToolReport Tool
  18. 18. 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  ®
  19. 19. WCAG-EM Report ToolWCAG-EM Report Tool http://www.w3.org/WAI/eval/report-tool/#/
  20. 20. WCAG QuickWCAG Quick referencereference
  21. 21. 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.
  22. 22. 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
  23. 23. WCAG 2.0:WCAG 2.0: Stabiler StandardStabiler Standard
  24. 24. TechnikenTechniken UnderstandingUnderstanding (2 Updates/Jahr)
  25. 25. WCAG 2.0:WCAG 2.0: Neue InitiativenNeue Initiativen
  26. 26. Mobile AccessibilityMobile Accessibility task forcetask forceWCAG WG & UAWG http://www.w3.org/WAI/GL/mobile-a11y-tf/
  27. 27. 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?
  28. 28. Cognitive and Learning DisabilitiesCognitive and Learning Disabilities Accessibility Task ForceAccessibility Task Force PFWG & WCAG WG http://www.w3.org/WAI/PF/cognitive-a11y-tf/
  29. 29. Low vision AccessibilityLow vision Accessibility task forcetask force „in Diskussion“ http://www.w3.org/WAI/GL/low-vision-a11y-tf/
  30. 30. NormativeNormativeNormativeNormative WCAG 2.0WCAG 2.0 ErweiterungenErweiterungen
  31. 31. ATAG 2.0ATAG 2.0 One more thing…One more thing…
  32. 32. VÖ: 24.09.2015VÖ: 24.09.2015
  33. 33. ATAG hilft WCAGATAG hilft WCAG zu erreichenzu erreichen
  34. 34. BarrierefreieBarrierefreie Content managementContent management systemesysteme
  35. 35. Eric EggertEric Eggert ee@w3.org http://w3.org/People/yatil/ http://slides.com/yatil/atag-wcag-2015/

×