Development:Accessibility notes: Difference between revisions
Nick Freear (talk | contribs) (1st outline) |
Nick Freear (talk | contribs) |
||
Line 33: | Line 33: | ||
== Code pattern 2: accesshide == | == Code pattern 2: accesshide == | ||
CSS class for text 'seen' by screen readers but not visual users. | CSS class for text to be 'seen' by screen readers but not visual users. | ||
Difficulty: '''tricky''' & | 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.) | ||
Available: Moodle 1.6 March 2006 (30-May-06: MDL-5628 | |||
Definition: <code>theme/standard/styles_layout.css</code> | 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 { | .accesshide { | ||
position: absolute; | position: absolute; | ||
Line 43: | Line 47: | ||
} | } | ||
Use Count: 29 !<br /> | * Use Count: 29 !<br /> | ||
Example: <code>calendar/lib.php</code> | * Example: <code>calendar/lib.php</code> | ||
<nowiki>... | <nowiki>... | ||
<td class="day">26</td> | <td class="day">26</td> | ||
<td class="day today "> | <td class="day today"> | ||
<span class="accesshide">Today Friday, 27 April </span> | <span class="accesshide">Today Friday, 27 April </span> | ||
<a onmouseover="return overlib(.. 'Today Friday, 27 April')" ..>27</a> | <a onmouseover="return overlib(.. 'Today Friday, 27 April')" ..>27</a> | ||
Line 53: | Line 57: | ||
<td class="weekend day">28</td> | <td class="weekend day">28</td> | ||
...</nowiki> | ...</nowiki> | ||
== Code pattern 3: THEME->rarrow, larrow == | == Code pattern 3: THEME->rarrow, larrow == |
Revision as of 18:55, 28 August 2007
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)
Code 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>
Code 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 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 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.
- Difficulty: tricky — please put the same text in an adjacent/parent
title
. - 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:
theme/standard/styles_layout.css
.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> ...
Code pattern 3: THEME->rarrow, larrow
PHP variables holding 'silent' representations of right and left arrows (example ►), 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
- Associated CSS in theme/standard/styles_fonts.css
.breadcrumb .sep, ... { font-family: Arial,Helvetica,Courier,'Arial Unicode MS', ...; }
- Use count: ?
- Example PHP: weblib.php function print_navigation - breadcrumb trail.
- Also: Weekscss course format, Moodleforms .