Authoring for Accessibility

The College is committed to creating accessible web pages.

Please read the following article: http://www.macromedia.com/macromedia/accessibility/article/contribute_content/index.html . You may want to skip the section "Selecting an Accessible Template" since EdWebs already has templates chosen.

Adding Documents and Accessibility

Microsoft Word, PDF, Powerpoint, and other types of documents can easily be added to web sites.  These formats are helpful in making content printable, dynamic, and otherwise "rich".  However, many of these formats present accessibility problems. Please make web page alternatives of these documents. 

WebAIM explains problems and solutions with some types of documents on their site: PDF Word  PowerPoint  One solution for Microsoft Word, Powerpoint, and Excel documents is Accessible Web Publishing Wizard for Microsoft Office which is developed at UIUC and is available free from Webstores.  It is a great way to convert Microsoft Word, Excel and Powerpoint presentation into accessible web pages.  To download it, go to webstores and search for "office".

Presentations on Microsoft Word and PowerPoint accessibility practices are available at: http://www.accessiblewizards.uiuc.edu/wcarchive.php

 

Accessibility Resources

Background and Why?

  • Video: Keeping Web Accessibility in Mind. Gain an appreciation of Web accessibility by understanding the user perspective. This 11 1/2 minute video provides an excellent overview of the difficulties user's with disabilities face on the Web and some of the motivations for Web accessibility
  • The first 5 "days" of Dive Into Accessibility illustrate through narratives how different combinations of physical, mental, and technological disabilities make the internet difficult to use.
  • How a blind person will "see" your web page. A comparison of an inaccessible and accessible web page as read by a screen reader.

Tip Lists

Training and References

 

Specific Techniques

Improper Use of H1, H2, etc. Tags

Problem

Heading levels are sometimes chosen for appearance rather than the appropriate level of the page outline.  Some pages have more than one level 1 heading and skip level 2 headings.

Solution

  • Web pages should have a single level 1 heading and a basic  outline should be discernable from level 1, 2, 3 etc  headings.
  • Style the first text of your web page with the “Heading 1” style.  Only use one “Heading 1.”  Make the Heading 1 unique within all your web pages as it is used to derive the page title.
  • Style the next level of the hierarchy with “Heading 2” style and so on.  A longer page may even need “heading 3” styles.

An example of good use of headers is: http://www.ed.uiuc.edu/about/organization.html.  It has 1 Heading 1 (An Overview of Our Organization).  Beneath it are two Heading 2s (Office of the Dean, Academic Departments, and Research Service and Support Units.)  Beneath these are heading 3s for the individual units.

Outcomes

  • Visually impaired, and those with motor skill problems  are better able to navigate your site using header navigation.
  • College of Education site has more consistent look because of consistent use of headings.
  • Improved Google rankings of your site.  Heading content has a higher value in Google indexing.   Heading level 1s are also used to generate the page title within EdWebs which helps with Google indexing.
  • Web pages more likely to meet accessibility requirements.

 

See Also

http://cita.rehab.uiuc.edu/html-best-practices/nav/major.php

 

Text alternatives to images

Problem

Images either don’t have alt text or alt text is improperly used.  This makes web pages inaccessible to visually impaired users.

Solution

Add an appropriate alt tag to images.  This is done with the image properties dialog in Contribute.   Click on an image to get to it.  The text of the alt tag depends on what the image is intending to convey (see http://cita.rehab.uiuc.edu/html-best-practices/text/).  For example an image of a faculty member might simply have the alt text “Photo of Professor X”.  If the image of the faculty member is in a park looking at the trees and this is the meaning you are conveying, the alt text might say “Photo of Professor X pensively looking at trees”

Outcomes

  • Visually impaired users are better able participate in your site.  They don’t have to question what a graphic with no alt text is trying to convey.
  • Users with slow connections or handheld devices with images turned off will understand content better.
  • Better Google indexing. Google will index alt text, but not images.
  • Web pages are more likely to meet accessibility requirements.

See Also:

Using tables for layout

Problem

Tables are used for positioning content on a page.   This makes pages less accessible and harder to view on large and small screens.

Solution

Don’t insert tables using Contribute unless they are used for tabular data (data that is best conveyed with rows and columns).  When inserting a table in Contribute pick one of the templates with a header row or column.  Add headings to those header cells.  See http://www.webaim.org/techniques/tables/data.php   Don’t add tables within tables of data.

Outcomes

  • Visually impaired users are better able to understand your data tables.
  • College of Education site has more consistent look because of consistent use of tables.
  • Web pages are more likely to meet accessibility requirements.

See Also

http://www.webaim.org/techniques/tables/data.php

 

 


Semantic Microformats for Addresses

College of Education
1310 S. 6th St.
ChampaignIL 61820, USA
(217) 333-0960
Fax(217) 333-5847
40.101432-88.230257