Your CMS is an accessibility assistant

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

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

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