1. PEAT Talks: Sharing Success from the WWW+W4A Accessibility Hackathon May 19, 2016 www.PEATworks.org

2. Audio is also available over a phone line: –Dial in number: 1-866-365-3921 –Conference Code: 7247886139 Submit questions at any time during the presentation: –Type directly into the Chat window your screen –Email info@PEATworks.orginfo@PEATworks.org –Tweet @PEATworks using #PEATtalks Captioning is available: –http://captionedtext.com/client/event.aspx?CustomerID=1314&E ventID=2887629http://captionedtext.com/client/event.aspx?CustomerID=1314&E ventID=2887629 Logistics

3. Agenda www.PEATworks.org3 Welcome and introductions – Josh Christianson H5P’s involvement in accessibility hackathon – Svein-Tore Griff Recap of team efforts – Greg Gay Presentation of winning team’s approach – Volker Sorge Question and Answer

5. H5P – A plugin for publishing systems + Moodle and many more coming

6. Interactive Video

7. Memory Game

8. 28 Content Types

9. The H5P Community Global collaboration on e-learning content and technology

10. Group 6: Charts

11. Added readable labels to pie chart pieces Added tabindex to pie pieces for keyboard access Added readable labels to bars in bar chart Added tabindex to bars for keyboard access Added description field to describe the chart (i.e. long description)

12. Group 1: Mark the Words

13. Fixes: Added button to move focus to start or end of list When a word is selected, it is now announced When navigating through words, marked ones are now announced Suggestions: Remove role=”button” from words, so only the word is announced Add hidden text to announce start and end of list Include hidden instruction Allow navigation through words by keyboard along

14. Group 4: Summary Builder

15. Added count labels, to be announced by AT ($count out of $total) Replace “/” with “out of” to make scores more meaningful Added Enter key (13) in addition to spacebar (32) to select correct answers Added focus highlighting Added instructional labels for AT Added tabindex to label to make them focusable Added “for” to labels to associate them with respective input element Added “incorrect answer” label Added FIELDSET and LEGEND to group radio buttons.

16. Group 3: Interactive Video

17. Added Accesskey P to pause/play button Added ARIA role=”alert” to announce bookmark popups Added ARIA role=”alert” to Interactive popups Added ARIA role=”alert” to interaction label text. Add a default title to interaction, if one is not provided

18. Group 7: Hot Spot & Arithmetic Quiz

19. Group 7: Hot Spot Problem: 4 images are multiple choice answer Neither readable nor clickable Solution: Add Tab Index to make them keyboard navigatable Add aria-labels with explanations Make them clickable by keyboard

20. Group 7: Arithmetic Quiz Scenario: Deck of quiz slides One displayed at a time Start slide – Countdown – Questions Score is kept and displayed A timer is kept and displayed Correctness of answer is indicated by animation

21. Problem: Partially Accessible Quiz Questions, Score, Timer inaccessible Buttons are keyboard accessible and clickable But ALL buttons on ALL slides are accessible o Slides are still in the page even if not displayed o Screenreader tells you the choices on the page o Keyboard navigates you to choices off the page Choice: Single widget vs Basic structures

22. Solution: Integrate A11Y from start Ensure basic structures are accessible In our case: buttons and slides Give structures accessibility defaults Make sure buttons are focusable but not reachable Set tabindex to -1 Control keyboard access by roving tabindex Set tabindex to 0 on elements of incoming slide Set tabindex to -1 on elements of outgoing slide Integrate Question/Score/Timer into tabindex

23. HTML 5 Animations Countdown to start the quiz Problem: 3-2-1 countdown would flash on start slide Solution: Make countdown elements live regions This alerts Screen Reader to speak them Animated buttons show correctness of answer Problem: Buttons change colour/size in parallel Solution: Add a temporary live region Push to correctness info to live region Get the timing right! Remove the region before next slide!

24. Q & A Svein-Tore How could H5P be used in a work setting? And what are the next steps for H5P in regards to accessibility? Greg and Volker What’s one “take away” you have from participating in this event? All What are other effective ways to spread the work about accessibility?