Moodle Accessibility Hackfest '07

747 views

Published on

Presentation & demonstration to Moodle core developers at a hackfest, at the 2007 UK Moodlemoot conference, Open University campus, Milton Keynes.
Co-presented with Dr. Chetz Colwell, also of the Open University.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
747
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Moodle Accessibility Hackfest '07

  1. 1. Accessibility demonstration <ul><li>Hackfest developer notes </li></ul><ul><li>23 October 2007 </li></ul><ul><li>Dr Nick Freear </li></ul><ul><li>Dr Chetz Colwell </li></ul>
  2. 2. Top tips <ul><li>Experiment with a variety of assistive technology </li></ul><ul><li>Design for all (a variety) users, NOT one AT </li></ul><ul><li>Don't jump to conclusions about users or their AT – some have multiple disabilities, use non-mainstream AT </li></ul><ul><li>Know your limitations, discuss ideas with others including experts - TALK </li></ul><ul><li>Evaluate solutions with real users, AT, browsers (ask expert) </li></ul><ul><li>Understand principles behind guidelines, WCAG 1 & 2 </li></ul><ul><li>Do NOT jump on apparent easy fixes – eg TITLE </li></ul><ul><li>“Too much accessibility” </li></ul>
  3. 3. Worrying code <ul><li>✘ <img... alt= &quot; Text &quot; title= &quot;Text&quot; /> </li></ul><ul><li>✔ <img... alt=&quot;Text&quot; /> </li></ul><ul><li>(✔) <a title=&quot;Text&quot;><img... alt=&quot;Text&quot; /></a> </li></ul><ul><li>✘ <input type=&quot;radio&quot;... alt=&quot;Text&quot; /> (conform.) </li></ul><ul><li>✔ <input type=&quot;radio&quot; id=&quot;r&quot;/><label for=&quot;r&quot;>Text</l </li></ul><ul><li>✔ <input type=&quot;image&quot; src=&quot;...&quot; alt=&quot;Text&quot; /> </li></ul><ul><li>✘ <a onclick=&quot;this.target=...&quot; >...</a> (Strict) </li></ul>
  4. 4. Screen readers <ul><li>Accessibility – not just for screen readers, but ... </li></ul><ul><li>Do NOT request pages directly, via browser (cf. audio browser) </li></ul><ul><li>Do work with some Javascript, including 'onclick' – test </li></ul><ul><li>Do use style sheets, media='screen' </li></ul><ul><li>Usually use 'virtual buffer' – script/AJAX problems </li></ul><ul><li>Are keyboard-only, many shortcuts including ... </li></ul><ul><li>Jump headings, paras, lists, edit boxes - semantics! </li></ul><ul><li>Often do NOT speak TITLE at default verbosity </li></ul><ul><li>Are as varied/ quirky as Web browsers! </li></ul><ul><li>Not all screen reader users are blind (dyslexia ...) </li></ul><ul><li>Many low-vision users don't use screen readers – screen magnifier with audio </li></ul>
  5. 5. Code pattern 1: unlist, inline-list <ul><li>Moodle contains lots of lists – use appropriate markup </li></ul><ul><li>Example: blocks/blog_tags </li></ul><ul><li>$this->content->text .= &quot;<ul class='inline-list'>&quot;; </li></ul><ul><li>foreach ($etags as $tag) { </li></ul><ul><li>$this->content->text .= '<li><a href=&quot;' .$link. '&quot; ... >' .$tag->name. '</a></li> ' ; </li></ul><ul><li>} </li></ul><ul><li>$this->content->text .= &quot;</ul>&quot;; </li></ul>
  6. 6. Code pattern 2: accesshide <ul><li>Prefer visible text; NOT for links – see 'skip link' pattern </li></ul><ul><li>CSS class for text for screen readers but not visual users. Provides context in place of colour, bold, other styling (WCAG1: G2). </li></ul><ul><li>Difficulty: tricky – text in title | Available: Moodle 1.6 2006 </li></ul><ul><li>Theme/standard: .accesshide { </li></ul><ul><li>position: absolute; </li></ul><ul><li>top: -1000px; </li></ul><ul><li>} </li></ul><ul><li>Weblib: function get_accesshide() </li></ul><ul><li>Example: calendar/lib.php ... <td class=&quot;day&quot;>26</td> </li></ul><ul><li><td class=&quot;day today &quot;> </li></ul><ul><li><span class=&quot;accesshide&quot;>Today Friday, 27 April </span> </li></ul><ul><li><a onmouseover=&quot;return overlib(.. 'Today Friday, 27 April')&quot; ..>27</a> </li></ul><ul><li></td> ... </li></ul>
  7. 7. Code pattern 3: rarrow, larrow <ul><li>Requires accompanying text </li></ul><ul><li>Weblib: function check_theme_arrows() </li></ul><ul><li>function link_arrow_right() </li></ul><ul><li>function link_arrow_left() </li></ul><ul><li>function get_separator() // Breadcrumbs </li></ul><ul><li>Theme/standard: </li></ul><ul><li>.arrow, .sep { </li></ul><ul><li>font-family: Arial,sans-serif; </li></ul><ul><li>} </li></ul>
  8. 8. Code pattern 4: skip link <ul><li>Prefer links, including skip links to be visible, but ... </li></ul><ul><li>Option 1, CSS: </li></ul><ul><li>a.skip { color: white; } </li></ul><ul><li>a.skip:focus, a.skip:active { color: black; } </li></ul><ul><li>Option 2: </li></ul><ul><li>a:skip { </li></ul><ul><li>position: absolute; top: -1000em; </li></ul><ul><li>} </li></ul><ul><li>a.skip:focus, a.skip:active { position: static; } </li></ul><ul><li>Plus: .skip-to { display: block; height: 1px; } </li></ul>
  9. 9. ARIA and Moodle <ul><li>Acessible Rich Internet Applications – W3C draft </li></ul><ul><li>Builds on X/HTML, semantic design </li></ul><ul><li>For composite form widgets, eg. treeview </li></ul><ul><li>For scripting/AJAX </li></ul><ul><li>Role, state + </li></ul><ul><li>Of limited use – only some of most recent screen readers support. </li></ul>
  10. 10. Todo <ul><li>'onchange' popup menus – not keyboard accessible </li></ul><ul><li>Compact forms, eg. search – icon label not hidden label </li></ul><ul><li>Text editor – replace/ improve ? </li></ul><ul><li>Text editor – switch off buttons by default </li></ul><ul><li>Forms – use QuickForms OR add label markup </li></ul><ul><li>Course formats – table-less </li></ul><ul><li>Review USER->screenreader flag </li></ul><ul><li>Detailed release notes, documentation </li></ul><ul><li>Content – guidelines, limitations ? </li></ul><ul><li>http://docs.moodle.org/en/Accessibility_notes </li></ul>
  11. 11. Contacts <ul><li>Dr Nick Freear , Technical Developer, Learning & Teaching Solutions, [email_address] </li></ul><ul><li>Dr Chetz Colwell , Project Officer (AEM), Institute of Educational Technology, [email_address] </li></ul><ul><li>Pl ug! Presentation on evaluating Moodle with disabled and non-disabled students on Thursday @ 11am </li></ul>

×