Sakai 2.9 Neoportal Users Present Firefox Comprehensive WCAG 2 Protocol Results

Browser(s) / OS Used:

Firefox 12 / Windows 7

Sakai Tool:

Neoportal - Users Present feature

Page(s) Tested:

Portal

Date:

03-May-2012

QA Server:

QA Server Environment:
(Copy from footer)

2.9.0-b05

Evaluator(s):

Brian Richwine

Evaluation Complete: (Yes / No):

No

Images

The icon used for the a#presenceToggle link does not have an alt attribute. All images must have an alt attribute, otherwise adaptive technologies (like screen-reading software) will find another value to read. In this case, it will read the src attribute which is"/library/image/silk/user_green.png" and rather unpleasant to listen to.

Basic Rules of thumb to apply here:

  1) Always supply an alt attribute to any img element.

  2) If the image is merely decorative or the description would be redundant, use an empty alt attribute (alt="")

  3) If the image is meaningful, supply a concise description of the image

In this case, the image is redundant to the additional hidden text provided in the link.

Change:
  <a id="presenceToggle" href="#"><img style="vertical-align: middle;" src="/library/image/silk/user_green.png"><span class="skip">Toggle users present panel</span></a>
to this:
  <a id="presenceToggle" href="#"><img style="vertical-align: middle;" src="/library/image/silk/user_green.png" alt=""><span class="skip">Toggle users present panel</span></a>
by adding alt="" to the img element.

For more on selecting the correct alt attribute value, see:
http://www.w3.org/TR/html-alt-techniques/

Critical

SAK-22141 - Getting issue details... STATUS

Linearized Content

Reliance on Sensory Characteristics

Use of Color

Sufficient Contrast

Resizable Text

Semantics

Keyboard Operatibility

Time Limits

Control of Updates

The JAWS screen-reader is announcing the number of users present every time the presence script is updating it. Apparently the script is changing the DOM even if the value is the same as it was previously. This will annoy the **** out of screen-reader users. Especially since they have no way of turning it off.

Modify the user presence count script such that it keeps track of the previous value and only modifies the DOM when the number of users present actually changes.

Critical

SAK-22142 - Getting issue details... STATUS

The user needs the ability to silence ARIA live updates coming from the users presence feature. Imagine trying to get any work done while in a busy site, take an assessment, etc. and every time users have entered or exited the site your screen-reader announces this to you.

Sakai may use live updates in other places to announce error messages, progress messages, status messages, etc. so the user wouldn't want to disable ARIA globally even if the could do so.

  Include a link that can be used to "Turn announcement of user presence updates on" when they are off.

  Include a link that can be used to "Turn announcement of user presence updates off" when they are on.

  Make off the default and remember the user's preference.

Prevent Seizures

Bypass Blocks - Headings

Bypass Blocks - ARIA Landmarks

Bypass Blocks - Skip Content Links

Bypass Blocks - Group Links

Bypass Blocks - Frame / Page Titles

Page Titles

Focus

The "Toggle users present panel" link's visible indication of receiving keyboard focus is impossible to see. Sighted keyboard only users will not be able to know when they are on the link to hide/show the users present panel.

The #presenceToggle CSS rule set in portal.css is setting the color to white. The link outline inherits this value if not otherwise set. White on the silvery gray background that the link's icon graphic has is nearly impossible to see.

#presenceToggle {

    color: white;

    text-decoration: none;

}

  Change the CSS so the outline value is clearly visible around the icon when it receives keyboard focus. I recommend using black for the most contrast. This will likely leave a black dotted outline around the icon when mouse users click on it, so add an onmouseup="blur();" to the link so the outline disappears if mouse users click the link (they don't need the outline anyway).

#presenceToggle {
    color: black;
    text-decoration: none;
}

<a id="presenceToggle" href="#" onmouseup="blur()"><img style="vertical-align: middle;" src="/library/image/silk/user_green.png"><span class="skip">Toggle users present panel</span></a>



FYI - This technique is in use on the expand/contract navigation feature in the portal already:
<a title="Expand/Contract Navigation" href="#" onmouseup="blur()" id="toggleToolMenu">
<span id="toggleToolMax" class="">&nbsp;</span>
<span style="display:none" "="" id="toggleNormal" class="">&nbsp;</span>
</a>

Critical

SAK-22144 - Getting issue details... STATUS

Links

Headings

Labels

Language Identification

Change of Context

Consistency

Access keys

Change of Context Notification

Error Notices

Required Field Notification

Error Prevention

Help

Validation

For screen-reader users, the "Number of users present:" text makes no sense when no other users are present in the site.

When no other users are in a site, the text available for screen-reader users is "Number of users present:", with no indication of how many users are present - it's just blank after that.

The span#presenceCount element is being hidden by the #footerAppTray span.empty CSS rule set. However the "Number of users present:" text is not.

#footerAppTray span.empty {

  visibility: hidden;

}

<div id="footerAppTray">

 <h1 class="skip">Users present begins here</h1>

   <div aria-relevant="all" aria-atomic="false" aria-live="polite" id="footerAppPresence">

     <a id="presenceToggle" href="#"><img style="vertical-align: middle;" src="/library/image/silk/user_green.png"><span class="skip">Toggle users present panel</span></a>

     <span class="skip">Number of users present:</span> <span id="presenceCount" class="empty">1</span>

   </div>

</div>