# data[].attributes.blurb.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
Your CMS is an accessibility assistant Hidde de Vries WordPress Accessibility Day 3 October, online @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Hidde de Vries Accessibility Specialist at W3C’s Web Accessibility Initiative (WAI). @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning, designing, developing, testing, advocating training… w3.org/WAI @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Authoring tools @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Authoring tools: tools that create web content @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Authoring tools: tools that can improve lots of accessibility at once @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
WYSIWYG editors Course creators / LMS CMS “Save as HTML” Wikipedia “New Tweet” Form generators Site builders @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
CMS • The CMS itself • Plugins form builders, custom field managers, cookie banners, event management tooling, social buttons, web shop et cetera • Themes @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
WCAG UAAG ATAG web content browsers/UAs authoring tools @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
WCAG UAAG ATAG web content browsers/UAs authoring tools @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
WCAG UAAG ATAG web content browsers/UAs authoring tools @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
ATAG 2.0 @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
ATAG at a Glance ATAG at a Glance ・ https://www.w3.org/WAI/standards-guidelines/atag/glance/ @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Part A: Editing experience Part B: Output Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System” @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Part A: Editing experience Part B: Output Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System” @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Part A of ATAG Accessibility of the editing experience @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Edit teas A.1.1.1 Test with text zoom @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
A.2.1.1 Provide text alternatives for icons @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
A.3.1.1 Make it work with keyboard • visible focus • can use all controls @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
A.3.7.1 Display previews accessibly @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
A.4.1.1 Help with spelling @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Part B of ATAG Support the production of accessible content @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Hppe!DNTft!dbo/// Help content editors make their content more accessible @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
B.1.1.2 When content is generated, it is accessible • nested according to HTML spec • no empty links @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
B.1.1.2 When content is generated, there are automated accessibility checks @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
List item

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

# data[].attributes.slidedeck.data[].slides[].desc.html
B.2.4.1 Have accessible templates for common use cases @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
B.2.5.1 Provide accessible UI components ｃqsf.bvuipsfe!dpoufouｄ @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
lorem ipsum dolor sit B.3.1.1 Warn user when they introduce a colour contrast issue @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
lorem ipsum dolor sit B.3.1.1 Warn user when they introduce a colour contrast issue @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
<button type=”button”>Swbmit</button> B.3.1.1 Add a spellchecker to content fields Swbmit @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
<button type=”button”>Submit</button> B.3.1.1 Add a spellchecker to content fields Submit @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
B.3.1.1 Report readability levels @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
B.4.2.1 Provide accessible examples @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Uif!｀sjhiuａ!DNT!dbo/// Encourage more accessible content @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Uif!｀sjhiuａ!DNT!dbo/// Be a personal accessibility assistant @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Process When can better authoring tools help? @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Interaction Design Development Planning/ Strategy Visual Design Launch Quality Assurance @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Dipptf!bo!bvuipsjoh!uppm! uibu!tvqqpsut!bddfttjcjmjuz @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Epdvnfou!ipx!gmpx!dbo! cf!bvuipsfe!bddfttjcmz Uftu!bvuipsjoh!xjui! vtfst!xjui!ejtbcjmjujft @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Qjdl!uifnft!xjui!! bddfttjcjmjuz!tvqqpsu! Qjdl!qmvhjot!xjui! bddfttjcjmjuz!tvqqpsu @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Fncfe!bvupnbufe! bddfttjcjmjuz!uftut! jo!uif!bvuipsjoh!qspdftt @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Improving authoring tools at WAI @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Implementing ATAG 2.0 • Rationale and intent • Practical examples Implementing ATAG ・ https://www.w3.org/TR/IMPLEMENTING-ATAG20/ @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
List of Authoring Tools • Filter by ATAG criteria • Find tools that support accessibility • Submit your own tool @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Conclusion @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Conclusion • CMSes are essential for an accessible web • CMSes should help content editors get accessibility right @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Thanks for listening. How would turn a CMS/plugin/theme into an assistant? • Slides: talks.hiddedevries.nl • Email: hidde@w3.org @hdv

# data[].attributes.resources.data[].desc.html
Information about all things accessibility: planning, designing, developing, testing, advocating , training and more…

# data[].attributes.resources.data[].title
Authoring Tool Accessibility Guidelines (ATAG) Overview

# data[].attributes.resources.data[].desc.html
The Authoring Tools Accessibility Guidelines

# data[].attributes.resources.data[].desc.html
Examples, rationale and intent for the success criteria of ATAG 2.0.

# data[].attributes.resources.data[].desc.html
Authoring Tools List (prototype, dummy data)