Your SlideShare is downloading. ×
0
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Moodle Accessibility Hackfest '07
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Moodle Accessibility Hackfest '07

538

Published on

Presentation & demonstration to Moodle core developers at a hackfest, at the 2007 UK Moodlemoot conference, Open University campus, Milton Keynes. …

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
538
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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&apos;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 &amp; 2 </li></ul><ul><li>Do NOT jump on apparent easy fixes – eg TITLE </li></ul><ul><li>“Too much accessibility” </li></ul>
  • 3. Worrying code <ul><li>✘ &lt;img... alt= &amp;quot; Text &amp;quot; title= &amp;quot;Text&amp;quot; /&gt; </li></ul><ul><li>✔ &lt;img... alt=&amp;quot;Text&amp;quot; /&gt; </li></ul><ul><li>(✔) &lt;a title=&amp;quot;Text&amp;quot;&gt;&lt;img... alt=&amp;quot;Text&amp;quot; /&gt;&lt;/a&gt; </li></ul><ul><li>✘ &lt;input type=&amp;quot;radio&amp;quot;... alt=&amp;quot;Text&amp;quot; /&gt; (conform.) </li></ul><ul><li>✔ &lt;input type=&amp;quot;radio&amp;quot; id=&amp;quot;r&amp;quot;/&gt;&lt;label for=&amp;quot;r&amp;quot;&gt;Text&lt;/l </li></ul><ul><li>✔ &lt;input type=&amp;quot;image&amp;quot; src=&amp;quot;...&amp;quot; alt=&amp;quot;Text&amp;quot; /&gt; </li></ul><ul><li>✘ &lt;a onclick=&amp;quot;this.target=...&amp;quot; &gt;...&lt;/a&gt; (Strict) </li></ul>
  • 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 &apos;onclick&apos; – test </li></ul><ul><li>Do use style sheets, media=&apos;screen&apos; </li></ul><ul><li>Usually use &apos;virtual buffer&apos; – 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&apos;t use screen readers – screen magnifier with audio </li></ul>
  • 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-&gt;content-&gt;text .= &amp;quot;&lt;ul class=&apos;inline-list&apos;&gt;&amp;quot;; </li></ul><ul><li>foreach ($etags as $tag) { </li></ul><ul><li>$this-&gt;content-&gt;text .= &apos;&lt;li&gt;&lt;a href=&amp;quot;&apos; .$link. &apos;&amp;quot; ... &gt;&apos; .$tag-&gt;name. &apos;&lt;/a&gt;&lt;/li&gt; &apos; ; </li></ul><ul><li>} </li></ul><ul><li>$this-&gt;content-&gt;text .= &amp;quot;&lt;/ul&gt;&amp;quot;; </li></ul>
  • 6. Code pattern 2: accesshide <ul><li>Prefer visible text; NOT for links – see &apos;skip link&apos; 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 ... &lt;td class=&amp;quot;day&amp;quot;&gt;26&lt;/td&gt; </li></ul><ul><li>&lt;td class=&amp;quot;day today &amp;quot;&gt; </li></ul><ul><li>&lt;span class=&amp;quot;accesshide&amp;quot;&gt;Today Friday, 27 April &lt;/span&gt; </li></ul><ul><li>&lt;a onmouseover=&amp;quot;return overlib(.. &apos;Today Friday, 27 April&apos;)&amp;quot; ..&gt;27&lt;/a&gt; </li></ul><ul><li>&lt;/td&gt; ... </li></ul>
  • 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. 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. 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. Todo <ul><li>&apos;onchange&apos; 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-&gt;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. Contacts <ul><li>Dr Nick Freear , Technical Developer, Learning &amp; 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>

×