facebook google plus twitter
Webucator's Free Managing Web Design Projects Tutorial

Lesson: Usability and Accessibility Rules

Welcome to our free Managing Web Design Projects tutorial. This tutorial is based on Webucator's Managing Web Design Projects course.

Understanding the implications of usability and accessibility will help you create projects that will be not only user friendly, but section 508 compliant. Creativity and innovative design are still possible while making sure a website project is built for the good of all.

Lesson Goals

  • To define the compliance rules.
  • To understand how the rules impact a project.
  • To enforce the rules.

Define the Rules

16 Rules

The WWC (Worldwide Web Consortium) has established many basic criteria to ensure a site will be enjoyed by all. Depending on your industry and company policy, the strict enforcement of these rule may differ. No matter what your policies are, it is always a good idea to make each project compliant with these 16 core rules. Below you will see the rules as they are posted on the www.section508.gov website. Please refer to this link http://section508.gov/index.cfm?fuseAction=stdsdoc#Web) as the site reflects the latest rules.

Section 1194.22 Web-Based Intranet and Internet Information and Applications

Source: http://section508.gov/index.cfm?fuseAction=stdsdoc#Web

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

(d) Documents shall be organized so they are readable without requiring an associated style sheet.

(e) Redundant text links shall be provided for each active region of a server-side image map.

(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

(g) Row and column headers shall be identified for data tables.

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

(i) Frames shall be titled with text that facilitates frame identification and navigation.

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21(a) through (l).

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

(o) A method shall be provided that permits users to skip repetitive navigation links.

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

How Do They Impact My Project

Impact of Rules on the Project

When putting your project together, the rules should apply to each page or template placeholder in the case of a CMS (Content Management System). Although the visual and layout should be unique and full of creativity, please stay within the rules as far as compliance is concerned.

The following paragraphs were pulled directly from the www.section508.gov site. They make a good point that even though our pages may pass a quick screening process; always try to test using an assistive web browser so you may appreciate the entire process.

Data below provided directly from the https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/guide-to-the-section-508-standards

"The main concern is that all the information and data on the site and all the functionality is barrier-free and can be used by individuals with disabilities, that is, individuals who may need to use assistive technologies () to access the information and data on the site. We need to be sure that the content on the site is available to individuals who are blind, have low vision, who are deaf or hard of hearing, or who have mobility difficulties. Assistive technologies may include screen readers, refreshable Braille, voice recognition, amplification, TTY/ TDD, screen magnification, high contrast color, and all functions are available by using only the keyboard. or not using the mouse. Although you can use automated tools to generate error reports, you must also manually review all of the results. Visual checks may include:

  • Tab through the page and note if the page has a logical top-bottom, left-right flow. (In certain situations left-right, top-bottom may not be a desirable solution.)
  • Meaningful images must have appropriate alt text.
  • Test the page with JavaScript turned off to compare functionality.
  • Ensure that frames are navigable.
  • View all source code (e.g., for tables, forms, scripts, objects, browser bugs if any).

Popular Assistive Technology

Below is a list of assistive technologies and the vendor sites in which you may attain a copy. This is a partial list, there are many others to choose from.

Enforcing the Rules

Evaluating the Site for Compliance

Once a site has been established, it is a good idea to make sure that the entire site is up to the standards. Many software packages, such as Dreamweaver, have built-in tools that test and render a report of suggested changes. If you do not have a software package, many online sources are available to test a site and its compliance.

Link to www.section508.gov evaluation tools: http://section508.gov/index.cfm?fuseAction=webaccess

Links to online options to test a web page:

Using an Online Site Checker

Duration: 15 to 25 minutes.

In this exercise, you will check a site using WAVE (web accessibility evaluation tool): http://wave.webaim.org/

  1. Open a web browser, make sure you are connected to the internet.
  2. Go to http://wave.webaim.org/.
  3. Type the web address of one of your sites, or use www.Google.com.
  4. Review the report. If you use your site, begin to think of changes you can make to your site to improve it.

Solution:

  1. Open a web browser, make sure you are connected to the internet.
  2. Go to http://wave.webaim.org/.
  3. Type the web address of one of your sites, or use www.Google.com.URL Search Boxes
  4. Review the report. If you use your site, begin to think of changes you can make to improve your site.Report Results