Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Accessible Rich Internet Applications workshop at The Open University 2017

124 vues

Publié le

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

Publié dans : Formation
  • Soyez le premier à aimer ceci

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!)

×