Procuring accessible software for e-learning: how ATAG can help

A presentation at WPCampus 2021 Online in September 2021 in by Hidde de Vries

Slide 1

Procuring accessible software for e-learning: how ATAG can help Hidde de Vries Joshue O’Connor w3.org/WAI

Slide 2

Hidde de Vries Joshue O’Connor Accessibility Specialists at W3C’s Web Accessibility Initiative (WAI). w3.org/WAI

Slide 3

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

Slide 4

WCAG UAAG ATAG web content browsers/UAs authoring tools w3.org/WAI

Slide 5

WCAG UAAG ATAG web content browsers/UAs authoring tools w3.org/WAI

Slide 6

WCAG UAAG ATAG web content browsers/UAs authoring tools w3.org/WAI

Slide 7

Why authoring accessibility matters (besides content and browsers) • Include more teachers and more students • Teachers can fix accessibility problems before their content goes live w3.org/WAI

Slide 8

Authoring tools w3.org/WAI

Slide 9

Authoring tools: tools that create web content w3.org/WAI

Slide 10

Authoring tools: tools that can improve lots of accessibility at once w3.org/WAI

Slide 11

WYSIWYG editors Course creators / LMS CMS “Save as HTML” Wikipedia “New Tweet” Form generators Site builders w3.org/WAI

Slide 12

LMS • The LMS itself • Plugins form builders, surveys, custom field managers, cookie banners, event management tooling, social buttons, et cetera • Themes w3.org/WAI

Slide 13

ATAG 2.0 w3.org/WAI

Slide 14

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

Slide 15

Part A: Editing experience (teachers) Part B: Output (students) Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System” w3.org/WAI

Slide 16

Part A: Editing experience (teachers) Part B: Output (students) Photo left: Austin Public Library (Flickr), photo right: source of Wikipedia page for “Content Management System” w3.org/WAI

Slide 17

Enquire about ATAG when procuring authoring tools w3.org/WAI

Slide 18

Part A of ATAG Accessibility of the editing experience w3.org/WAI

Slide 19

Part A is about ensuring the authoring tool interface is accessible w3.org/WAI

Slide 20

Edit teas A.1.1.1 Can you resize text within the WYSIWYG editor? w3.org/WAI

Slide 21

A.2.1.1 Are controls labeled? • accessible to users of assistive technologies w3.org/WAI

Slide 22

A.3.1.1 Does it works with keyboard only? • visible focus • can use all controls w3.org/WAI

Slide 23

A.4.1.1 Does it help authors avoid and correct mistakes? • spelling • can confirm changes w3.org/WAI

Slide 24

Part B of ATAG Support the production of accessible content w3.org/WAI

Slide 25

Good LMSes can… Can create accessible content, help avoid inaccessible content w3.org/WAI

Slide 26

Good LMSes can… Help teachers make their courses more accessible w3.org/WAI

Slide 27

B.1.1.2 When content is generated, it is accessible • nested according to HTML spec • no empty links w3.org/WAI

Slide 28

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 w3.org/WAI

Slide 29

B.1.1.2 When content is generated, there are automated accessibility checks w3.org/WAI

Slide 30

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 w3.org/WAI

Slide 31

<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 w3.org/WAI

Slide 32

B.2.4.1 Have accessible templates for common use cases w3.org/WAI

Slide 33

B.2.5.1 Provide accessible UI components “pre-authored content” w3.org/WAI

Slide 34

lorem ipsum dolor sit B.3.1.1 Warn user when they introduce a colour contrast issue w3.org/WAI

Slide 35

lorem ipsum dolor sit B.3.1.1 Warn user when they introduce a colour contrast issue w3.org/WAI

Slide 36

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 w3.org/WAI

Slide 37

<button type=”button”>Swbmit</button> B.3.1.1 Swbmit Add a spellchecker to content fields w3.org/WAI

Slide 38

<button type=”button”>Submit</button> B.3.1.1 Submit Add a spellchecker to content fields w3.org/WAI

Slide 39

B.3.1.1 Report readability levels w3.org/WAI

Slide 40

B.4.2.1 Provide accessible examples w3.org/WAI

Slide 41

The ‘right’ CMS can… Encourage more accessible content w3.org/WAI

Slide 42

The ‘right’ CMS can… Be a personal accessibility assistant w3.org/WAI

Slide 43

Conclusion w3.org/WAI

Slide 44

Conclusion • LMS need to be accessible to everyone • this includes students as well as teachers with disabilities • ask vendors for more or improved accessibility • use the ATAG standard to develop and/or procure LMS w3.org/WAI

Slide 45

Thanks for listening! w3.org/WAI