Sakai 2.7 Accessibility Evaluation Protocol -- Firefox Toolbars Version

Owned by Former user (Deleted)
Last updated: Feb 11, 2010Version comment
6 min read

Here is the protocol for testing Sakai 2.7 accessibility using Firefox and the Firefox Accessibility Extension. It is one of two accessibility test protocols for Sakai 2.7; the other is a test using the JAWS screen reader. A template and a completed form for reference are contained in Attachments, and can be found in the following links:

Background

This is a protocol for testing Sakai 2.7 accessibility using the Mozilla Firefox Web Browser and the Firefox Accessibility Extension on a PC or a Mac.

If there are any questions or concerns on using this testing protocol, please email the Accessibility Working Group, or the group lead in charge of the testing (currently Brian Richwine (brichwin@indiana.edu)) - please be sure to start the subject line with "Sakai Accessibility Testing".

Required Skills

To use this protocol and report the results effectively, requires knowledge and expertise across many areas, including:

  • Experience using and configuring the Mozilla Firefox Web browser
  • Accessibility evaluation tools, Web validation tools, and approaches for evaluating Web accessibility
  • (X)HTML, CSS, JavaScript, and related Web technologies
  • Web accessibility issues, especially of the barriers facing people with disabilities
  • Adaptive/Assistive Technologies (AT) and strategies for overcoming barriers
  • Accessibility Laws, Guidelines, Standards, and Best-Practice Techniques. Particularly:
    • Web Content Accessibility Guidelines (WCAG) 1.0 and 2.0, and Techniques
    • Section 508 § 1194.22
  • Sakai 2.7 Functionality and Operation

Tools

The following tools will be used in this protocol:

  • Firefox 3.5.x
  • Firefox Accessibility Extension 1.5.58 (or higher)
  • WAVE Firefox Toolbar 1.1 (or higher)
  • Firebug 1.4.5 (or higher)

Results should be entered into the reporting template (Attached). Finished reports should be named using the following scheme, and posted as attachments to the Sakai 2.7 Accessibility Review page. The Accessibility Working Group lead will review the results, issue and follow up on any necessary JIRA tickets, and summarize the results.

Getting Set-up for Testing

These instructions are for reviewing Sakai 2.7 accessibility using a PC or Mac OS X with Mozilla Firefox and associated accessibility plug-ins.

  1. If Mozilla Firefox Web browser version 3.5.x is not installed, download and install it from here: http://www.mozilla.com/.
  2. If Firefox Accessibility Extension version 1.5.58 (or higher) is not installed, install it using the directions here: http://firefox.cita.uiuc.edu/
  3. If WAVE Firefox Toolbar version 1.1 (or higher) is not installed, install it using the directions here: http://wave.webaim.org/toolbar
  4. Other than the above Firefox plug-ins, please try to have Firefox running in as close to the default settings as possible.

Accessibility Evaluation

Step 1 - Configuring Firefox and Accessing the Tool to Test

  • Make sure Firefox and necessary plug-ins are configured as discussed in Getting Set-up for Testing above.
  • Make sure Mozilla Firefox is configured as close as possible to the default settings.
    • Make sure JavaScript is enabled (Choose Tools, Options from the menu. The Enable JavaScript checkbox is on the "Content" tab in Firefox's "Options" dialog box).
    • Make sure no security plug-ins (such as noscript, ad blockers, etc.) are running that might interfere with accessing and using Sakai.
    • Reset Firefox's Text Zoom (Choose View, Zoom, Reset from the menu or press Ctrl+0)
  • Make a fresh copy of the Firefox Toolbars Review Reporting template and name it something like "Resources_2.7_Firefox_Toolbars_Review.doc"
  • Log into the desired Sakai 2.7 QA Server and find the tool you will be testing. If any difficulties are encountered accessing and using the tool, please email the group lead in charge of the testing (currently Brian Richwine -- brichwin@indiana.edu) - please be sure to start the subject line with "Sakai Accessibility Testing".

Step 2 - Links

Go to the Accessibility Extension toolbar, click on the Navigation icon and select "Links". There should be no links with the same text (a redundant link) that go to different locations or perform different functions. The purpose of each links should be self-explanatory (can be determined from the link text alone). Move your cursor over links to see if additional information has been added to improve context through the use of the title attribute.

Check for:

  1. redundant link names
  2. Descriptive / meaningful link text

Write your findings in the template next to "Links".

Step 3 - Images

Go to the Accessibility Extension toolbar, click on the "Options" icon and select "Reset styling and settings". Then, go to the Accessibility Extension toolbar, click on the "Text Equivalents" icon and select "List of Images".

Check for:

  1. Alternative text for every image that conveys content
  2. Alternative text succinctly describes content without being too vague
  3. Images that have a function have alternative text that describes the function
  4. Decorative graphics should be background CSS images or have empty alt attribute values (alt="" - no space)
  5. Images placed with describing element text content have empty alt attributes to avoid redundancy.

Write your findings in the template next to "Images".

Step 4 - Page Structure / Markup

Use the "Structure/Order" icon and the "Outline" icons on the WAVE toolbar and the Firebug plug-in's Inspect tool as needed to examine for appropriate page structure and markup. Page markup should be used in a semantically correct way that facilitates accessibility using heading tags for headings, list tags for lists, table tags for data tables, paragraph tags for paragraphs, etc.

Check for:

  1. meaningful/informative heading labels
  2. an accurate hierarchy (h1, h2, h3, etc.)
  3. duplicate headings
  4. appropriate use of headings to designate sections of content
  5. correct semantic markup is used to designate headings (<h1>), lists (<ul>, <ol>, <dl>), emphasized text (<strong>), abbreviations (<abbr>), text (<blockquote>, <code>, <p>), data tables (<tables>), etc.
  6. Data tables have summaries and table headings (and their associations to cells) as appropriate.
  7. Text labels are associated with form input elements (<label> tags, title attributes, etc.)
  8. Related form elements are grouped with fieldset/legend.

Write your findings in the template next to "Page Structure / Markup".
Click the "Reset Page" icon on the WAVE toolbar and turn off the Firebug plug-in as needed.

Step 5 - Access Keys

Go back to the Accessibility Extension tool bar, click on the Navigation icon, and select "Access Keys." Check that access keys are:

  1. present
  2. unique.

The accesskey attribute, introduced in HTML4.0, is intended to provide keyboard shortcuts in that they provide an alternative form of navigation. (Mac: Use the ctrl key rather than the option key to test accesskeys.)  The accesskeys currently contained in Sakai are:

Sakai Accesskeys
Application-wide:

Alt + c = Skip to content
Alt + l = Beginning of Tools list (the letter "l")
Alt + w = Beginning of Worksite tabs
Alt + 0 = Accessibility page
Alt + 6 = Portal help page

Tool-specific:

Alt + e = Edit or Revise
Alt + h = Tool help page
Alt + s = Save
Alt + u = Manual refresh
Alt + v = View or Preview
Alt + x = Remove, delete or cancel

Write your findings in the template next to "Access keys".

Step 6 - Frame Titles

Go back to the Accessibility Extension tool bar, click on the Navigation icon, and select "Frames." Check that frame titles are:

  1. unique
  2. meaningful

Write your findings in the template next to "Frame Titles".

Step 7 - Stylesheets / Linearization

On the WAVE tool bar, click on the "Text-only" icon. Check that:

  1. the page is readable
  2. reading order makes sense.

Write your findings in the template next to "Stylesheets/Linearization".
Click the "Reset Page" icon on the WAVE toolbar to reset the view.

Step 8 - Text Zoom

On the Firefox menu bar, click the "View" menu, then the "Zoom" sub-menu, and make sure the "Zoom Text Only" option is checked. Select "Reset" from the "Zoom" sub-menu, or press "Ctrl+0" to reset the zoom level. Then, select "Zoom In" (or press "Ctrl++") four times. Check that:

  1. all the text still visible. No areas overlap.
  2. the context of everything still visible?
  3. headings, labels, icons, and other visual cues are still correctly associated with their content
  4. columns shift and realign correctly

Write your findings in the template next to "Text Zoom".
Select "Reset" from the "Zoom" sub-menu, or press "Ctrl+0" to reset the zoom level.

Step 9 - Tab Order

Use the tab key to navigate through the entire page. A dotted box should show you the focal point. As you tab through the application, check for the following:

  1. tabbing moves in a logical fashion
  2. focus remains visible at all times
  3. all links, controls, and other key items receive focus
  4. tabbing does not trigger page actions

Write your findings in the template next to "Tab Order".

Step 10 - Functionality

Move through the application again using a combination of the tab key and arrow keys. The convention for standard HTML pages is to cycle through each link one at a time using the Tab key. Controls such as buttons and links are activated using the Enter key. Selections such as setting radio buttons and checkboxes are made with the Spacebar. Tables and forms can be navigated using arrow keys.

Make sure you can navigate and use the page entirely with the keyboard:

  1. you can access all links, menu items, and other controls/functions on the page
  2. you can access all form fields, controls, and buttons
  3. you can activate all controls with either the space bar or enter key
  4. you don't get stuck or trapped and have to use the mouse

Write your findings in the template next to "Functionality".

Step 11 - Color

On the Accessibility Extension tool bar, click on the "Style" icon and select "Colour Contrast". Check that:

  1. color is not used as the sole method of conveying information
  2. text (and images of text) have a luminosity of at least 4.5:1

Write your findings in the template next to "Color".

Step 12 - FAE Report

On the Accessibility Extension tool bar, click on the "Reports" icon and select "Accessibility Issues". Check to see if the FAE has caught any other accessibility issues.

Step 13

Go to the next page, function, or feature of the Sakai tool.

Step 14

Repeat steps 8 through 16 until the tool has been completely exercised.

Step 15

Save your review by attaching it to the Sakai 2.7 Accessibility Review Results page of confluence using a description such as "Resources_2.7_FirefoxToolbars_Review".