FLUID-2961
Alison Benjamin
alison.benjamin at gmail.com
Fri Jul 10 15:33:51 UTC 2009
Hi,
Attached is a patch that addresses
http://issues.fluidproject.org/browse/FLUID-2961
The main things it does is to add a scope="col" to table headers which gives
screen reader users a better sense of where they are in a table. It also
adds a value of "remove row" to the remove row buttons.
There remains a problem of how a screen reader will be notified once a row
is successfully removed. One way this could be addressed would be by having
a popup confirmation overlay. But this is obstrusive. So if there are other
strategies for providing confirmation it would be good to hear them.
The W3C validator has a lot of complaints about the file
.../integration-demos/bspace/html/section-info-inner.html related mostly to
the use of un-unique IDs. Since these aren't related to the changes I've
made I'm sending out the patch anyway.
Thanks,
Alison
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20090710/92f45278/attachment.htm>
-------------- next part --------------
Index: section-info-inner.html
===================================================================
--- section-info-inner.html (revision 7332)
+++ section-info-inner.html (working copy)
@@ -63,6 +63,7 @@
$(".remove-btn").click(function () {
$(this).parents("tr").css("background-color", "#FFE59F").fadeOut("slow", function(){
$(this).remove();
+
});
return false;
});
@@ -75,7 +76,7 @@
$("#continue").click(function () {
hideMessage();
- return false;
+ return false;
});
$(".editInstructions a").click(function () {
@@ -91,15 +92,16 @@
return false;
};
+
var hideMessage = function () {
$("#demo-overlay").hide();
return false;
};
- var myUndoRenderer = function (that, targetContainer) {
+ var myUndoRenderer = function (that, targetContainer) { //added titles to link. must do another build of this.
var markup = "<span class='fluid-undo'>" +
- "<span class='undoContainer'><a href='#' class='undoControl'><span class='label'>Undo</span></a></span>" +
- "<span class='redoContainer'><a href='#' class='redoControl'><span class='label'>Redo</span></a></span>" +
+ "<span class='undoContainer'><a href='#' title='undo' class='undoControl'><span class='label'>Undo</span></a></span>" +
+ "<span class='redoContainer'><a href='#' title='redo' class='redoControl'><span class='label'>Redo</span></a></span>" +
"</span>";
var markupNode = $(markup);
targetContainer.append(markupNode);
@@ -119,7 +121,7 @@
<div class="portletBody">
<form target="" id="overviewForm" name="overviewForm" method="post" action="https://sakai-dev.berkeley.edu/portal/tool/1e1a969c-0c6c-426b-aaa2-9e6526385bf9/overview" enctype="application/x-www-form-urlencoded">
<div class="navIntraTool">
- <span class="currentView">Overview</span>| <a href="#" class="dummy" id="overviewForm:_idJsp8" name="overviewForm:_idJsp8">Add Sections</a>| <a href="#" class="dummy" id="overviewForm:_idJsp12" name="overviewForm:_idJsp12">Student Memberships</a>| <a href="#" class="dummy" id="overviewForm:_idJsp17" name="overviewForm:_idJsp17">Options</a>
+ <span class="currentView">Overview</span> <a href="#" class="dummy" id="overviewForm:_idJsp8" name="overviewForm:_idJsp8">Add Sections</a> <a href="#" class="dummy" id="overviewForm:_idJsp12" name="overviewForm:_idJsp12">Student Memberships</a> <a href="#" class="dummy" id="overviewForm:_idJsp17" name="overviewForm:_idJsp17">Options</a>
</div>
<table class="rosterPageHeader" summary="Roster Header">
<tbody>
@@ -138,47 +140,50 @@
<div><a href="">Don't show me this message again</a></div>
</div>
</div>
- <table id="overviewForm:sectionsTable" class="listHier sectionTable" cellpadding="0" cellspacing="0" width="100%" summary="Sections">
- <thead>
+ <table id="overviewForm:sectionsTable" class="listHier sectionTable" cellpadding="0" cellspacing="0" width="100%" summary="Sections">
+ <caption>Astronomy 7A classes at UC Berkeley.</caption>
+ <thead>
<tr>
- <th>
- <a href="#" class="dummy currentSort" id="overviewForm:sectionsTable:_idJsp49" name="overviewForm:sectionsTable:_idJsp49">Name <img src="../images/sortascending.gif" alt="Sort Ascending"/></a>
+ <th scope ="col">
+ <a href="#" class="dummy currentSort" id="overviewForm:sectionsTable:_idJsp49" name="overviewForm:sectionsTable:_idJsp49">Name of section <img src="../images/sortascending.gif" alt="Sort Ascending"/></a>
</th>
- <th>
- <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp65" name="overviewForm:sectionsTable:_idJsp65">Graduate Student
+ <th scope ="col">
+ <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp65" name="overviewForm:sectionsTable:_idJsp65">Graduate Student
<br/>
Instructor (GSIs)
</a>
</th>
- <th>
- <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp70" name="overviewForm:sectionsTable:_idJsp70">Day</a>
+ <th scope ="col">
+ <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp70" name="overviewForm:sectionsTable:_idJsp70">Day</a>
</th>
- <th>
- <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp75" name="overviewForm:sectionsTable:_idJsp75">Time</a>
+ <th scope ="col">
+ <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp75" name="overviewForm:sectionsTable:_idJsp75">Time</a>
</th>
- <th>
- <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp80" name="overviewForm:sectionsTable:_idJsp80">Location</a>
+ <th scope ="col">
+ <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp80" name="overviewForm:sectionsTable:_idJsp80">Location</a>
</th>
- <th>
- <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp85" name="overviewForm:sectionsTable:_idJsp85">Max. # of
+ <th scope ="col">
+ <a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp85" name="overviewForm:sectionsTable:_idJsp85">Max. # of
<br/>
Students
</a>
</th>
- <th>
+ <th scope ="col">
<a href="#" class="dummy notCurrentSort" id="overviewForm:sectionsTable:_idJsp89" name="overviewForm:sectionsTable:_idJsp89">Available</a>
</th>
- <th>
- Remove
+ <th scope ="col">
+ Remove table row
</th>
</tr>
</thead>
<tbody id="overviewForm:sectionsTable:tbody_element">
- <tr class="firstCategoryHeader">
+ <!-- Have commented out the following lines because it is inconsistent with the structure of the table.
+ Instead, table header "Name" has been changed to "Name of Section", see line 146.
+ <tr class="firstCategoryHeader">
<td colspan="8">
Sections
</td>
- </tr>
+ </tr> -->
<tr class="groupRow">
<td class="leftIndent">
<div class="flc-inlineEditable inlineEditable">
@@ -189,7 +194,9 @@
<!--<a href="#" class="dummy">Edit Details</a>
| -->
<a href="#" class="dummy">Assign GSIs</a>
- |
+ <!-- have removed vertical bars separating "Assign GSIs" and "Assign Students" links. This presence of this character only makes sense visually ,
+ a screen reader will read "Assign GSIs vertical bar Assign Students". Also, if we wanted to get really picky we wouldn't fill a single table cell with
+ 3 pieces of information (an inline editable area + 2 links) but this would contradict UC Berkeley's real world example-->
<a href="#" class="dummy">Assign Students</a>
</div>
</td>
@@ -236,7 +243,7 @@
3
</td>
<td class="center">
- <input class="remove-btn" value="true" type="image" src="../images/remove.png" />
+ <input class="remove-btn" value="remove row" type="image" src="../images/remove.png" />
</td>
</tr>
<tr class="groupRow">
@@ -248,7 +255,7 @@
<div class="itemAction">
<!--<a href="#" class="dummy">Edit Details</a> | -->
<a href="#" class="dummy">Assign GSIs</a>
- |
+
<a href="#" class="dummy">Assign Students</a>
</div>
</td>
@@ -283,7 +290,7 @@
0
</td>
<td class="center">
- <input class="remove-btn" value="true" type="image" src="../images/remove.png" />
+ <input class="remove-btn" value="remove row" type="image" src="../images/remove.png" />
</td>
</tr>
<tr class="groupRow">
@@ -295,7 +302,7 @@
<div class="itemAction">
<!--<a href="#" class="dummy">Edit Details</a> | -->
<a href="#" class="dummy">Assign GSIs</a>
- |
+
<a href="#" class="dummy">Assign Students</a>
</div>
</td>
@@ -330,7 +337,7 @@
n/a
</td>
<td class="center">
- <input class="remove-btn" value="true" type="image" src="../images/remove.png" />
+ <input class="remove-btn" value="remove row" type="image" src="../images/remove.png" />
</td>
</tr>
<tr class="groupRow">
@@ -342,7 +349,7 @@
<div class="itemAction">
<!--<a href="#" class="dummy">Edit Details</a> | -->
<a href="#" class="dummy">Assign GSIs</a>
- |
+
<a href="#" class="dummy">Assign Students</a>
</div>
</td>
@@ -377,7 +384,7 @@
10
</td>
<td class="center">
- <input class="remove-btn" value="true" type="image" src="../images/remove.png" />
+ <input class="remove-btn" value="remove row" type="image" src="../images/remove.png" />
</td>
</tr>
<tr class="groupRow">
@@ -389,7 +396,7 @@
<div class="itemAction">
<!--<a href="#" class="dummy">Edit Details</a> | -->
<a href="#" class="dummy">Assign GSIs</a>
- |
+
<a href="#" class="dummy">Assign Students</a>
</div>
</td>
@@ -424,7 +431,7 @@
2
</td>
<td class="center">
- <input class="remove-btn" value="true" type="image" src="../images/remove.png" />
+ <input class="remove-btn" value="remove row" type="image" src="../images/remove.png" />
</td>
</tr>
</tbody>
More information about the fluid-work
mailing list