[TYPO3-hci] My 4.1 proposal - again

[JoH asenau]

> This is totally CSS-styled. Actually, you don't even need the list
> items (LI), you can do this with pure Anchor-tags and via
> background-pictures
> and css-classes. Although you should wrap it in LI-tags so it is more
> "accessible" I guess than just a bunch of anchors.

Well - the rule says: Separate links with more than whitespace.
Means: The screenreader needs some structural tags to recognize this
whitespace and transform it into a pause. Without those tags all the
different link texts would sound as if they were just one big sentence.

> So the "tablemenu" of the attached picture looks like this in the
> markup, which is pretty darn clean:
>
> <div id="tablemenu" onmouseout="hideTableMenu(event, this);">
>      <a class="checked" href="javascript:void(0);"
> id="tablemenu_name">Display Client Name</a>
>      <a class="checked" href="javascript:void(0);"
> id="tablemenu_phone">Display Phone Number</a>
>      <a class="checked" href="javascript:void(0);"
> id="tablemenu_email">Display Email</a>
>      <a class="checked" href="javascript:void(0);"
> id="tablemenu_licenses_used">Display Licenses in Use</a>
>      <a class="checked" href="javascript:void(0);"
> id="tablemenu_licenses_total">Display Total Licenses</a>
> </div>

BTW: In this case even a real <table> could be useful, since you can use
invisible <th> tags to give the screenreader users additional information
about the menu that will be repeated for each item.

<table>
<tr>
    <th></th>
    <th id="menutitel">Main menu section 1.</th>
</tr>
<tr>
    <th id="pages">Click here if you want to edit a</th>
    <td headers="menutitel pages">
        <a class="checked" href="javascript:void(0);"
        id="tablemenu_name">Page</a>
    </td>
</tr>
<tr>
    <th id="list">Click here if you want to see the record</th>
    <td headers="menutitel list">
        <a class="checked" href="javascript:void(0);"
        id="tablemenu_name">List</a>
    </td>
</tr>
</table>

This would read:

Main menu section 1. Click here if you want to edit a _page_.
Main menu section 1. Click here if you want to see the record _list_.

With page and list having another sound, to clarify these are the links.

You can insert a new <th> row for each menu section and this way the user
will always know his current "position" in the menu.

Just my 2 accessibility cents ...

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
openBC: http://www.cybercraft.de
T3 cookbook: http://www.typo3experts.com