PEAT Talks: Sharing Success from the WWW+W4A Accessibility Hackathon May 19,

Audio is also available over a phone line: –Dial in number: –Conference Code: Submit questions at any time during the presentation: –Type directly into the Chat window your screen – using #PEATtalks Captioning is available: – ventID= http://captionedtext.com/client/event.aspx?CustomerID=1314&E ventID= Logistics

Agenda 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

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

Interactive Video

Memory Game

28 Content Types

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

Group 6: Charts

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)

Group 1: Mark the Words

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

Group 4: Summary Builder

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.

Group 3: Interactive Video

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

Group 7: Hot Spot & Arithmetic Quiz

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

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

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

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

HTML 5 Animations Countdown to start the quiz Problem: 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!

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?