PBDS 660: Introduction to Hypermedia

Access for All

In 1998, Congress amended the Rehabilitation Act to require federal agencies to make electronic and information technology accessible to people with disabilities. This amendment was called Section 508.

The law applies to all federal agencies when they develop, procure, maintain, or use electronic and information technology.

Briefly, the technical standards cover the following types of technologies:

• software applications and operating systems;
• Web-based information or applications;
• telecommunication products;
• video and multimedia products;
• self contained, closed products (e.g., information kiosks, calculators and fax machines) plus desktop and portable computers.

The criteria for Web-based technology and information are based on access guidelines developed by the Web Accessibility Initiative of the World Wide Web Consortium.

Section 508

There are sixteen requirements of Section 508 that cover the technical requirements of web sites and web-based applications. They are...

1. Alt Lifestyles
   A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
2. InSync
   Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
3. Color Me Badd
   Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
4. Out of Style
   Documents shall be organized so they are readable without requiring an associated style sheet.
5. Who UServer-side Image Maps
   Redundant text links shall be provided for each active region of a server-side image map. [Who uses server-side image maps? No one in this class does.]
6. Client-side Image Maps
   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. [Who uses server-side OR client-side image maps? No one in this class does.]
7. Headless Horseman
   Row and column headers shall be identified for data tables.
8. Really Headless Horseman
   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.
9. Frames
   Frames shall be titled with text that facilitates frame identification and navigation. [Who uses frames? No one in this class does.]
   
   For a discussion of when and how to use frames, see this Web Style Guide.
   
   
10. Japanese Anime Seizure Rule
    Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
11. 1,000 Words is Worth a Picture
    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.
12. Right Tool for the Job: Scripting
    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.
13. Plug it in, plug it in.
    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).
14. Forms
    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.
15. Skip Navigation
    A method shall be provided that permits users to skip repetitive navigation links.
16. Ticketmaster Rule
    When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Usability testing consists of a set of quantitative and qualitative research techniques that allow the assessment of a web site's goals with a specific type of audience (e.g. demographic factors, etc.).

• Demonstrating 508 compliance problems is one of many applications of usability testing.
• Tests often take place in a laboratory setting but sometimes are conducted in more "natural" settings.
• Tests are most often conducted with one user at a time.
• Important techniques include tracking eye movements (with specialized equipment); measuring users' time on task; assessing how easy it is for users to find what they need; gauging the readability of information on the screen.
• Well-designed and conducted tests with even 10 or 12 users can shed light on design issues.

Ideally, every page you build for your final project should be tested in the following circumstances at a minimum:

• Internet Explorer Versions 6 and 7 on a PC
• Mozilla based browser (Firefox) on a PC and MAC
• Safari on the MAC
• 800 by 600 resolution and up
• Flat screen versus CRT monitors

In addition, all pages should be viewed and functional with or without stylesheets turned on.

I won't hold you to all these specifications, but the last one is especially important (because of the screen-reader issues), so be thoughtful about how you mark up your documents and then apply styles to the mark-up.

We will discuss these issues and key strategies for achieving highly usable Web documents in greater detail next week.

Most of the complex layouts you see on the Web today employ multi-column formats, for several reasons:

• they keep text lines from becoming uncomfortably long
• they keep important material visible "above the fold" (think links and also advertisements)
• they create visually dynamic and sometimes stylish pages

Before robust CSS (meaning CSS2) came along, such things were organized by tables. But we know that tables are really meant only for tabular data, not layout tricks. So what to do?

Send in the CSS gurus, that's what!

These things are still not easy to accomplish and the "fixes" are not fool-proof. BUT the situtation is improving.

Before we get too deeply into the column business, we might need to do a little more with the box model. Here I refer you to Kevin Hoffman's lecture notes on the subject.

One of the tricky problems with multi-column formats is that it is hard to get the layout to display properly while at the same time honoring the 508 requirements we just reviewed.

Why? Because the order of elements in the HTML layer remains important for older browsers, which might not concern us overly much these days, and (here's the important part) for screen readers, which should concern us a lot.

"Liquid" Layout Solutions

Two weeks ago, when you were working with CSS Exercise 2, you had to reorganize the order of the HTML mark-up in order to get the navigation menu to appear at the left side of the screen. In the mark-up, the div containing that menu had to occur before the div containing the main content of the pages. But that is not always the way you want your mark-up to be written.

With a little cunning and a bit of luck, it is possible to display chunks of information in any horizontal order, regardless of the order in which the divs occur in the mark-up. So here's an example of a 3-column layout in which the first block of text (in mark-up order) becomes the middle column in the display: Multiple Columns Example. To see how it is done, view the source code for the page. The style specifications are in the head of the document.

There are still a lot of problems with this set of tricks. For a complete technical explanation of the whole thing, see Alex Robinson's One True Layout page on the positioniseverything site.

Fixed (Solid?) Layout Solutions

And here's a different technique, using absolute positioning (your results may vary, but this method is probably more secure if less 508-compliant and friendly).

1. Create a web page with four divs, one for the top of the page, and one for each of three columns.
2. Give each div a unique ID.
3. Put some content in each div describing its function on the page and its order in the mark-up.
4. Create an external style sheet (or internal style container) to establish the positions of each of the three columns and the header element. Use the "liquid" method.
5. Give each div a different background color so you can see where things begin and end.
6. Experiment with different widths for your columns.
7. Now experiment with fixed positioning.
8. If you get this far, add a footer element (a fifth div with its own unique ID) for the bottom of your page.