Sakai 2.8 Podcast Firefox Accessibility Toolbars Protocol Results

Browser/OS Used:

Firefox 3.6.11, Windows 7

Sakai Tool:

Podcast

Page(s) Tested:

Podcast Home page, Add Podcast, Options, Permissions, Edit Podcast Feed

Date:

10/22/2010

QA Server:

qa1-nl (svn tags/sakai_2-8-0 alpha2 _Branch QA using MySQL 5/InnoDB, Java 1.6.0_17 amd64 - DEMO - Sakai 2.8.0-a02 (Kernel 1.2.0-rc01)- Server qa1-nl

Links

Non-descriptive "Edit" link on the Podcast Home page.

Add more information to the link text so that all users know what they are editing.

<a class="indnt2" onclick="document.forms['_id1']['_id1:_idcl'].value='_id1:_id33'; document.forms['_id1'].submit(); return false;" href="http://confluence.sakaiproject.org/pages/editpage.action#" >Edit Podcast Feed Information</a>

Major

Links

Non--descriptive "Download, edit and delete" links on Podcast Homepage.  These links are duplicated for each new podcast added, but do not provide context for adaptive technology users as to what podcast they pertain to.

Add more contextual information, which could be hidden with CSS to all podcast links. Example:

<a href="http://qa1-nl.sakaiproject.org/access/content/group/0b2da6f5-12ae-4a16-a4b4-139d9ba0105b/Podcasts/portal_still_alive.mp3" target="_self" class="active">Download <span class="skip"> [Podcast Title]</span> </a> (5.4MB MP3 )  | <a href="http://confluence.sakaiproject.org/pages/editpage.action#" onclick="document.forms['_id1']['_id1:_idcl'].value='_id1:_id38:0:_id49';document.forms['_id1']['resourceId'].value='/group/0b2da6f5-12ae-4a16-a4b4-139d9ba0105b/Podcasts/portal_still_alive.mp3'; document.forms['_id1'].submit(); return false;" class="active">Edit <span class="skip"> [Podcast Title]</span></a>| <a href="http://confluence.sakaiproject.org/pages/editpage.action#" onclick="document.forms['_id1']['_id1:_idcl'].value='_id1:_id38:0:_id52';document.forms['_id1']['resourceId'].value='/group/0b2da6f5-12ae-4a16-a4b4-139d9ba0105b/Podcasts/portal_still_alive.mp3'; document.forms['_id1'].submit(); return false;" class="active">Delete <span class="skip"> [Podcast Title]</span></a>

Major

Links

Onclick popup link to word definition that cannot be closed using the keyboard. Link text is "podcatcher" and on tool home page  and on options page

Add JavaScript command "onBlur" to toggle the popup off instead of just an onmouse out event.

<a class="active" onmouseover="this.style.cursor='pointer'; return false;" onmouseout="hidePopup('podcatcher');" onclick="showPopupHere(this,'podcatcher'); return false;" onblur="hidePopup('podcatcher');" href="" style="cursor: pointer;">podcatcher:</a>

Minor

Links

Image link with title, hidden text description, alternative attribute, "Expand/ Contract Navigation"

Use either alternative text on image or hidden text, not both. Also make the alternative text more specific

<a title="Expand/Contract Navigation" href="http://confluence.sakaiproject.org/pages/editpage.action#" id="toggleToolMenu"><img alt="Expand Tool Navigation" src="/portal/styles/images/transMin.png" id="toggleToolMax" style="display: inline;"><img style="display: none;" alt="Contract Tool Navigation" src="/portal/styles/images/transMin.png" id="toggleNormal"></a>

Minor

Images

Alternative text not very descriptive

Add more descriptive alternative text

<img src="/library/skin/default/images/logo_inst.gif" alt="Sakai Logo" title="Logo">

Minor

Ask gonzollo about this.

Page Structure / Markup

Individual Podcasts should be designated by headings

Change podcast titles from span to heading tags

<h4 class="podTitleFormat">Still Alive</h4>

Minor

Page Structure / Markup

All form fields are unlabeled on add podcast page

Add label tags for All form fields

<td><label for="podAdd:podfile.uploadId">Choose a file</label></td>
<td>
<input type="file" size="35" name="podAdd:podfile.uploadId" id="podAdd:podfile.uploadId">

Blocker

SAK-19722

Page Structure / Markup

Required date format should be included in form label on add podcast page

Move required date format into label tag

<td><label for="podAdd:addDate">Publish Date/Time     <br />(Format: MM/DD/YYYY HH:MM AM/PM)</label></td>
<td>
<input type="text" value="" size="28" id="podAdd:addDate" name="podAdd:addDate">                                                                                                          

Major

Page Structure / Markup

Required field indicator should be included in form label on add podcast page

Move required  field indicator into label tag

<td><label for="podAdd:podfile.uploadId"><span class="reqStarInline">*</span>   Choose a file</label></td>
<td>
<input type="file" size="35" name="podAdd:podfile.uploadId" id="podAdd:podfile.uploadId">

Major

Page Structure / Markup

All form fields are unlabeled on options page

Add label tags for All form fields

Major

Page Structure / Markup

H3 heading "Options" should be more specific on options page

Change heading text

<h3>Podcast Options</h3>

Minor

Page Structure / Markup

H3 heading "Permissions" should be more specific on permissions page

Change heading text

<h3>Podcast Permissions</h3>

Minor

Page Structure / Markup

All form fields are unlabeled on permissions page

Add label tags for All form fields

Major

Page Structure / Markup

All form fields are unlabeled on edit podcast feed page

Add label tags for All form fields

Major

Access Keys

Access keys interfere with IE keys commands - "add" access key on add podcast page

Change access key so it does not interfere with browser key commands

Minor

Access Keys

Access keys are repeated - "cancel" access key on add podcast page, options page, permissions page, edit podcast feed page

Change access key so they are unique

Minor

Frame Titles

Frame title not unique on add podcast page

Change frame title so it is unique

<iframe name="Maincbfea000x5090x4a77x9ff0x6094239f13ad"
        id="Maincbfea000x5090x4a77x9ff0x6094239f13ad"
        title="Add Podcasts"
        class ="portletMainIframe"
        height="475"
        width="100%"
        frameborder="0"
        marginwidth="0"
        marginheight="0"
        scrolling="auto"
        src="http://qa1-nl.sakaiproject.org/portal/tool/cbfea000-5090-4a77-9ff0-6094239f13ad?panel=Main" >
</iframe>

Minor

Style sheets / Linearization

No issues

Text Zoom

No Issues

Tab Order

Focus is not visible for "skip to" links

add CSS styles so that when "skip to" links receive focus they appear on the page

.skip:focus

                position:relative;
                font-size:12px;
                left: 20px;
                top:0px;
                color:#000000;

Major

Tab Order

Focus is not visible for "expand/ contract Navigation" image link

Edit CSS style outline for focus class so focus becomes visible

#toggleToolMenu:focus

outline:medium;

Major

Functionality

No issues

Color

Tool link color does not meet the required 4.5:1 contrast ratio. Login/logout, and footer text

Change the color of the link text

#0077B5 is an acceptable color for blue on white links.

Major

FAE Results

No issues

Browser/OS Used:

Firefox 3.6.11, Windows 7

Sakai Tool:

Podcast

Page(s) Tested:

Podcast Home page

Date:

10/22/2010

QA Server:

qa1-nl (svn tags/sakai_2-8-0 alpha2 _Branch QA using MySQL 5/InnoDB, Java 1.6.0_17 amd64 - DEMO - Sakai 2.8.0-a02 (Kernel 1.2.0-rc01)- Server qa1-nl

Links

Non--descriptive "Download " links on Podcast Homepage.  These links are duplicated for each new podcast added, but do not provide context for adaptive technology users as to what podcast they pertain to.

Add more contextual information, which could be hidden with CSS to all podcast links. Example:

<a href="http://qa1-nl.sakaiproject.org/access/content/group/0b2da6f5-12ae-4a16-a4b4-139d9ba0105b/Podcasts/portal_still_alive.mp3" target="_self" class="active">Download <span class="skip"> [Podcast Title]</span> </a> (5.4MB MP3 )  | <a href="http://confluence.sakaiproject.org/pages/editpage.action#" onclick="document.forms['_id1']['_id1:_idcl'].value='_id1:_id38:0:_id49';document.forms['_id1']['resourceId'].value='/group/0b2da6f5-12ae-4a16-a4b4-139d9ba0105b/Podcasts/portal_still_alive.mp3'; document.forms['_id1'].submit(); return false;" class="active">Edit <span class="skip"> [Podcast Title]</span></a>| <a href="http://confluence.sakaiproject.org/pages/editpage.action#" onclick="document.forms['_id1']['_id1:_idcl'].value='_id1:_id38:0:_id52';document.forms['_id1']['resourceId'].value='/group/0b2da6f5-12ae-4a16-a4b4-139d9ba0105b/Podcasts/portal_still_alive.mp3'; document.forms['_id1'].submit(); return false;" class="active">Delete <span class="skip"> [Podcast Title]</span></a>

Major

Links

Onclick popup link to word definition that cannot be closed using the keyboard. Link text is "podcatcher" and on tool home page  and on options page

Add JavaScript command "onBlur" to toggle the popup off instead of just an onmouse out event.

<a class="active" onmouseover="this.style.cursor='pointer'; return false;" onmouseout="hidePopup('podcatcher');" onclick="showPopupHere(this,'podcatcher'); return false;" onblur="hidePopup('podcatcher');" href="" style="cursor: pointer;">podcatcher:</a>

Minor

Links

Image link with title, hidden text description, alternative attribute, "Expand/ Contract Navigation"

Use either alternative text on image or hidden text, not both. Also make the alternative text more specific

<a title="Expand/Contract Navigation" href="http://confluence.sakaiproject.org/pages/editpage.action#" id="toggleToolMenu"><img alt="Expand Tool Navigation" src="/portal/styles/images/transMin.png" id="toggleToolMax" style="display: inline;"><img style="display: none;" alt="Contract Tool Navigation" src="/portal/styles/images/transMin.png" id="toggleNormal"></a>

Minor

Images

Alternative text not very descriptive

Add more descriptive alternative text

<img src="/library/skin/default/images/logo_inst.gif" alt="Sakai Logo" title="Logo">

Minor

Page Structure / Markup

Individual Podcasts should be designated by headings on podcast home page

Change podcast titles from span to heading tags

<h4 class="podTitleFormat">Still Alive</h4>

Minor

Style sheets / Linearization

No issues

Text Zoom

No Issues

Tab Order

Focus is not visible for "skip to" links

add CSS styles so that when "skip to" links receive focus they appear on the page
.skip:focus

position:relative;
font-size:12px;
left: 20px;
top:0px;
color:#000000;

Tab Order

Focus is not visible for "expand/ contract Navigation" image link

Edit CSS style outline for focus class so focus becomes visible

#toggleToolMenu:focus
outline:medium;

Major

Functionality

No issues

Color

Tool link color does not meet the required 4.5:1 contrast ratio.

Change the color of the link text

#0077B5 is an acceptable color for blue on white links.

Major

FAE Results

No issues