Sakai 2.9 Profile 2 Firefox Comprehensive WCAG 2 Protocol Results (2012)

Test Details

Browser(s) / OS Used:

Firefox 13 / Windows 7

Sakai Tool:

Profile2

Page(s) Tested:

My Workspace: Profile, 

Date:

7-4-2012, 7-5-2012, 7-6-2012

QA Server:

http://nightly2.sakaiproject.org:8082

QA Server Environment:
(Copy from footer)

sakai/trunk on Oracle - Built: 07/04/12 08:00 - Sakai Revision: 110111 (Kernel 1.4.0-SNAPSHOT)- Server sakai-nightly.uits.iupui.edu

Evaluator(s):

Joe Humbert

Evaluation Complete: (Yes / No):

Yes

Accessibility Problems and Recommended Solutions

Subject

Results

Recommendations

Priority

JIRAs

Images

Profile picture alt text the the same whether the user uploads a picture or leaves the placeholder image in place

Images in the "Pictures" section have no alt attribute.  Users are not able to supply alternative text to the images they upload.

There are informational images on each page that lack alt text attributes

include an empty alt attribute (alt="")

include empty alt attribute on the images or allow users to provide alternative text

provide an alternative text description for all images

Minor

 

Linearized Content

OK - None

 

 

 

Reliance on Sensory Characteristics

OK - None

 

 

 

Use of Color

Color is used as the only indication for read/unread messages on the "messages" page.

Provide a semantic way to determine if a message has been read

Critical

PRFL-779 - Getting issue details... STATUS

Sufficient Contrast

The selected state color Blue #009DCE on Grey #F3F3F3 (2.82:1) for the worksite tools does not meet the minimum color contrast ratio

The "You haven't filled out any information yet" grey #777777 on white #FFFFFF (4.48:1) for the profile information barely do not meet the minimum color contrast ratio

change blue color to #0064CD

Change grey color to #666666

Minor

 

Resizable Text

OK - None

 

 

 

Semantics - Headings

Numerous sections lack headings on the "My Profile" page

"Messages" page lacks headings

"Search" page needs a better heading structure

Suggested Heading Structures:

My Profile page

h2) My Workspace: Profile
  h3) My Connections
  h3) My Pictures
  h3) Name
    h4) Basic Information
    h4) Contact Information
    h4) Staff Information
    h4) Student Information
    h4) Social Networking
    h4) Personal Information

Messages Page

h2) My Workspace: Profile
  h3) My messages

Search Page

h2) My Workspace: Profile
  h3) Search profiles
  h3) Previous searches
  h3) Search results - Displaying 2 results for: (search term)

Major

PRFL-767 - Getting issue details... STATUS

Semantics - Lists

The sections of profile information contain groups of information in layout tables.  This content appears to be information pairs.

The wall posts are not coded as a list

When uploading picture files to the My pictures section of the "pictures" page, the group of files to upload are not in a list

The group of messages on the "Messages" page are in a layout table

The group of results and group of previous searches links on the "search" are not in a list

Change the table formatting into definition lists.

Code the wall posts as a list

Code the group of files as a list

The messages should be in a list.

Both the previous searches links and the search results should be in a list

Minor 
Semantics - Form Labels

Most form controls on the "My profile" page are unlabeled

Most form controls on the "Pictures" page are unlabeled or are not uniquely labeled.

Most form controls on the "messages" page are unlabeled. In addition the cancel button is missing from the compose message form

Some of the form fields on the "Search" page are implicitly labeled.  The radio buttons are labeled twice causing the confusing label, "accessibility.search." to be announced by adaptive technology

The "show birth year" checkbox is implicitly labeled on the "Privacy" page.

Most form controls are implicitly labeled on the "Preferences" page.

Explicitly Label all form controls

Explicitly label and provide unique labels for all form controls

Explicitly Label all form controls. Include cancel button

Explicitly Label all form controls. remove duplicate labels.

Explicitly Label all form controls

Explicitly Label all form controls

Critical

PRFL-773 - Getting issue details... STATUS

PRFL-783 - Getting issue details... STATUS

Semantics - Tables

On the "Privacy" page, there is a layout table that has a summary

On the "Preferences" page, there is a layout table that has a summary

Remove the summary from the layout table

Remove the summary from the layout table

Minor? 

Keyboard Operatibility

Keyboard focus becomes partially trapped in WYSIWYG text boxes because the user cannot shift tab out of these boxes

The date picker fields are not keyboard accessible and do not allow manual data entry.

The uploaded images on the "Pictures" page are clickable but cannot be accessed with the keyboard

Do not prevent standard keyboard interaction

Make the date picker accessible or provide manual input

Provide keyboard access for all clickable elements

Major

 

Time Limits

OK - None

 

 

 

Control of Updates

OK - None

 

 

 

Prevent Seizures

OK - None

 

 

 

Bypass Blocks - Headings

See Semantics section

 

Major

 

Bypass Blocks - ARIA Landmarks

There are multiple aria application landmarks for the WYSIWYG text boxes on the "My profile" page.  They don't seem to provide any advanced functionality

Remove the landmarks or provide increased functionality that is consistent with the application landmark.

Minor

 

Bypass Blocks - Skip Content Links

OK - None

 

 

 

Bypass Blocks - Group Links

See semantics section

 

Minor

 

Bypass Blocks - Frame / Page Titles

There are multiple frames with the frame title "{#aria.rich_text_area}{#advanced.help_shortcut}" on the "My profile" page

give frames unique and meaningful titles

Minor

 

Page Titles

All of the different pages in the Profile tool have the same page title

Each page should have a unique page title.

Major

 

Focus

The links to change the profile picture and edit the different profile sections do not show visual indication of focus

The tool navigation menu links (my profile, pictures, connections, etc.) show double focus

User profile pictures on the "Connections" page have visual focus issues

The profile picture which accompanies each message has visual focus issues

The profile pictures in the search results have visual focus issues

Add visual indication of focus to section edit links

remove the tabindex attributes from the child span sub elements of the links.

Remove the position absolute from the following CSS style

.connection-img, .search-result-img
    border1px solid #666666;
    left5px;
    max-width100px;
    padding2px;
    positionabsolute;
    top5px;

Remove the float left from the following CSS style

.message-thread-photo
    floatleft;
    max-width50px;
    width50px;

Remove the position absolute from the following CSS style

.connection-img, .search-result-img
    border1px solid #666666;
    left5px;
    max-width100px;
    padding2px;
    positionabsolute;
    top5px;

Major

 

Links

The "edit" profile section links have the word "edit" repeated twice

remove the repeated "edit" from the hidden text.

Minor

 

Headings

See Semantics section

 

Major

 

Labels

See Semantics section

 

Major

 

Language Identification

OK - None

 

 

 

Change of Context

Switching between the profile and wall sections does not alert the user on the "My profile" page

Switching between My messages and compose message sections does not alert the user on the "Messages" page

provide users of adaptive technology with an indication the context has changed.

provide users of adaptive technology with an indication the context has changed.

Minor

 

Consistency

OK - None

 

 

 

Access keys

There is no accessibility help access key, "0"

Add the missing access key

Minor

 

Change of Context Notification

The profile and wall sections seem to follow the tab paradigm, they they are not marked up as tabs to adaptive technology

On the "Search" page, there is no indication to users of adaptive technology that the search has been conducted and results are displayed below the form.

follow the ARIA specifications for tab panels

Provide indication to adaptive technology users that search results exist on the page.

Major

 

Error Notices

The error messages on the "pictures" page are not semantically linked to the form controls

Link the error message to the form control so users of adaptive technology can easily discover the error.

Minor

 

Required Field Notification

OK - None

 

 

 

Error Prevention

OK - None

 

 

 

Help

OK - None

 

 

 

Validation

OK - None

 

 

 

Priority Definitions

  • Critical: Issue will keep some/all users from being able to use this tool.
  • Major: Issue will cause significant difficulty to some/all users and should be revised.
  • Minor: Tool can be used successfully, but functionality will be significantly improved by fixing issue.
  • Trivial: Indicates that this issue has a relatively minor impact.