Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Accessibility notes

From MoodleDocs
Revision as of 12:12, 23 September 2007 by Nick Freear (talk | contribs) (→‎Issues remaining: , added section 'Guidelines')

These are DRAFT notes on what CSS classes, PHP functions and the so on have been added to Moodle 1.6 onwards to aid accessibility. They can be seen as design patterns, techniques, guidelines, and perhaps best practice(?) Based on a workshop at Moodlemoot 2007, Canada Lots for me to add/edit! Comments welcome! Nick Freear 11:38, 28 August 2007 (CDT)


Guidelines

Most of the relevant guidelines and standards are published by the Worldwide Web Consortium (W3C), including the Web Accessibility Initiative (WAI).



Issues remaining

A todo list, for Moodle 2.0?

  • QuickForm fixes: review, complete.
  • Old forms: replace remaining with QuickForms.
  • Course formats: replace layout tables, as per 'weekscss' [https://tracker.moodle.org/browse/MDL-9306 MDL-9306].
  • Layout tables: remove remaining.
  • Text editor: fix remaining issues/ replace.
  • ...
  • Language packs: fix XHTML, semantics.
  • Automated testing?
  • Documentation.

Issues fixed

Note, some of the headline items here could be added to the release notes. See also Release Notes | Old releases | Roadmap.


Moodle 1.9 Beta

Released: 14th August 2007


Moodle 1.8

Released: 31st March 2007

Following more expert evaluation, the Open University put together a comprehensive Specification listing what needed fixing in parts of core Moodle and modules. Moodle.com undertook what were judged to be high priority items from this list - see meta-bug [https://tracker.moodle.org/browse/MDL-7396 MDL-7396] (45 sub-tasks, 3 dependencies). Here is a summary...


Moodle 1.7

Released: 7th November 2006


Moodle 1.6

Released: 19th June 2006

Accessibility proposal from Open University identified problems and some solutions. Note, due to time constraints we did not evaluate or modify modules, the content of most side blocks and so on - most changes were to core.

  • ALT text: fixed for side-blocks, some themes, and in core.
  • Standard theme & other 14 themes: removed layout table(s), <h1> used to markup headings (some to do).
  • Breadcrumb trail: marked up as a list, with a heading (hidden by default for visual user), and graphic for breadcrumb separator.
  • Side blocks: heading marked up as <h2>, added 'skip block' links (needs review).
  • Side blocks: removed nested layout tables, started using list markup (activity modules, admin, course list, participants, main menu, social activities - list render in print_side_block; online users).
  • Calendar: fixed data table headers, summary, abbreviations, non-visual indication of 'today', next/previous links.
  • Calendar style: improved colour contrast in standard theme for event backgrounds, links, weekend colours.
  • Weekscss course format: new format plug-in that does not use layout tables, based on the 'weeks' course format.


Moodle 1.5

Released: 5th June 2005

Assistive technology

Technology to enable those with disabilities to use a computer can be categorised in terms of their distance from the user. For example:

  • Physical layer: specialist pointing devices, mice, joy-sticks, keyboards.
  • Operating system layer: Mac Voiceover, Windows Narrator ...
  • System specialisation layer: technology not part of the OS that tries to work with all software tools.
    • Screen magnification.
    • Screen readers: JAWS, Window-Eyes, Thunder/WebbIE (speech or braille).
    • Speech recognition: Dragon Naturally Speaking ...
  • Software tool layer: audio browsers, plug-ins for Web browsers, word processors.
  • Application layer: technology integrated in a web site, eg. Browsealoud, style sheet switching/ high-contrast, font size (bad?); ?
  • Document layer: tagged PDFs, well-structured semantic PDFs, Word documents, HTML documents.

What JAWS says

Screen readers are assistive software that verbalise (via synthesised speech, braille display or both) text displayed on a computer screen from the operating system (Windows and so on) or applications (typically word processors, email software, Web browsers). JAWS (Job Access With Speech) for Windows is a popular screen reader from Freedom Scientific; competitors include Window-Eyes from GW Micro and SuperNova/HAL from Dolphin.

Screen readers can often be configured/scripted for different levels of verbosity, different applications and so on. However, most users concentrate on learning the keyboard shortcuts and don't know or don't have the confidence to change the configuration. Expert evaluation therefore assumes that the default configuration is used.

Below are examples of what the JAWS for Windows 7 screen reader verbalises for good and bad markup (HTML).

Forms

JAWS and other screen readers have a forms mode to allow the user to input text in forms in a Web browser.

Accessibility design patterns

Pattern 1: unlist, inline-list

Cascading style sheet (CSS) classes to remove default list-styles from HTML lists. Class inline-list also makes a list horizontal (at present only in side blocks).

Difficulty: easy I hope. Please use!
Available: ? Moodle 1.8 December 2006 (MDL-6838, nested lists are safe).
Definition: theme/standard/styles_layout.css 

.unlist, .inline-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sideblock .content .inline-list li {
  display: inline;
}

Use Count: 5+ (12 including deprecated list)
Example: blocks/../block_blog_tags.php 

<ul class="inline-list">
  <li><a .. class=" s20">Accessibility</a></li>
  <li><a .. class=" s10">Test</a></li> 
</ul>


Pattern 2: accesshide

CSS class for text to be 'seen' by screen readers but not visual users.

Text classed as accesshide provides context for a non-sighted user, where the context or meaning would only otherwise be clear from formatting (WCAG Guideline 2, don't rely on colour alone), for example coloured text, or a silent character (TODO: link). The example below shows how additional text is provided to differentiate today from the other days in the Moodle calendar - visual differentiation is provided in the standard theme by a black border, and the accesshide text is duplicated, in this case using Javascript (TODO: modify code! Javascript should use the title attribute.)

Please, use cautiously — most necessary uses have already been identified. 

.accesshide {
  position: absolute;
  top: -1000px;
}
  • Use Count: 29 !
  • 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>
<td class="weekend day">28</td>
...

Pattern 3: left, right arrows

PHP variables holding 'silent' representations of right and left arrows (example ► &#x25BA;), to avoid misuse of characters including "greater than" >, "right angle quote" ». The variables are initialised by the function weblib.php: check_theme_arrows, unless they have first been defined in the theme config.php.

  • Difficulty: medium. Careful with fonts.
  • Available: Moodle 1.7
  • Functions in lib/weblib.php
function check_theme_arrows()
function link_arrow_right($text, $url='', $accesshide=false, $addclass='')
function link_arrow_left($text, $url='', $accesshide=false, $addclass='')
function get_separator()

$THEME->rarrow
$THEME->larrow
  • Associated CSS in theme/standard/styles_fonts.css
.arrow, .arrow_button input {
  font-family: Arial,Helvetica,Courier,'Arial Unicode MS',sans-serif;
}
  • Use count: ?
  • Example PHP: weblib.php function print_navigation - breadcrumb trail.
  • Also: Weekscss course format, Moodleforms .
Retrieved from "https://docs.moodle.org/dev/index.php?title=Accessibility_notes&oldid=6973"
Powered by MediaWiki