Your CMS is an accessibility assistant

A presentation at Technica11y in July 2021 in by Hidde de Vries

Slide 1

Your CMS is an accessibility assistant Hidde de Vries WordPress Accessibility Day 3 October, online @hdv

Slide 2

Hidde de Vries Accessibility Specialist at W3C’s Web Accessibility Initiative (WAI). @hdv

Slide 3

Planning, designing, developing, testing, advocating training… w3.org/WAI @hdv

Slide 4

Authoring tools @hdv

Slide 5

Authoring tools: tools that create web content @hdv

Slide 6

Authoring tools: tools that can improve lots of accessibility at once @hdv

Slide 7

WYSIWYG editors Course creators / LMS CMS “Save as HTML” Wikipedia “New Tweet” Form generators Site builders @hdv

Slide 8

CMS • The CMS itself • Plugins form builders, custom field managers, cookie banners, event management tooling, social buttons, web shop et cetera • Themes @hdv

Slide 9

@hdv

Slide 10

WCAG UAAG ATAG web content browsers/UAs authoring tools @hdv

Slide 11

WCAG UAAG ATAG web content browsers/UAs authoring tools @hdv

Slide 12

WCAG UAAG ATAG web content browsers/UAs authoring tools @hdv

Slide 13

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

Slide 14

ATAG 2.0 @hdv

Slide 15

ATAG at a Glance ATAG at a Glance ・ https://www.w3.org/WAI/standards-guidelines/atag/glance/ @hdv

Slide 16

Part A: Editing experience Part B: Output Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System” @hdv

Slide 17

Part A: Editing experience Part B: Output Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System” @hdv

Slide 18

Part A of ATAG Accessibility of the editing experience @hdv

Slide 19

Edit teas A.1.1.1 Test with text zoom @hdv

Slide 20

A.2.1.1 Provide text alternatives for icons @hdv

Slide 21

A.3.1.1 Make it work with keyboard • visible focus • can use all controls @hdv

Slide 22

A.3.7.1 Display previews accessibly @hdv

Slide 23

A.4.1.1 Help with spelling @hdv

Slide 24

Part B of ATAG Support the production of accessible content @hdv

Slide 25

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

Slide 26

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

Slide 27

Hppe!DNTft!dbo/// Help content editors make their content more accessible @hdv

Slide 28

B.1.1.2 When content is generated, it is accessible • nested according to HTML spec • no empty links @hdv

Slide 29

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

Slide 30

B.1.1.2 When content is generated, there are automated accessibility checks @hdv

Slide 31

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

Slide 32

<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

Slide 33

B.2.4.1 Have accessible templates for common use cases @hdv

Slide 34

B.2.5.1 Provide accessible UI components ｃqsf.bvuipsfe!dpoufouｄ @hdv

Slide 35

lorem ipsum dolor sit B.3.1.1 Warn user when they introduce a colour contrast issue @hdv

Slide 36

lorem ipsum dolor sit B.3.1.1 Warn user when they introduce a colour contrast issue @hdv

Slide 37

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

Slide 38

<button type=”button”>Swbmit</button> B.3.1.1 Add a spellchecker to content fields Swbmit @hdv

Slide 39

<button type=”button”>Submit</button> B.3.1.1 Add a spellchecker to content fields Submit @hdv

Slide 40

B.3.1.1 Report readability levels @hdv

Slide 41

B.4.2.1 Provide accessible examples @hdv

Slide 42

Uif!｀sjhiuａ!DNT!dbo/// Encourage more accessible content @hdv

Slide 43

Uif!｀sjhiuａ!DNT!dbo/// Be a personal accessibility assistant @hdv

Slide 44

Process When can better authoring tools help? @hdv

Slide 45

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

Slide 46

Interaction Design Development Planning/ Strategy Visual Design Launch Quality Assurance @hdv

Slide 47

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

Slide 48

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

Slide 49

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

Slide 50

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

Slide 51

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

Slide 52

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Dipptf!bo!bvuipsjoh!uppm! uibu!tvqqpsut!bddfttjcjmjuz @hdv

Slide 53

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Epdvnfou!ipx!gmpx!dbo! cf!bvuipsfe!bddfttjcmz Uftu!bvuipsjoh!xjui! vtfst!xjui!ejtbcjmjujft @hdv

Slide 54

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

Slide 55

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Qjdl!uifnft!xjui!! bddfttjcjmjuz!tvqqpsu! Qjdl!qmvhjot!xjui! bddfttjcjmjuz!tvqqpsu @hdv

Slide 56

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch Fncfe!bvupnbufe! bddfttjcjmjuz!uftut! jo!uif!bvuipsjoh!qspdftt @hdv

Slide 57

Planning/ Strategy Interaction Design Visual Design Development Quality Assurance Launch @hdv

Slide 58

Improving authoring tools at WAI @hdv

Slide 59

Implementing ATAG 2.0 • Rationale and intent • Practical examples Implementing ATAG ・ https://www.w3.org/TR/IMPLEMENTING-ATAG20/ @hdv

Slide 60

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

Slide 61

List of Authoring Tools • Filter by ATAG criteria • Find tools that support accessibility • Submit your own tool @hdv

Slide 62

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

Slide 63

Conclusion @hdv

Slide 64

Conclusion • CMSes are essential for an accessible web • CMSes should help content editors get accessibility right @hdv

Slide 65

Thanks for listening. How would turn a CMS/plugin/theme into an assistant? • Slides: talks.hiddedevries.nl • Email: hidde@w3.org @hdv