Accessibility demonstrationHackfest developer notes23 October 2007Dr Nick FreearDr Chetz Colwell

Top tips• Experiment with a variety of assistive technology• Design for all (a variety) users, NOT one AT• Don't jump to conclusions about users or their AT –

some have multiple disabilities, use non-mainstream AT

• Know your limitations, discuss ideas with others including experts - TALK

• Evaluate solutions with real users, AT, browsers (ask expert)

• Understand principles behind guidelines, WCAG 1 & 2• Do NOT jump on apparent easy fixes – eg TITLE• “Too much accessibility”

Worrying code• ✘ <img... alt="Text" title="Text" />• ✔ <img... alt="Text" />• (✔) <a title="Text"><img... alt="Text" /></a>

• ✘ <input type="radio"... alt="Text" /> (conform.)

• ✔ <input type="radio" id="r"/><label for="r">Text</l• ✔ <input type="image" src="..." alt="Text" />

• ✘ <a onclick="this.target=..." >...</a> (Strict)

Screen readers• Accessibility – not just for screen readers, but ...• Do NOT request pages directly, via browser (cf. audio

browser)• Do work with some Javascript, including 'onclick' – test• Do use style sheets, media='screen'• Usually use 'virtual buffer' – script/AJAX problems• Are keyboard-only, many shortcuts including ...• Jump headings, paras, lists, edit boxes - semantics!• Often do NOT speak TITLE at default verbosity• Are as varied/ quirky as Web browsers!• Not all screen reader users are blind (dyslexia ...)• Many low-vision users don't use screen readers –

screen magnifier with audio

Code pattern 1: unlist, inline-list• Moodle contains lots of lists – use appropriate markup• Example: blocks/blog_tags

• $this->content->text .= "<ul class='inline-list'>";• foreach ($etags as $tag) {• $this->content->text .= '<li><a href="'.$link.'" ...

>'.$tag->name.'</a></li> ';• }• $this->content->text .= "</ul>";

Code pattern 2: accesshide• Prefer visible text; NOT for links – see 'skip link' pattern• CSS class for text for screen readers but not visual users.

Provides context in place of colour, bold, other styling (WCAG1: G2).

• Difficulty: tricky – text in title | Available: Moodle 1.6 2006

• Theme/standard: .accesshide {

• position: absolute;

• top: -1000px;

• }• Weblib: function get_accesshide()

• Example: calendar/lib.php ... <td class="day">26</td>• <td class="day today ">• <span class="accesshide">Today Friday, 27 April </span>• <a onmouseover="return overlib(.. 'Today Friday, 27 April')"

..>27</a>• </td> ...

Code pattern 3: rarrow, larrow• Requires accompanying text

• Weblib: function check_theme_arrows()• function link_arrow_right()• function link_arrow_left()• function get_separator() // Breadcrumbs• Theme/standard:

• .arrow, .sep {• font-family: Arial,sans-serif;• }

Code pattern 4: skip link

• Prefer links, including skip links to be visible, but ...

• Option 1, CSS:• a.skip { color: white; }

• a.skip:focus, a.skip:active { color: black; }

• Option 2:• a:skip {

• position: absolute; top: -1000em;

• }

• a.skip:focus, a.skip:active { position: static; }

• Plus: .skip-to { display: block; height: 1px; }

ARIA and Moodle• Acessible Rich Internet Applications – W3C draft• Builds on X/HTML, semantic design• For composite form widgets, eg. treeview• For scripting/AJAX• Role, state +

• Of limited use – only some of most recent screen readers support.

Todo• 'onchange' popup menus – not keyboard accessible• Compact forms, eg. search – icon label not hidden label• Text editor – replace/ improve ?• Text editor – switch off buttons by default• Forms – use QuickForms OR add label markup• Course formats – table-less• Review USER->screenreader flag• Detailed release notes, documentation

• Content – guidelines, limitations ?

• http://docs.moodle.org/en/Accessibility_notes

Contacts• Dr Nick Freear, Technical Developer, Learning &

Teaching Solutions, N.D.Freear@open.ac.uk

• Dr Chetz Colwell, Project Officer (AEM), Institute of Educational Technology, C.Collwell@open.ac.uk

Plug! Presentation on evaluating Moodle with disabled and non-disabled students on Thursday @ 11am