Sakai 2.8 Samigo Firefox Accessibility Toolbars Protocol Results

Browser/OS Used:

Firefox 3.6.12, Windows 7

Sakai Tool:

Samigo

Page(s) Tested:

Date:

22.November.2010

QA Server:

Qa1-nl

Links

Links should not be used as buttons. The "Reset Selection" links that are acting on the forms should be buttons.

Page Structure / Markup

True/False questions are contained in a two row table which itself is contained in a 1 row 1 column table. Nested tables, and tables used for layout can confuse adaptive technology and confuse and frustrate users of adaptive technology.

Simplify the layout by eliminating the 1 row 1 column table.

Page Structure / Markup

True/False questions use implicitly labeled radio buttons.

Use the for attribute in the label element to point to the ID value of the form control it is meant to label.

Major

Page Structure / Markup

The Reset Selection mechanism uses a non-standard mechanism for resetting the form. Mixing links and buttons for similar functions is confusing to adaptive technology users. The Radio buttons, "Next", "Save", and "Exit" buttons are all form controls -- the "Reset Selection" link should be too. Links are for navigation. This occurs in the T/F and Survey questions.

Use the appropriate control: <input type="reset" value="Reset Selection">

Minor

Page Structure / Markup

Next, Save, and Exit buttons are each contained in their own 1 row 1 column table, which is in turn contained in a bigger table. Nested tables, and tables used for layout can confuse adaptive technology and confuse and frustrate users of adaptive technology.

Simplify the layout of the buttons. Eliminate the tables, or at least get rid of the 1 row 1 column tables that surround each button.

Major

Page Structure / Markup

In the multiple choice questions, the checkbox input elements are not labeled.

Use label elements around the answer texts to directly associate that text with the appropriate input element. Use the for attribute in the label element to point to the ID value of the form control it is meant to label. Make sure the IDs used on the controls are valid IDs (the name currently given the controls are not valid).

Major

Page Structure / Markup

The checkboxes in the multiple choice questions are contained in tables that are nested three levels deep.

Simplify the layout. Eliminate as many of the tables as possible.

Major

Page Structure / Markup

The radio buttons in the Survey questions are not labeled.

Use the fieldset, legend, and label elements to explicitly label the radio buttons.
<fieldset>
<legend>Question Text</legend>
<input type="radio" id="surveyQuestion01" ... /> ... <label for="surveyQuestion01">A. 1</label>
<input type="radio" id="surveyQuestion02" ... /> ... <label for="surveyQuestion02">B. 2</label>
...
</fieldset>

Major

Page Structure / Markup

Radio buttons in the survey questions are contained in four levels of nested tables.

Simplify the layout.

Major

Page Structure / Markup

The Select elements used for drop down menus in the matching questions are not labeled.

Use label elements around the answer texts to directly associate that text with the appropriate input element. Use the for attribute in the label element to point to the ID value of the form control it is meant to label. Make sure the IDs used on the controls are valid IDs (the name currently given the controls are not valid).

Major

Page Structure / Markup

When a screen-reader user is working with the select elements in the matching question, they cannot easily look back up at the values listed (the lettered values). They will be forced to remember what A, B, C, D, ... stood for while they are matching the numbered values to them. This puts them at a great disadvantage and will generate lots of stress and frustration.

Include the full text of the values contained in the lettered values in the options of the select menus.

Critical

SAM-1091

Page Structure / Markup

The textboxes used in the fill-in-the-blank questions are not labeled.

HTMLArea editor

The Help icon in the HTMLArea editor takes the users to a busy page that is part advertisement, installation, customization, and help page for the THMLArea editor. When taking a test, the user doesn't have time or the desire to read all of this.

Point to a page that focuses on helping users use the editor. Perhaps listing the shortcut keys is a good start:
Keyboard shortcuts
The editor provides the following key combinations:

• CTRL-A -- select all
• CTRL-B -- bold
• CTRL-I -- italic
• CTRL-U -- underline
• CTRL-S -- strikethrough
• CTRL-L -- justify left
• CTRL-E -- justify center
• CTRL-R -- justify right
• CTRL-J -- justify full
• CTRL-1 .. CTRL-6 -- headings (<h1> .. <h6>)
• CTRL-0 (zero) -- clean content pasted from Word
  

HTMLArea Editor

Only the font, font-size, and style select boxes are accessible by keyboard. The other controls, including the help (Question mark) icon are not.

At least make the help page accessible or provide an obvious and accessible, editor help button on the page.

HTMLArea Editor

When tabbing into an empty HTMLArea editor, no indication of being in the edit area is given. This prevents keyboard only users from easily navigating to the edit window.

A flashing cursor and/or a visual indication in the outline or border of the edit window would be useful.

Consistency

The "True" / "False" text in the T/F questions is of font-weight:normal. The response text in all other question types is font-weight:bold

Make the styling of the various question types consistent.

Minor