Sakai 2.9 Assignments Tool Instructor Persona JAWS Walkthrough Scripts Results

Browser/OS Used:

Windows 7, Internet Explorer 9, Firefox 7

Adaptive Technology Used:

JAWS 12.0.1170

Sakai Tool:

Assignments

Page(s) Tested /
Walkthrough Script:

Assignments list, Add new assignment, Test Assignment - submissions (Grade assignment), Grade report, Reorder, Permissions

Date:

November 9th-11th, 2011 and  November 21st, 2011

QA Server:

http://sakaicle1-trunk.uits.indiana.edu:8181/portal

QA Server Environment:
(Copy from footer)

Sakai 2.9 Accessibility Review - TRUNK - Sakai 2.9-SNAPSHOT (Kernel 1.3.0-a01)- Server localhost

Evaluation Participants:

Mary Stores, Joe Humbert

Evaluation Complete: (Yes / No):

Yes

Creating Assignment

Multiple "Add" links under the Additional Information heading do not have unique link text and do not appears as links to screen reading software because they lack "href" attributes.

All link text should be unique.  All links need to have a "href" attribute to be considered links by assistive technology.

<div style="display:block" id="nomodelanswer">
                        <a id="modelanswer_add" href="#">Add</a>
                    </div>

Major

SAK-19590 - Getting issue details... STATUS

SAK-22800 - Getting issue details... STATUS

Grading Assignments

The "find (Name, ID or Email)" edit field is not labeled correctly and the label is the same as the submit button.

The "for" attribute should match the "id" attribute of the edit field.  Labels for form controls should be unique.

<label class="skip" for="form_search">Find Students</label>
<input id="form_search" class="searchField" type="text" size="20" name="search" value="Name, ID, or Email">

Major

SAK-22802 - Getting issue details... STATUS

Grading Assignments

The "Assign this grade to participants" edit field is not labeled correctly.

The "for" attribute should match the "id" attribute of the edit field.

<label class="textPanelFooter" style="display:block" for="defaultGrade_1">Found 5 participant(s). Assign this grade to participants without a grade:</label>
<input id="defaultGrade_1" type="text" size="5" value="" name="defaultGrade">

Major

SAK-22802 - Getting issue details... STATUS

Grading Assignments

All of the check boxes which gives the instructor an option to allow the selected students to resubmit the assignment are unlabeled.

All form controls should have a label.

<label class="skip" for="check_54b33d04-97ea-428d-b3ec-b43fdf04d436">Select Course Instructor</label>
<input type="checkbox" id="check_54b33d04-97ea-428d-b3ec-b43fdf04d436" value="54b33d04-97ea-428d-b3ec-b43fdf04d436" name="selectedAllowResubmit">

Critical

SAK-22553 - Getting issue details... STATUS

Grading Assignments

The assignments details table summary, "The assignment info" does not provide any additional information.

Remove the table summary because it is not needed, the table is not complex enough to warrant a table summary

Minor

Grading Assignments

The alternative text included on the image which open/close the "Assignments Details" panel and not descriptive enough.

The alternative text, "expand" and "collapse" should be more descriptive.  An example of adequate descriptive text would be, "Show Assignment Details"

Major

SAK-22803 - Getting issue details... STATUS

Grading Assignments

The "Assignment Details" collapsible panel is not clearly identified to users of adaptive technology because the heading level 3 is made clickable using JavaScript and the "expand/collapse" is just an image not an image link.

The JavaScript on heading level 3 should be removed and a separate link should be created which contains the "expand/contract" images. The JavaScript to control the opening and closing of the panel can be attached to this newly created link. This would be similar to the "Select User(s) and Allow Resubmission" collapsible panel.

Major

SAK-22804 - Getting issue details... STATUS

Grading Assignments

The "Select User(s) and Allow Resubmission" collapsible panel clickable area is very small because the "black triangle" image is only 13pixels by 13 pixels.

The hit area of the link should be expanded to take up most of the containing div element.  The text "Select User(s) and Allow Resubmission" could be moved outside the paragraph element into its own div element and positioned underneath the expanded anckor element.  Here is an example of one way this could be accomplished:

<div style="display:block" id="allowResubmission_hidden">
                <input type="hidden" value="checked" id="allowResToggle" name="allowResToggle">
                <p>        
<a style="display:block; z-index:25; position: relative; padding: .2em;" href="#" onclick="javascript:showAllowResubmission();">
                    <img height="13" width="13" border="0" align="top" src="/library/image/sakai/expand.gif?panel=Main" alt="Show Settings for Allowing Resubmissions"></a></p>
<div style="z-index:1; position:relative; margin-top:-2.7em; margin-left:1.5em; margin-bottom: 1em;">Select User(s) and Allow Resubmission</div>
            </div>

Minor

Viewing Grade Report

The table summary on the "grade report" page does not provide additional information.

The table summary should be amended to provide both a summary of the table's purpose and its layout.

<table class="listHier lines nolines" cellspacing="0" border="0" summary="This table contains a list of all student assignments both graded and ungraded for all students in the class. Column headers are also links which can be used to sort the table by that column. Column 1: Indicates the student's name (repeated for each assignment). Column 2: assignment title (repeated for each student). Column 3: Assignment grade. Column 4: Grading scale for the assignment. Column 5: Indicates the date the assignment was submitted, if blank the assignment has yet to be submitted by the user listed in column 1.">

Minor

Reordering assignments

users cannot reorder the assignments utilizing screen reading software or only the keyboard.

To make the reorder widget more accessible to keyboard-only users:

1. Make the keyboard instructions for the reorder widget visible to all uses
   <span id="inputKbdMessage">Tab into list and hold Control key and use arrow keys to sort.</span>
2. Remove the tabindex attributes from the ul and change the tabinex attribute to "0" for li elements so each individual item receives keyboard focus
   <li id="listitem.orderable2" class="sortable ui-draggable fl-reorderer-movable-default" role="listitem" aria-selected="false" aria-disabled="false" tabindex="0" aria-grabbed="false" aria-dropeffect="none">
3. remove the CSS outline none property for the selected list item
   .fl-reorderer-movable-selected {
       border: medium none;
   }
   An accessible alternative is needed for uses of screen reading software.  A link can be provided to instructions, an unordered list which contains a select element for each item and a submit button.  This set of form controls along the with the required coding will allow screen reader users to select a new position for one or multiple items without requiring a complicated set of key strokes.

Major

SAK-22805 - Getting issue details... STATUS

Changing Assignment tool options

The radio buttons are not explicitly linked to the option statement, "Please choose the display option for grading assignment page"

A fieldset should surround the radio button form controls and the option statement, "Please choose the display option for grading assignment page" should be included as the legend for the fieldset.  This will explicitly link the statement with the radio buttons, enabling adaptive technology users to easily understand the context for the choices.

Minor