Your CMS is an accessibility assistant
A presentation at WordPress Accessibility Day by Hidde de Vries
Your CMS is an accessibility assistant Hidde de Vries WordPress Accessibility Day 3 October, online @hdv
Hidde de Vries Accessibility Specialist at W3C’s Web Accessibility Initiative (WAI). @hdv
Planning, designing, developing, testing, advocating training… w3.org/WAI @hdv
Authoring tools @hdv
Authoring tools: tools that create web content @hdv
Authoring tools: tools that can improve lots of accessibility at once @hdv
WYSIWYG editors Course creators / LMS CMS “Save as HTML” Wikipedia “New Tweet” Form generators Site builders @hdv
CMS • The CMS itself • Plugins form builders, custom field managers, cookie banners, event management tooling, social buttons, web shop et cetera • Themes @hdv
@hdv
WCAG UAAG ATAG web content browsers/UAs authoring tools @hdv
WCAG UAAG ATAG web content browsers/UAs authoring tools @hdv
WCAG UAAG ATAG web content browsers/UAs authoring tools @hdv
Why authoring tools, like CMSes, are essential )cftjeft!dpoufou!boe!cspxtfst* • Include more content creators • Content creators can fix accessibility problems before their website goes live @hdv
ATAG 2.0 @hdv
ATAG at a Glance ATAG at a Glance ・ https://www.w3.org/WAI/standards-guidelines/atag/glance/ @hdv
Part A: Editing experience Part B: Output Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System” @hdv
Part A: Editing experience Part B: Output Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System” @hdv
Part A of ATAG Accessibility of the editing experience @hdv
Edit teas A.1.1.1 Test with text zoom @hdv
A.2.1.1 Provide text alternatives for icons @hdv
A.3.1.1 Make it work with keyboard • visible focus • can use all controls @hdv
A.3.7.1 Display previews accessibly @hdv
A.4.1.1 Help with spelling @hdv
Part B of ATAG Support the production of accessible content @hdv
ubcmft!xjui!ifbefst Part B of ATAG dpousbtu.sjdi!ifsp!jnbhft gpsn!gjfmet!xjui!mbcfmt Support the production of accessible content tfotjcmf!ifbejoh!tusvduvsft dbspvtfmt!uibu!! dbo!qbvtf oftufe!bddpsejoh! up!tqfd dbqujpofe!wjefp nvmujmjohvbm!dpoufou!xjui!! mboh!buusjcvuft @hdv
ubcmft!xjui!op!ifbefst Part B of ATAG ifspt!xjui!jmmfhjcmf!ufyu obnfmftt!gpsn!gjfme Support the production avoid inaccessible content of ifbejoht!gps!uif! xspoh!sfbtpot opo.tuboebse! oftujoh dbspvtfmt!xjui!op!! qbvtf!cvuupo op!dbqujpot!po!wjefpt nvmujmjohvbm!dpoufou!! xjuipvu!mboh! buusjcvuft @hdv
Hppe!DNTft!dbo/// Help content editors make their content more accessible @hdv
B.1.1.2 When content is generated, it is accessible • nested according to HTML spec • no empty links @hdv
B.1.1.2 When content is generated, there is a prompt for required accessibility information • caption for a table • alt text for images in a carousel • labels for form fields @hdv
B.1.1.2 When content is generated, there are automated accessibility checks @hdv
B.1.1.2 When content is generated, manual checks are suggested • check if heading structure makes sense • verify if centrally managed image alternatives apply in this use case @hdv
B.2.4.1 Have accessible templates for common use cases @hdv
B.2.5.1 Provide accessible UI components ｃqsf.bvuipsfe!dpoufouｄ @hdv
lorem ipsum dolor sit B.3.1.1 Warn user when they introduce a colour contrast issue @hdv
lorem ipsum dolor sit B.3.1.1 Warn user when they introduce a colour contrast issue @hdv
lorem ipsum dolor sit ! Not enough contrast Use a background color, larger text or a bolder font. B.3.1.1 Warn user when they introduce a colour contrast issue @hdv
<button type=”button”>Swbmit</button> B.3.1.1 Add a spellchecker to content fields Swbmit @hdv
<button type=”button”>Submit</button> B.3.1.1 Add a spellchecker to content fields Submit @hdv
B.3.1.1 Report readability levels @hdv
B.4.2.1 Provide accessible examples @hdv
Uif!｀sjhiuａ!DNT!dbo/// Encourage more accessible content @hdv
Uif!｀sjhiuａ!DNT!dbo/// Be a personal accessibility assistant @hdv
Process When can better authoring tools help? @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv
Interaction Design Development Planning/ Strategy Visual Design Launch Quality Assurance @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Dipptf!bo!bvuipsjoh!uppm! uibu!tvqqpsut!bddfttjcjmjuz @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Epdvnfou!ipx!gmpx!dbo! cf!bvuipsfe!bddfttjcmz Uftu!bvuipsjoh!xjui! vtfst!xjui!ejtbcjmjujft @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Tfu!dpotusbjout!gps!dvtupnjtjoh! dpmpvs!dpncjobujpot!)gps!dpousbtu*! Qspwjef!bddfttjcmf!fybnqmft-!mjlf! mbshf!fopvhi!upvdi!ubshfut @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Qjdl!uifnft!xjui!! bddfttjcjmjuz!tvqqpsu! Qjdl!qmvhjot!xjui! bddfttjcjmjuz!tvqqpsu @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Fncfe!bvupnbufe! bddfttjcjmjuz!uftut! jo!uif!bvuipsjoh!qspdftt @hdv
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv
Improving authoring tools at WAI @hdv
Implementing ATAG 2.0 • Rationale and intent • Practical examples Implementing ATAG ・ https://www.w3.org/TR/IMPLEMENTING-ATAG20/ @hdv
WAI-Guide • Part of EC’s Horizon 2020 • 3 years • Embedded in W3C’s vendor neutral environment • “Accelerate Support for Accessible Authoring” WAI-Guide ・ https://www.w3.org/WAI/about/projects/wai-guide/ @hdv
List of Authoring Tools • Filter by ATAG criteria • Find tools that support accessibility • Submit your own tool @hdv
ATAG Report Tool • Manually report on ATAG criteria • Save report as JSON or HTML • Use it to create a listing in the Authoring Tools List ATAG Report Tool ・ https://w3.org/WAI/atag/report-tool @hdv
Conclusion @hdv
Conclusion • CMSes are essential for an accessible web • CMSes should help content editors get accessibility right @hdv
Thanks for listening. How would turn a CMS/plugin/theme into an assistant? • Slides: talks.hiddedevries.nl • Email: hidde@w3.org @hdv
Your CMS plays a decisive part in creating accessible content, suggest the Authoring Tools Accessibility Guidelines (ATAG). Whenever a content designer creates content, the CMS could help with the accessibility of it. For instance, when a designer drops in an image, the CMS could point to the ideal text alternative or calculate the consequences for color contrast.
In this talk, you will learn more about what ATAG is and how, with ATAG in mind, CMSes can personally assist content editors on their way to a more accessible website.
Video
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
WAI website
Information about all things accessibility: planning, designing, developing, testing, advocating , training and more…
-
Authoring Tool Accessibility Guidelines (ATAG) Overview
-
ATAG at a Glance
-
Web Accessibiity Initiative Website
-
ATAG 2.0
The Authoring Tools Accessibility Guidelines
-
Implementing ATAG 2.0
Examples, rationale and intent for the success criteria of ATAG 2.0.
-
WAI-Guide project
-
Prototype: Authoring Tools List
Authoring Tools List (prototype, dummy data)
-
ATAG Report Tool
Buzz and feedback
Here’s what was said about this presentation on social media.
