|
|
| (32 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| <p class="note">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(?)
| | {{obsolete}} |
|
| |
|
| Based on a workshop at [http://moodlemoot.ca Moodlemoot 2007, Canada]
| | This page has been replaced because the content was no longer applicable to the current version of Moodle. |
| Lots for me to add/edit! Comments welcome!
| |
| [[User:Nick Freear|Nick Freear]] 11:38, 28 August 2007 (CDT)
| |
| </p>
| |
|
| |
|
| | Current documentation can be found here: |
|
| |
|
| == Issues fixed ==
| | [https://docs.moodle.org/dev/Accessibility "Accessibility in Moodle"] |
| 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 ===
| | The previous version of this document can be seen [https://docs.moodle.org/dev/index.php?title=Accessibility_notes&oldid=49247 in the history] |
| Released: 14th August 2007
| |
| | |
| | |
| === Moodle 1.8 ===
| |
| Released: 31st March 2007
| |
| | |
| | |
| === 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 for visual user).
| |
| * Side blocks: heading marked up as <h2>, added 'skip block' links (needs review).
| |
| * Side blocks: removed nested layout tables, started using list markup (main menu, online users, list render in print_side_block).
| |
| * 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 ==
| |
| | |
| Examples of what the JAWS screen reader verbalises for good and bad markup.
| |
| | |
| | |
| == Accessibility design patterns ==
| |
| | |
| === Pattern 1: unlist, inline-list ===
| |
| | |
| Cascading style sheet (CSS) classes to remove default list-styles from HTML lists.
| |
| Class <code>inline-list</code> also makes a list horizontal (at present only in side blocks).
| |
| | |
| Difficulty: '''easy''' I hope. Please use!<br />
| |
| Available: ? Moodle 1.8 December 2006 (MDL-6838, nested lists are safe).<br />
| |
| Definition: <code>theme/standard/styles_layout.css</code>
| |
| .unlist, .inline-list {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| .sideblock .content .inline-list li {
| |
| display: inline;
| |
| }
| |
| | |
| Use Count: 5+ (12 including deprecated <code>list</code>)<br />
| |
| Example: <code>blocks/../block_blog_tags.php</code>
| |
| <nowiki><ul class="inline-list">
| |
| <li><a .. class=" s20">Accessibility</a></li>
| |
| <li><a .. class=" s10">Test</a></li>
| |
| </ul></nowiki>
| |
| | |
| | |
| === Pattern 2: accesshide === | |
| | |
| CSS class for text to be 'seen' by screen readers but not visual users.
| |
| | |
| Text classed as <code>accesshide</code> provides context for a non-sighted user, where the context or meaning would otherwise be clear from formatting, 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 <code>accesshide</code> 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.
| |
| | |
| * Difficulty: '''tricky''' — please put the same text in an adjacent/parent <code>title</code>.
| |
| * Available: Moodle 1.6 March 2006 (30-May-06: MDL-5628 <acronym title="Internet Explorer">IE</acronym>6 Farsi <acronym title="Right-to-left">RTL </acronym>language)
| |
| * Definition: <code>theme/standard/styles_layout.css</code>
| |
| .accesshide {
| |
| position: absolute;
| |
| top: -1000px;
| |
| }
| |
| | |
| * Use Count: 29 !<br />
| |
| * Example: <code>calendar/lib.php</code>
| |
| <nowiki>...
| |
| <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>
| |
| ...</nowiki>
| |
| | |
| | |
| === Pattern 3: left, right arrows ===
| |
| | |
| PHP variables holding 'silent' representations of right and left arrows (example ► <code>&#x25BA;</code>), 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.<br />
| |
| * Available: Moodle 1.7
| |
| * Functions in <code>lib/weblib.php</code>
| |
| <nowiki>
| |
| 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 </nowiki>
| |
| | |
| * Associated CSS in <code>theme/standard/styles_fonts.css</code>
| |
| .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 .
| |
| | |
| | |
| | |
| [[Category:Accessibility]]
| |
