Sakai 2.8 Syllabus Firefox Accessibility Toolbars Protocol Results

Browser/OS Used:

Firefox 3.6.3, Windows 7

       Sakai Tool:

Syllabus

Page(s) Tested:

Syllabus

Date:

11/23/2010

QA Server:

qa1-nl (svn tags/sakai_2-8-0 alpha2 _Branch QA using MySQL 5/InnoDB, Java 1.6.0_17 amd64 - DEMO - Sakai 2.8.0-a02 (Kernel 1.2.0-rc01)- Server qa1-nl

Links

On the Add new assignment page, multiple "add" links open different supplemental items.

All links should be unique and descriptive. Example:
<a class="extraNodeLink" id="modelanswer_add">Add<span class="skip"> model answer to assignment</span></a>

Minor

Links

On the Add new assignment page, multiple image links for "popup date selector," correspond to different form fields.

All links should be unique and descriptive. Example:

<img src="/library/calendar/images/calendar/cal.gif" alt="Due Date Popup Date Selector" id="new_assignment_duecalendar" title="Popup date selector" style="cursor: pointer;">

Minor

Links

On the Assignment List page, there are multiple links with the same link text (e.g., Edit, Duplicate and Grade)

All links should be unique and descriptive. Example:

<a href="http://qa1-nl.sakaiproject.org/portal/tool/45b19f70-bc70-422e-9eaf-c8b3eb9811d0?assignmentId=/assignment/a/a17ab031-8d4b-49e9-930a-1d54549e8e6d/0cc2a7bf-1729-49dc-9324-87df30dddd76&panel=Main&sakai_action=doDuplicate_assignment" >Duplicate <span class="skip"> </span><span class="skip">[Assignment Name]</span></a>

Major

Links

On the Assignment List page, there are multiple links with the same link that don't make sense out of context ("0/0")

All links should be unique and descriptive. Example:

<a onclick="if(allowClick(this)) " href="http://confluence.sakaiproject.org/pages/createpage.action#" >0/0 <span class="skip">  (grade [Assignment Title] submissions)</span></a>

Major

Links

On the Student view page, there are multiple links with the same link text (Submit as Student).

All links should be unique and descriptive. Example:
<a href="http://qa1-nl.sakaiproject.org/portal/tool/45b19f70-bc70-422e-9eaf-c8b3eb9811d0?assignmentReference=/assignment/a/a17ab031-8d4b-49e9-930a-1d54549e8e6d/0cc2a7bf-1729-49dc-9324-87df30dddd76&panel=Main&sakai_action=doView_submission" > Submit as Student <span class="skip">  Assignment "</span><span class="skip">[Assignment Name]</span><span class="skip">"</span></a>

Major

Links

On the Grade Assignment page, there are multiple links with the same link text (Grade).

All links should be unique and descriptive. Example:
<a title="Grade submission" href="http://qa1-nl.sakaiproject.org/portal/tool/45b19f70-bc70-422e-9eaf-c8b3eb9811d0?assignmentId=/assignment/a/a17ab031-8d4b-49e9-930a-1d54549e8e6d/0cc2a7bf-1729-49dc-9324-87df30dddd76&submissionId=/assignment/s/a17ab031-8d4b-49e9-930a-1d54549e8e6d/0cc2a7bf-1729-49dc-9324-87df30dddd76/33f60e35-6744-4bd8-b0f1-b85a32062f8b&panel=Main&sakai_action=doGrade_submission" >Grade<span class="skip"> </span><span class="skip">[Student Name]</span><span class="skip">'s  </span><span class="skip">[Assignment Name]</span></a>

Major

Links

On the Student View page, there are multiple links with the same link text (Submit as Student).

All links should be unique and descriptive. Example:

<a href="http://qa1-nl.sakaiproject.org/portal/tool/a5236d2b-ceec-4531-b8ca-b40fde7aa118?assignmentReference=/assignment/a/5eb30b3e-7701-43fa-ab9f-f67adbe95b9b/18fd3556-2978-44b1-99ea-c6aaf2b4d5c1&panel=Main&sakai_action=doView_submission" >Submit<span class="skip"> </span><span class="skip">[Assignment Name]</span><span class="skip"> </span></a>as Student</a>

Major

Links

On the Grade report page, the download spreadsheet link does not list the file type.

Include the file type for all downloads. Example:
<a title="Download Spreadsheet" href="http://qa1-nl.sakaiproject.org/access/assignment/grades/a17ab031-8d4b-49e9-930a-1d54549e8e6d" >Download Spreadsheet (.xls)</a>

Minor

Images

On the Add attachments to assignment page, there are multiple images with an alt attribute of "folder", "open this folder", [missing key: helper sh.close]

This image appears to be purely for decoration and could have an alt attribute of alt="" (empty alt) instead or should match the name of the link it is tied to.

<a title="close podcasts folder" href="http://qa1-nl.sakaiproject.org/portal/tool/a5236d2b-ceec-4531-b8ca-b40fde7aa118/sakai.filepicker.helper?collectionId=/group/5eb30b3e-7701-43fa-ab9f-f67adbe95b9b/Podcasts/&panel=Main&sakai_action=doCollapse_collection" >
<img border="0" alt="close podcasts folder " title="close podcasts folder" src="/library/image/sakai/dir_openminus.gif?panel=Main" >  Podcasts </a>

Major

Page Structure / Markup

Numerous forms fields on the Add new assignment page are not explicitly labeled.

One form field on the Add attachments to assignment page is not explicitly labeled. The label tag is present, but the "for" attribute is wrong.  It should be changed to for="url".

Similar unlabeled select fields are present on the Grade Assignment page.

One form field on the Grade Assignment page is not explicitly labeled. The label tag is present, but the "for" attribute is wrong.  It should be changed to for="defaultGrade_2".

Unlabeled select form field on the Assignments reorder page.

One form field on the Grade Assignment page is not explicitly labeled. The label tag is present, but the "for" attribute is wrong.  It should be changed to for="search".

Unlabeled checkboxes on Test assignments - submissions  page

Add explicit label tags to all form fields. Example:
<label for="new_assignment_openday" class="skip">Open Date Day</label><select onchange="blur(); " id="new_assignment_openday" name="new_assignment_openday">
                              <option value="1">1</option>
                                       <option value="2">2</option>
                                       <option value="3">3</option>
                                       <option value="4">4</option>
                                       <option value="5">5</option>
                                       <option value="6">6</option>
                                       <option value="7">7</option>
                                       <option value="8">8</option>
                                       <option value="9">9</option>
                                       <option value="10">10</option>
                                       <option value="11">11</option>
                                       <option value="12">12</option>
                                       <option value="13">13</option>
                                       <option value="14">14</option>
                                       <option value="15">15</option>
                                       <option value="16">16</option>
                                       <option value="17">17</option>
                                       <option value="18">18</option>
                                       <option value="19">19</option>
                                       <option value="20">20</option>
                                       <option value="21">21</option>
                                       <option value="22">22</option>
                                       <option value="23">23</option>
                                       <option value="24">24</option>
                                       <option value="25">25</option>
                                       <option value="26">26</option>
                                       <option selected="selected" value="27">27</option>
                                       <option value="28">28</option>
                                       <option value="29">29</option>
                                       <option value="30">30</option>
                                       <option value="31">31</option>
                       </select>

Major

Page Structure / Markup

On the Add new assignment page, the required field indicator is outside the label tag for most form fields.

Include the required field indicator inside the label tag. Example:
<label for="new_assignment_title">
<span class="reqStar">*</span> Title </label> 
<input type="text" maxlength="100" size="30" value="" id="new_assignment_title" name="new_assignment_title"/>

Major

Page Structure / Markup

On the add new assignment page, clicking the "add" links next to model answer, private note, or all  purpose item causes two cancel buttons with different functions to be present.

Multiple buttons with the same name are also present on the add attachment page.

Each form field should be explicitly labeled

<label class="skip" for="modelanswer_cancel">cancel adding model answer</label>
<input type="button" value="Cancel" id="modelanswer_cancel" class="extraNodeInput">

Major

Page Structure / Markup

On the Add attachment page, the heading structure does not make sense. The sub heading "location" is an h3 when the parent heading "select a resource" is an h4. 

Change the heading level to better reflect the hierarchical levels of the content.

<h4>Select a resource</h4>
<div class="breadCrumb">
<h5>Location: <img border="0" alt="Folder" src="/library/image/sakai/dir_closed.gif" >
AR Test 101 123 Spring 2010 Resources</h5>
</div>

Minor

Page Structure / Markup

On the Assignment list page there are multiple checkboxes with the same label.

All form labels should be unique and descriptive. Example:
<input type="checkbox" id="check_1" value="/assignment/a/a17ab031-8d4b-49e9-930a-1d54549e8e6d/0cc2a7bf-1729-49dc-9324-87df30dddd76" name="selectedAssignments">
<label class="skip" for="check_1">Select <span class="skip">[Student Name]</span><span class="skip"> and allow resubmission</span></label>

Major

Page Structure / Markup

On the Assignment list page the table summary is incorrect

The summary does not indicate the first column is completely empty and unused.  This should be added and the summary numbering changed accordingly.

Minor

Page Structure / Markup

On the Grade Assignment page there are multiple checkboxes with the same label.

Add explicit label tags to all form fields. Example:
<input type="checkbox" id="check_admin" value="admin" name="selectedAllowResubmit"><label class="skip" for="check_admin"><span class="skip"> </span><span class="skip">[Assignment Name]</span></label>

Major

Page Structure / Markup

On the Grade report page, the table summary is terse and does not discuss the table's structure.

The table Summary on the Student view page also needs to be updated to discuss the table's accurate structure.

Add Informative table summaries that inform the user of table structure. Example:
<table class="listHier lines nolines" border="0" cellspacing="0" summary="List of graded student assignments. Column 1 contains the Student Name, column 2 contains the Assignment name, column 3 contains the student's grade, column 4 contains the grading  scale, and column 5 contains when the assignment was submitted?">

Minor

Page Structure / Markup

On the Permissions page, there are multiple checkboxes with empty label tags

All form fields should have unique labels and explicit. Example:
<label for="Studentasn.new">
<input type="checkbox" value="Studentasn.new" id="Studentasn.new" name="Studentasn.new" class="Studentasn.new"><span class="skip">Student create new assignment(s) </span></label>

Major

Page Structure / Markup

Tool Navigation menu missing from Assignments permissions and options pages

For consistency of navigation. Include the tool navigation menu on all tool specific pages.

Minor

Access Keys

Access keys interfere with IE keys commands - "preview" access key on add new assignment page

Change access key so it does not interfere with browser key commands

Minor

Frame Titles

FCK Editor seems to be creating multiple unlabelled frames

Replace FCK Editor with more accessible WSYWYG editor or do nothing since an alternative way to submit a file is an option.

Minor

Style sheets / Linearization

pass

Text Zoom

Pass

Tab Order

Focus is lost on multiple occasions when tabbing through the documents.

Add new assignment page:

• Tabbing through Skip to links
• Hidden content after the Cancel button, but before gateway link" (not issue in IE)
• Tabbing to "expand/ contract navigation" link
  

Add code or modify CSS so all links and form elements receive visible focus.
.portletTitle .title a
background: url(images/reload.gif) center left no-repeat;
text-decoration: none !important;
border:1px solid #fff;
height:1.5em;
outline:none; Note:remove CSS style or use CSS pseudoclass below.

CSS pseudo class for focus
:focus
outline:dotted thin !important;

Major

Tab Order

Focus is not visible for "sort by" links on Organize default assignment list view page.

Edit CSS style outline for focus class so focus becomes visible

#reorder-list-sortingToolBar a
outline:medium;

Major

Functionality

On add new assignment page, keyboard focus becomes trapped in FCK Editor text input and cannot escape without page reload.  (In IE user can shift tab out, but not tab.)

Do not trap focus.  Use accessible WYSIWYG editor or spell out access keys for key-board only users

Major

Functionality

On add new assignment page, users cannot use word like editing options of WSYWYG because they cannot receive tab focus.

Use a more accessible editor, modify the editor so options can receive focus, or encourage file attachment as alternative.

Minor

Color

Update button on Assignment list page does not meet color contrast requirements

Change color to meet color contrast requirements.

Change from #2277DD to #164b8b

Minor

Color

Edit, duplicate and view submissions links on Assignment list page does not meet color contrast requirements

Change color to meet color contrast requirements.

Change from #2277DD to #164b8b

Minor

Color

save button on reorder and permissions pages do not meet color contrast requirements

Change color to meet color contrast requirements.

Change from #2277DD to #164b8b

Minor

FAE Results

Pass. No other issues

Browser/OS Used:

Firefox 3.6.12, Windows 7

Sakai Tool:

Assignments

Page(s) Tested:

Assignment List, Assignment page (test Assignment)

Date:

11/1/2010

QA Server:

qa1-nl (svn tags/sakai_2-8-0 alpha2 _Branch QA using MySQL 5/InnoDB, Java 1.6.0_17 amd64 - DEMO - Sakai 2.8.0-a02 (Kernel 1.2.0-rc01)- Server qa1-nl

Links

On the Assignment page (Test assignment); the add another file and delete this file image links do have alternative text that accurately describes the links. They have alternative text of "+" and "expand" respectively.

Include the file type for all downloads. Example:
<a title="Download Spreadsheet" href="http://qa1-nl.sakaiproject.org/access/assignment/grades/a17ab031-8d4b-49e9-930a-1d54549e8e6d" >Download Spreadsheet (.xls)</a>

Minor

Images

Pass

Page Structure / Markup

File upload form fields on Assignment - In Progress (Test assignment) page

Add explicit label tags to all form fields. Example:
<tr>
<td>
<label for="clonableUpload"><span>Select a file from computer (5 total)</span></label>
</td>
<td>
<div id="clonableUpload">
<input type="file" id="clonableUpload" class="upload" name="upload0"><a style="display: none;" href="http://confluence.sakaiproject.org/pages/editpage.action#" onclick="event.preventDefault();$(this).parent('div').remove();resizeFrame('shrink');notifyDeleteControl()" class="removeAttachmentControl"><img title="Delete this file" alt="expand" src="/library/image/silk/delete.png" class="expand"> </a></div>
</td>

Major

Access Keys

Access keys interfere with IE keys commands - "preview" access key on add new assignment page

Change access key so it does not interfere with browser key commands

Minor

Frame Titles

FCK Editor seems to be creating multiple unlabelled frames

Replace FCK Editor with more accessible WSYWYG editor or do nothing since an alternative way to submit a file is an option.

Minor

Style sheets / Linearization

Lots of extraneous content is shown because of FCK editor. This makes it harder to navigate around the page and visually confusing.

Provide alternative submission form.

Minor

Text Zoom

Pass

Tab Order

Focus is lost on multiple occasions when tabbing through the documents.

Add new assignment page:

• Tabbing through Skip to links
• Hidden content after the Cancel button, but before gateway link" (not issue in IE)
• Tabbing to "expand/ contract navigation" link
  

Add code or modify CSS so all links and form elements receive visible focus.
.portletTitle .title a background: url(images/reload.gif) center left no-repeat; text-decoration: none !important; border:1px solid #fff; height:1.5em; outline:none Note: remove CSS style or use CSS pseudoclass below. CSS pseudo class for focus
:focus
outline:dotted thin !important;

Major

Functionality

On assignment- In Progress page, keyboard focus becomes trapped in FCK Editor text input and cannot escape without page reload.  (In IE user can shift tab out, but not tab.)

Do not trap focus.  Use accessible WYSIWYG editor or spell out access keys for key-board only users

Major

Functionality

On assignment- In Progress page, users cannot use word like editing options of WSYWYG because they cannot receive tab focus.

Use a more accessible editor, modify the editor so options can receive focus, or encourage file attachment as alternative.

Minor

Color

The submit button on the assignment- In Progress page does not meet color contrast requirements

Back to list button as well.

Change color to meet color contrast requirements.

Change from #2277DD to #164b8b

Minor

FAE Results

Pass. No other issues