|
|
| (38 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: |
|
| |
|
| | [https://docs.moodle.org/dev/Accessibility "Accessibility in Moodle"] |
|
| |
|
| == Code pattern 1: unlist & inline-list ==
| | The previous version of this document can be seen [https://docs.moodle.org/dev/index.php?title=Accessibility_notes&oldid=49247 in the history] |
| 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>
| |
| | |
| | |
| == Code pattern 2: accesshide ==
| |
| CSS class for text 'seen' by screen readers but not visual users.
| |
| | |
| Difficulty: '''tricky''' – mirror text in <code>title</code>.<br />
| |
| Available: Moodle 1.6 March 2006 (30-May-06: MDL-5628 IE6 Farsi RTL language)<br />
| |
| 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>
| |
| | |
| | |
| == 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.<br />
| |
| * 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 .
| |
| | |
| | |
| | |
| [[Category:Accessibility]]
| |
