Introductory slides for an internal workshop at The Open University, on Accessible Rich Internet Applications (WAI-ARIA). The workshop contained show-and-tell segments from three different speakers. Slides on Google Drive ~ https://goo.gl/SxWyRg https://twitter.com/nfreear

1. Accessible Rich Internet
Applications workshop
Friday 10 November 2017
Introduction: Nick Freear

2. Agenda
● Introduction, WAI-ARIA primer
● Show & tell A – Student forms (Steven Price, BOSS)
● Show & tell B – Interactive widgets (Nick Freear, LTI-A)
● Show & tell C – VLE-related (Tim Hunt, IT)
● Closing discussion, next steps, AOB.

3. What is WAI-ARIA?
Accessible Rich Internet Applications (WAI-ARIA)
● public drafts, ~2007~2008 - 2012
● version 1.0, recommendation, March 2014
○ .. living standard ..
● version 1.1, candidate (CR), October 2016
○ .. living standard ..
https://w3.org/TR/wai-aria
https://w3.org/TR/wai-aria-practices ..

4. Why WAI-ARIA?
● Use 1 – stop-gap extensions to HTML 4 (5) …
● Use 2 – ongoing extension / custom widgets in HTML(5.1)
○ … Javascript, Ajax, events, time-based, live-regions, forms …
● Use 3 – landmarks and structure
● Use 4 – low-risk retrospective fixes
"[It]... defines a way to make Web content and Web applications
more accessible to people with disabilities."

5. Elements of WAI-ARIA
● Roles, eg. role="slider"
● Properties,aria-*="..", aria-valuenow="2.5"
● States, aria-*="..", aria-disabled="true"
● Tabindex, tabindex="0"
● Javascript
● Host markup – HTML, SVG … (DOM)
… explicit versus implicit ...

6. Example 1
<span class="search-btn">Search</span> ✘
<span role="button" tabindex="0">Search</span> ✔
==
<button type="">Search</button> ✔

7. <span class="search-btn">Search</span> ✘
var a11y_fixes = {
".search-btn": {
role: "button",
tabindex: 0
},
".btngroup a[ href *= delete ]": {
"aria-label": "Delete" // …
}
};
Retrospective
fixes
HTML
+
Javascript

8. Show & tell A ~ student forms
● Steven Price, Student Services / BOSS
● Mode ~ slide presentation
● Slides ~ https://goo.gl/jbuCUN

9. Show & tell B ~ interactive widgets
<div class="mejs-time-rail oup-mejs-widget" style="width: 648px;"> ...
<span class="mejs-time-current" style="width: 21.77px;"></span>
<span class="mejs-time-handle"
role="slider"
aria-valuenow="1.298"
aria-valuetext="00:01"
aria-valuemin="0" aria-valuemax="38.647"
aria-label="Seek bar"
tabindex="0"
style="left: 16.77px;" ></span>
</div>
● Nick Freear, LTI-Academic

10. Interactive widgets (continued)
HTML5 audio/video API ~ "progress" event
Javascript:
media.addEventListener('progress', function (e) {
player.setProgressRail(e);
player.setCurrentRail(e);
}, false);

11. Show & tell C ~ VLE-related
● Tim Hunt, IT,
● Mode ~ live demo of VLE pages, with code "inspection",
● A224-17J course home-page,
● A224-17J content page,
● "Study Home" ~
https://learn2.open.ac.uk/course/view.php?id=206222 ,

14. JAWS screen reader crib sheet
● Go to next heading –– H
● Show list of headings –– Insert + F6
● Got to next heading of level [1-6] –– 1 - 6
● Go to next landmark/region –– R
● Go to main content region –– Q
● Elements list (buttons, frames ..) –– Insert + F3
https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts

15. OU Links
● SeGA ~ https://learn3.open.ac.uk/course/view.php?name=ACCESSIBILITY
● http://www.open.ac.uk/about/web-standards/standards/accessibility-standards
/accessibility
● http://www.open.ac.uk/students/charter/essential-documents/open-university-
student-accessibility-policy (NEW!)