Web Developer Extension for Firefox

Nathan White

Presented by the Great Lakes ADA & IT Center

About this Presentation

This presentation is a structured XHTML document that uses a combination of CSS and JavaScript to be viewable as a presentation with many PowerPoint like qualities. This presentation is powered by Eric Meyer's S5 system, and complies with the OSF format. The file size of this presentation is many times smaller than a comparable PowerPoint presentation, and the content is accessible to any device that can access web content.

The URL of this presentation is:

http://www.natewhite.com/present/web_toolbar.php

Overview

Web Developer Toolbars for various browsers offer quick and easy methods to assess two key components of web accessibility:

• Structural Integrity of HTML
• Graceful Degradation

This session will explore how the Web Developer Extension can be used to examine documents, while suggesting best practices for the accessibility of various HTML elements. While many websites will be used as examples of using the toolbar, participants are encourgaged to assess their own websites throughout the presentation.

Background: Thoughts on Web Architecture

• Web Pages vs. Typewriter Pages
• Separating Presentation (CSS) and Structure (XHTML)
• Standards and Accessibility
• "Compliance" and Good Design

Where to Find Developer Toolbars

Web Developer (or accessibility) toolbars with a similar feature set are available for several browsers:

• Web Developer Extension for Firefox
  (http://chrispederick.com/work/webdeveloper/)
• Web Accessibility Toolbar for Internet Explorer
  (http://www.visionaustralia.org.au/ais/toolbar/)
• Web Developer Toolbar and Menu for Opera
  (http://nontroppo.org/wiki/WebDevToolbar)

Structural Integrity of HTML Elements

• Images
• Text
• Colors
• Tables
• Frames
• Forms

Image Accessibility – 1 of 2

• All images must have an alt attribute
• Images used for spacing or layout should have an empty alt tag: <img src=“image.gif” alt = ““ />
• Descriptions in an alt tag should be concise
• For charts, graphs, maps, or complex images provide contextual or linked long descriptions
• With background images, watch for contrast issues

Image Accessibility – 2 of 2

• Server-side image maps have significant accessibility problems – redundant text links must be provided.
• ...use client side image maps
• Ensure all areas have appropriate alt text description

Image Accessibility - Using the Toolbar

The Web Developer toolbar provides options to disable images, outline images, display alt text for images, replace image with alt text, and more.

We'll assess the images at the home page of Sandisk.com.

Follow along by using the tools to consider images at your own website.

Text Accessibility – 1 of 2

• Use CSS to style text
• Specify relative, not absolute font sizes
• Avoid use of <b> or <i> to style text inline
• <strong> or <em> element may be used to suggest emphasis
• Don’t rely on formatting (presentation) alone to specify meaning

Text Accessibility – 2 of 2

• Specify changes in natural language with lang = “xx” attribute
• Use <abbr> and <acronym> tags appropriately.
  • Ex. Welcome to the <abbr title = “World Wide Web”>WWW</abbr>
  • Ex. Do you like <acronym title= "North Atlantic Treaty Organization">NATO</acronym>
• Use <blockquote> for quotations, not for indentation
• Use header tags consistently and appropriately on all pages

Text Accessibility - Using the Toolbar

Primary, we want to ensure that text on a website is marked up with the appropriate structural HTML tag. The Web Developer toolbar has several features which can be helpful:

• Information - Show Document Outline
• Outline - Outline Headings
• Outline - Outline Block Level Elements
• Outline - Current Element
• Outline - Outline Custom Elements...

You'll generally want to make sure to have the option "Show Element Names When Outlining" enabled. We'll examine these features using the W3C website as an example.

Color Accessibility

• Ensure sufficient contrast between foreground/background colors
  • Juicy Studio Color Contrast Anaylzer
    (http://juicystudio.com/services/colourcontrast.php)
• Avoid signifying meaning with color alone
• Assess whether the page is accessible to individuals with color-blindness
  • VisCheck Color-Blindess Simulator
    (http://www.vischeck.com/vischeck/vischeckURL.php)

Color Accessibility - Using the Toolbar

The Web Developer extension has a limited toolset for analyzing color accessibility issues. Other toolbars link to resources that assess color contrast, or provide mechanisms to change the screen depth on the page.

• View - Color Information
• Disable - Page Colors

Try to disable page colors on your own site - we'll take a look at an example of an Accessible University website form that conveys meaning with color alone.

Table Accessibility – 1 of 3

• Avoid using tables for layout
  • CSS2 allows for absolute positioning of elements
  • Tables are intended for tabular data
• Use table header tag <th> for row and column headers, <td> for tabular data
• The table summary attribute is for a concise summary of table content
  • Layout tables: use summary=““

Table Accessiblity – 2 of 3

• Tables with multiple headers may be difficult to navigate
• Use scope=“row” or scope=“col” attribute
• Multiple headers for a single cell can be explicitly identified – each header must have an id=“x” attribute, and the data cell a headers=“x y z” attribute

Table Accessiblity – 3 of 3

• Screen readers support for table accessibility features varies widely
• <thead> and <tfoot> tags not widely implemented, headers=“x” support limited
• Consider simpler design for complex tables
• Ensure layout tables are logical when linearized

Table Accessibility - Using the Toolbar

• Miscellaneous - Linearize Page
• Information - Table Information
  • note: does not show TH cells with no stated scope
  • Information - Table Depth

  Jim Thatcher maintains an excellent page on table accessibility where we'll apply the features of the toolbar. An example of problems with linearization can be seen on the registration form we viewed earlier.

Frame Accessibility

• Many of the advantages of frames are available using CSS2 techniques
• If used, name frames appropriately according to their purpose
  • Descriptors like top, left, or right are based upon visual ideas; use titles like “content” or “menu”
• Always provide equivalent content in a <noframes> tag

Form Accessibility – 1 of 3

• Many common accessibility errors appear in forms.
• Ensure descriptive text is adjacent to form field
  • Watch for errors with linear order of table cells!
  • Place descriptive text in same cell as form element
• Always use the <label> element!
• Define a tab order so forms can be navigated logically

Form Accessibility – 2 of 3

• Consider assigning access keys for regularly used form elements
  • Web application used daily by employees
  • Minimal utility for site occassionally used by public
• Provide form validation in an accessible manner
• <fieldset> and <legend> elements are useful for grouping elements in complex forms.

Form Accessibility - 3 of 3

• A quality discussion of the nuances of accessible forms
  (http://www.accessify.com/features/tutorials/accessible-forms/)
• HTML examples of the label element with different form fields (http://www.accessify.com/features/tutorials/accessible-forms/form-examples.htm)

Form Accessibility - Using the Toolbar

• Forms - View Form Information
• Information - Display Tab Index
• Forms - Populate Form Fields

An accessible form at the Northwest ADA & IT Center website provides a good example to explore the toolbar's form features.

Graceful Degradation

• JavaScript
• Cascading Style Sheets

Graceful Degradation - JavaScript

• JavaScript may or may not cause accessibility problems, depending upon its usage
• JavaScript triggered by mouseOver inaccessible to screen readers
• onFocus and onChange event can be triggered by screen reader – not always as expected
• Always provide equivalent content within <noscript> tag – never assume JavaScript

Graceful Degradation - Style Sheets

Assuming style sheet support is available can also be problematic. Pages should have a semantic structure that is meaningful regardless of styling. Examples of problems that can occur from dependence on style sheets include:

• Content may not be visible
• Content order may be incomprehensible
• Elements may appear in content that should be "hidden"

Graceful degradation problems with style sheets are likely to be most pronounced when a website lacks a consistent separation between presentation and structure.

Graceful Degradation - Using the Toolbar

The toolbar can be used to disable javascript, CSS styles, and more. The ability to easily disable these technologies is very useful in simulating different use conditions. Browsers traditionally make it difficult to disable such technologies.

This presentation provides a good example of graceful degradation.

Moving Forward: Thoughts on Implementing Change

• Focus on the future vs. retrofits
• Smart use of templates
• Smart procurement
• WYSIWYG web content editing

Shameless but relevant: Reason CMS

Carleton College has a homegrown content management system called Reason which we are releasing as an open source application.

• Geared towards educational entities
• Encourages standards and accessibility while distributing content management responsibilities
• LAMP foundation, easily extensible
• Support for plug-in themes
• Reason home page
  http://apps.carleton.edu/opensource/reason/

Questions?

• Please ask any questions you haven’t already, or about any particular accessibility issues you may want to explore.

Thanks for coming!