Web Accessibility Guidelines by MS University

Michigan State University (MSU) aims to improve access of its web pages. It should be accessible, usable, and aesthetically pleasing web design. Their guidelines will help web documents more reachable by wider audiences and user-agents, remove significant barriers, and readily accessed by all.

The protocol can be found at The Usability & Accessibility Center (UAC). It is based on Section 508, Web Content Accessibility Guidelines (WCAG) 1.0 by World Wide Web Consortium (W3C), and best practices themself. Yes, there are some semi-automatic validation and checker tools. But they cannot identify all issues. Manual human review is still essential.

This UAC guideline is another sample of accessibility protocols. Previously, on Dani Iswara .Net, there are already some best practices (all in bahasa Indonesia):

• ITB Web Guidelines.
• Web Accessibility Evaluation.
• Web Guidelines of Petra Christian University.

This long post contain a lot of quotations of UAC checkpoints and my little review on it.

The UAC has the pdf of its Web Accessibility Review Form for internal purposes.

Here are the checkpoints:

General

• Images containing content are described by meaningful alt and longdesc (as needed) attributes.
• Content is understandable without the use of color.
• Page content is read in the correct order without style sheets.
• There are no flickering images in the site.
• An alternative text-only page is provided if the Web page cannot be made accessible.
• A “Skip to Main Content” link is provided at the top of each Web page.
• Users are notified of and can delay an impending timeout.
• Changes in content language are indicated by HTML code.
• Alternative (static) content is updated when dynamic content changes.
• Clear and simple language is used throughout the site.

Tables

• Row and column headers are identified in data tables.
• Data tables with two or more levels of headers contain markup to associate data cells and header cells.

Frames

Frames have meaningful titles.
It is recommended that you avoid using frames whenever possible, since frames can complicate navigation and presentation…

Forms

Forms work properly and can be completed successfully using assistive technology.
Every input field in a form should have an informative label, but not all labels have to be visible (such as a label for a submit button).

Applets, Plug-ins, and Scripts

• Java, JavaScript and other active features work with assistive technology.
• Links are provided to download plug-ins or applets if they are required to use the site.

Image Maps

• Client-side image maps have alt attributes.
• Text links are provided if a server-side image map is necessary.
• Client-side image maps are used instead of server-side image maps.

Multimedia

• Supplementary audio information is provided for video and multimedia presentations.
• Synchronized captioning is provided for video and audio presentations.

On their Section II. Recommended Checkpoints, they have:

General

• Documents contained in Web site are formatted to be accessible.
• Testing has been done to ensure cross-browser/cross-platform compatibility.
• Site validates to XHTML 1.0 Transitional and CSS 2 protocols.
• !DOCTYPE is included on all Web pages.
• Web content does not blink.
• Web pages either do not refresh automatically or can be controlled by user.
• Web pages do not redirect automatically or can be controlled by user.
• Current W3C specifications and methodologies are followed.
• Meta-data includes page description and keywords.

For the cross-browsers platform, their page at Browser Standards recommended:

• An elastic or liquid layout for 800×600. But they realize, the trend is 1024×768 now.
• Optimized for Internet Explorer 6.0+, Mozilla Firefox 2.0+, and Safari. Based on their visitor’s statistic.

The use of meta keywords are no longer needed as Google said, it is already overuse.

Navigation

• User is informed when his/her action will cause a new page or popup window to appear.
• User is notified when link connects to a PDF file.
• Frames include information about their purpose and relationships (as needed).
• Link text makes sense out of context.
• Text is not repeated for different links.
• Visited links are differentiated from non-visited links.
• Web site has a site map.

Presentation and Content

• There is sufficient contrast between foreground (text) and background colors.
• Blockquote attribute is used for quotations and not indentation.
• CSS is used to format text.
• Relative units are used for sizing and positioning Web site content.
• Header elements are used to convey document structure.
• Related items and sub-navigation links are contained in lists.
• Abbr and acronym elements are used.
• Large chunks of information are divided into more manageable groups.
• Navigation, page structure, presentation and coding are consistent throughout site.

abbr or acronym? Since HTML 5 will only use abbr, so you have to rethinking it if there is a plan to change the doctype later.

Style of Writing

• Pages are organized to enhance comprehension and navigation.
• Sentences are short, to the point and consistently structured.

Tables

• CSS is used for page layout and presentation.
• Tables make sense with style sheets turned off.
• Tables are not formatted using structural markup.
• Data tables contain summary and caption attributes.

Forms

• Labels precede input fields; labels follow checkboxes and radio buttons.
• Labels are explicitly associated with form controls.
• Important information is not contained between input fields.

Screen reader will not read information between input fields. If any, put in on label.

Applets & Scripts

• Web site is fully functional using only the keyboard.
• Dynamic content is accessible or provided in an alternative, accessible format.
• Content is not animated on site or can be controlled by user.
• Event handlers are coded to be device-independent.

Interesting point is mentioned on Section III. Recommendation on Documenting Web Page Accessibility on a Site.

Rather than showing validation and accessibility logos on site-wide web pages (eg. footer)–which might not fully standards compliance or accessible, it is suggested that we should make an accessibility page that inform our efforts to comply the available standards and guidelines.

I agree that we should not make a site-wide claim of accessibility or standards compliance. Except, all of your pages actually do! See their accessibility support page.

If for some reason you have to put those logos, it should denote compliance on a page-by-page basis.

For further explanation of those checkpoints, please read Interim Technical Guidelines on UAC website.

Why should we follow that or this checkpoints? I have a post about common questions and answers of weblog design structure at Questions on Weblog Design, in bahasa Indonesia.

You may share your expertise on the comment section.

Share on: Delicious™ | Digg™ | Facebook™ | Twitter™.