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
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>
_______________________________________________________
fluid-work mailing list - [email protected]
To unsubscribe, change settings or access archives,
see http://fluidproject.org/mailman/listinfo/fluid-work
