Sakai 2.8 Profile2 Firefox Accessibility Toolbars Protocol Results

Browser/OS Used:

Firefox 3.6.11, Windows 7

Sakai Tool:

Profile2

Page(s) Tested:

My Profile, Connections, Search, Privacy, Preferences

Date:

26.Oct.2010

QA Server:

Qa1-nl

Links

"Clear" link that appears after a user's status message on the "My profile" page is ambiguous when taken out of context. The function or purpose a link should be clear from the link text alone.

Suggest:
Use hidden text to make the link make sense out of context. Something like <a ...>Clear<span class="skip"> your status.</span></a>

Minor

Links

The multiple "Edit" links are ambiguous and their function is not clear out of context (like in a links list)

Add more context to the link text, and use CSS positioning on the added contextual information to move it off screen.
Example: Markup:<a ...><span>Edit<span class="skip"> Basic Information</span></span></a>

Critical

PRFL-521

Links

The "Preferences" tool link in the tools list, and the "Preferences" link in the Profile tool are confusing and impossible to distinguish out of context. This is especially true for blind/low vision users using a links listing.

Add more context to the link text, and use the CSS positioning on the added contextual text to move it off screen.

Images

The pop text that appears when the mouse hovers over the info icon is unavailable to screen readers and keyboard only users.

Add "Show Birth Year to other users" checkbox beneath birth date input controls.

Minor

Images

All of the information.png popups cannot be triggered by keyboard only users or by screen readers users.

Also triggering the popup with the onfocus event for the info icons would enable the keyboard only users to see the popup. Using CSS to move the info text off screen instead of using display:none would make it available to screen reader users.

Content hidden with display: none is not usually announced by screen readers, apart from labels for form controls, regardless of the verbosity settings.

Page Structure / Markup

Lack of adequate heading structure on the "My Profile" page hinders navigability and information architecture.

Items styled as headings should be marked up as headings.
<span id="profileHeadingName"> should be <h3>
<span>Basic Information</span> should be <h4>
<span>Contact Information</span> should be <h4>
<span>Academic Information</span> should be <h4>
<span>Personal Information</span> should be <h4>
<div class="sideBoxHeading">My connections</div> should be <h3>

Major

Page Structure / Markup

Intra Tool Navigation links markup doesn't follow standard used by many other tools of placing links in an unordered list. This inconsistency may confuse users who expect to find a list of links.

Suggestion: Use markup as found in other tools, (i.e.: Membership):<ul class="navIntraTool actionToolbar" role="menu"> <li class="firstToolBarItem" role="menuitem" aria-disabled="true"> <span class="current">My Current Sites</span> </li> <li role="menuitem"> <span><a href="..." title="Joinable Sites">Joinable Sites</a></span> </li></ul>

Minor

Page Structure / Markup

The "Confirm xx's connection request?" text in the confirm connection request dialog should be marked up as a heading.

Suggestion:
<h3 id="_wicket_window_12" class="w_captionText">Confirm Brian Richwine's connection request?</h3>

Minor

Page Structure / Markup

The "My connections" friends list on the "Connections" page is a series of div tags when semantically it is really an unordered list. Screen readers have features that announce list details and allow easy navigation between items in lists.

Change:
<div id="id49" class="friendsList"> into <ul id="id49" class="friendsList">
And every
<div id="id4a" class="friendsListItem"> into <li id="id4a" class="friendsListItem">

It validates fine and looks like the CSS might still work too.

Major

Page Structure / Markup

On the "Preferences" page, the "Email Notification" text and the "Twitter integration" text in the form should be marked up as a heading.

Suggest marking them up as a level 4 heading.

Minor

Page Structure / Markup

Other than the "Say Something" text box, every form input and select element checked was not explicitly labeled.

Use the label element to explicitly designate text as a label for each form control. Example:
<td class="label"><label for="id61">Common interest</label></td>
<td class="content">
<input id="id61" name="searchInterest" value="" class="formInputField" type="text"/>
</td>

Major

Page Structure / Markup

Radio buttons on the Preferences form are not labeled so assistive technology can describe their purpose. The table laying out the form does not have the row or column headings marked to assist either.

Use the label element to associate text with the radio buttons and use CSS to hide it off screen. Mark up the column and row headers in the table.
Suggested Markup:
<table class="preferencesContent">
<tr>
<th> </th>
<th class="item">On</th>
<th class="item">Off</th>
</tr>
<tr id="id10c">
<th class="label">Adds me as a connection</td>
<td class="item"><label><input name="requestEmailEnabled" value="radio3" type="radio" checked="checked"/><span class="skip">Email me when someone adds me as a connection enabled.</span></label></td>
<td class="item"><label><input name="requestEmailEnabled" value="radio4" type="radio"/><span class="skip">Email me when someone adds me as a connection disabled.</span></label></td>
</tr>
<tr id="id10d">
<th class="label">Confirms my connection request</td>
<td class="item"><label><input name="confirmEmailEnabled" value="radio5" type="radio" checked="checked"/><span class="skip">Email me when someone confirms my connection request enabled.</span></label></td>
<td class="item"><label><input name="confirmEmailEnabled" value="radio6" type="radio"/><span class="skip">Email me when someone confirms my connection request disabled.</span></label></td>
</tr>
</table>

Critical

PRFL-522

Access Keys

Frame Titles

Profile2's FrameMain is lacking a title element in the head element.

Add a title:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><title>Profile</title> ...

Minor

Style sheets / Linearization

Text Zoom

Tab Order

Change picture and Edit controls can't be tabbed to.

See comments below under functionality

Functionality

No way found for keyboard only users to activate profile editing links ("Change picture" link and the 4 "Edit" links). Also, content hidden with display: none is not usually announced by screen readers, apart from labels for form controls, regardless of the verbosity settings.

Use CSS to position these links off screen so they are still tab stops and have them positioned appropriately when they receive focus or the target area is hovered over.  Or even better have them visible at all times. Without using a mouse, it isn't clear that the profile can be updated from the "My Profile" page.

Critical

PRFL-523

Functionality

No way found to enter Birthday using the keyboard. Can't type in the textbox and can't access the calendar datepicker control through the keyboard.

Revise JavaScript to allow for keyboard interaction or choose an accessible date picker control.

Major

Color

FAE Results