O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Accessible Rich Internet Applications workshop at The Open University 2017

128 visualizações

Publicada em

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

Publicada em: Educação
  • Seja a primeira pessoa a gostar disto

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

×