Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Accessible Rich Internet Applications workshop at The Open University 2017

119 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung
  • Gehören Sie zu den Ersten, denen das gefällt!

Accessible Rich Internet Applications workshop at The Open University 2017

  1. 1. Accessible Rich Internet Applications workshop Friday 10 November 2017 Introduction: Nick Freear
  2. 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. 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. 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. 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. 6. Example 1 <span class="search-btn">Search</span> ✘ <span role="button" tabindex="0">Search</span> ✔ == <button type="">Search</button> ✔
  7. 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. 8. Show & tell A ~ student forms ● Steven Price, Student Services / BOSS ● Mode ~ slide presentation ● Slides ~ https://goo.gl/jbuCUN
  9. 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. 10. Interactive widgets (continued) HTML5 audio/video API ~ "progress" event Javascript: media.addEventListener('progress', function (e) { player.setProgressRail(e); player.setCurrentRail(e); }, false);
  11. 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 ,
  12. 12. 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
  13. 13. 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!)

×