What is the best practices for labeling a form like the permissions page
Well, there are labels for pages like the permission page - /admin/user/permissions
I was looking over this critique from Juice Studio about Drupal's Accessibility.
And labels are there, but it's all code, so really not sure how useful it is. We'd probably want each box to be populated by a label with the role instead of the number of the role & so that a screen reader could properly explain what a particular checkbox is about:
<tr class="odd"><td class="permission"><div class="form-item">
Display Drupal links
<div class="description">Provide Drupal.org links in the administration menu.</div>
</div>
</td><td class="checkbox" title="anonymous user : display drupal links"><div class="form-item" id="edit-1-display-drupal-links-wrapper">
<label class="option" for="edit-1-display-drupal-links"><input type="checkbox" name="1[display drupal links]" id="edit-1-display-drupal-links" value="display drupal links" class="form-checkbox" /> </label>
</div>
</td><td class="checkbox" title="authenticated user : display drupal links"><div class="form-item" id="edit-2-display-drupal-links-wrapper">
<label class="option" for="edit-2-display-drupal-links"><input type="checkbox" name="2[display drupal links]" id="edit-2-display-drupal-links" value="display drupal links" class="form-checkbox" /> </label>
</div>
</td><td class="checkbox" title="admin : display drupal links"><div class="form-item" id="edit-3-display-drupal-links-wrapper">
<label class="option" for="edit-3-display-drupal-links"><input type="checkbox" name="3[display drupal links]" id="edit-3-display-drupal-links" value="display drupal links" checked="checked" class="form-checkbox" /> </label>
</div>
</td><td class="checkbox" title="editor : display drupal links"><div class="form-item" id="edit-4-display-drupal-links-wrapper">
<label class="option" for="edit-4-display-drupal-links"><input type="checkbox" name="4[display drupal links]" id="edit-4-display-drupal-links" value="display drupal links" class="form-checkbox" /> </label>
</div>
</td> </tr>Is there a better way to do this though? It would be a pretty massive list to navigate with a screen reader.
Groups:
Login to post comments
Screenshot Might be useful
Thought I'd put in a screen-shot as it may not be clear which form I'm describing, in this case it's /admin/user/permissions
Mike
OpenConcept | CLF 2.0 | Podcasting
How about a combination of WAI-ARIA's Grid and Checkbox?
For several weeks, I have been thinking about your post a lot. After doing some research and a lot of digging, how about a combination of WAI-ARIA's Grid and Checkbox roles and/or properties? They are something we should take a look at in order to make D7's permissions page more accessible.
Because the permissions page used a semantic markup combination of table and checkbox, adding Grid and Checkbox roles/properties would make more sense. Therefore, I suggest we take a look at the following links as a starting point:
Complex Grid Examples (a must-read; very informational and helpful)
http://wiki.codetalks.org/wiki/index.php/Complex_Grid_Examples
Grid
http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases#Grid
Checkbox
http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases#Checkbox
Thanks,
Mike
Trying to follow codetalks
Ok, so I can see how this could potentially be useful - I've tried to mark it up here based on http://test.cita.uiuc.edu/aria/grid/grid1.php
<div class="clearfix">
<form action="/admin/user/permissions" accept-charset="UTF-8" method="post" id="user-admin-perm"><div>
<div class="compact-link"><a href="/admin/compact/on?destination=admin%2Fuser%2Fpermissions" title="Compress layout by hiding descriptions.">Hide descriptions</a></div>
<table id="permissions" class="sticky-enabled" role="grid" aria-labelledby="grid1_label" >
<thead><tr><th>Permission</th><th class="checkbox" id="anonymous user">anonymous user</th><th class="checkbox" id="authenticated user">authenticated user</th><th class="checkbox" id="admin">admin</th><th class="checkbox" id="editor">editor</th></tr></thead>
<tbody>
<tr class="odd"><td class="module" id="module-admin_menu" colspan="21">Administration menu</td> </tr>
<tr class="even" role="gridcell">
<td class="permission">
<div class="form-item" id="edit-access-administration-menu-wrapper">Access administration menu</div>
</td>
<td class="checkbox" title="anonymous user : access administration menu" headers="anonymous user"><div class="form-item" id="edit-1-access-administration-menu-wrapper">
<label class="option" for="edit-1-access-administration-menu"><input type="checkbox" name="1[access administration menu]" id="edit-1-access-administration-menu" value="access administration menu" class="form-checkbox" /> </label>
</div></td>
<td class="checkbox" title="authenticated user : access administration menu" headers="authenticated user"><div class="form-item" id="edit-2-access-administration-menu-wrapper">
<label class="option" for="edit-2-access-administration-menu"><input type="checkbox" name="2[access administration menu]" id="edit-2-access-administration-menu" value="access administration menu" class="form-checkbox" /> </label>
</div></td>
<td class="checkbox" title="admin : access administration menu" headers="admin"><div class="form-item" id="edit-3-access-administration-menu-wrapper">
<label class="option" for="edit-3-access-administration-menu"><input type="checkbox" name="3[access administration menu]" id="edit-3-access-administration-menu" value="access administration menu" checked="checked" class="form-checkbox" /> </label>
</div></td>
<td class="checkbox" title="editor : access administration menu" headers="editor"><div class="form-item" id="edit-4-access-administration-menu-wrapper">
<label class="option" for="edit-4-access-administration-menu"><input type="checkbox" name="4[access administration menu]" id="edit-4-access-administration-menu" value="access administration menu" class="form-checkbox" /> </label>
</div></td>
</tr>
This isn't very clean, but I want to be clear that this is the direction we're going. I don't see the checkboxes adding much as they are all about styled
Mike
OpenConcept | CLF 2.0 | Podcasting