Your CMS is an accessibility assistant

A presentation at Technica11y by Hidde de Vries

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: 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

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 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 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

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

<ul><li>List item</li></ul> B.2.1.1 Allows for creating accessible content • for each image field, there is an alt text field • for each video player field, there is a captions upload button @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 ! 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.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 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

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 • 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

Hidde de Vries
@hdv

1 / 65

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

Your CMS is an accessibility assistant

Link for this presentation:

HTML code for embedding:

Share on social media:

Video

Resources

WAI website

Authoring Tool Accessibility Guidelines (ATAG) Overview

ATAG at a Glance

Web Accessibiity Initiative Website

ATAG 2.0

Implementing ATAG 2.0

WAI-Guide project

Prototype: Authoring Tools List

ATAG Report Tool