Web Accessibility:

 

This website complies with the web design standards of web accessibility as outlined by the W3.org website . If you have any questions or comments, or if you wish to report a bug, please contact us.

 

The following are facts and web-design strategies that I have accumulated over 5 years of practicing web design but failed to implement until now. This website, and the compilation below began as an assignment for a Cyndi Chie's Computer Science 301 class at San Diego State University. Direct quotes come from a single book entitled Access by Design. Please see my other sources at the end of the document.

What it is

 

Web accessibility is defined by the W3.org as allowing “people with disabilities use the Web.” This definition of web accessibility is noble, but incomplete. Web accessibility isn’t only about people with disabilities, it is about making the internet, namely websites themselves, usable by everyone. We should strive for universal design “… that attempts to incorporate features that make things usable by more than just the ‘average’ person” (Horton xv).

Web accessibility isn’t only about people with disabilities, it is about making the internet, namely websites themselves, usable by everyone.

The internet, like a chair or a table, has a function. The function of a chair is so that a person can sit on it. However, the web pages serve more than one function, and they include:

1. To be looked at
2. To be listened to
3. To be printed
4. To be interacted with
5. To allow access of information to all

In order for a web page to comply with accessibility, it must allow for all of these functions. Should any one of its functions fail, then the design of that particular site is an impediment, not an advantage. Decisions about function should always take precedence over form.

 

Why it’s a problem

 

Failing to comply with web standards is discrimination. With current law and possible of future legislation requiring all websites to be accessible, the costs outweigh the benefits of ignorance, if there are any benefits...(Horton.18). Certain individuals are robbed of their privilege to use and access online materials, primarily individuals with disabilities. Accessibility is more an ethical issue than anything else.

 

How it came to be

 

Web designers usually have backgrounds in graphics design and are visual thinkers. When the internet was in its infancy, webmasters did not have much control over the visual aspects of their sites because of the early limitations of html markup. Primarily, designers resorted to misusing tables to lay out their sites, which in turn resulted in incorrectly structured documents (Horton 97-103).

This explains why the majority of sites online today implement tables incorrectly for visually enhancement.
Tables were created for tabular data and should be used correctly only for such. CSS (Cascading Style Sheets) were created for the sole purpose of separating content from design, and give designers superior control over the design of page elements. CSS ensures greater accessibility, lighter files sizes and greater design freedoms.

 

How accessibility can be accomplished

 

Accessibility can be accomplished by implementing standards compliant structure into web sites. Their contents can be machine read, content meaning can be derived, pages will load quicker, pages will index better on search engines, and future lawsuits can be avoided. Designers must learn to loosen their grips over the display of their sites and give greater freedoms to the end-users. End-users must learn to take greater advantage of their browsers’ features. The key point to remember is that websites are not meant to be works of art, websites are a tool for people to use, not merely look at.

The following is an in-depth but not complete list intended for designers describing techniques to achieve greater accessibility. If you have any comments, or would like to add additional techniques, please contact us.

 

Links:

 

• Identify links by distinguishing it from other content.
• Underline links or position them in a distinct area so the color blind can distinguish then from content.
• Links should communicate their destination, links should be descriptive but short.
• Links need to move the end user onto the designated page
• Avoid image links where possible. If images are a must, include alt-text (LINK) that describes the destination of the link.
• Links to the current page should be identified visibly and in the markup.

 

Keyboard Commands

 

• Allow users to navigate and interact without the need for a pointing device
• Key commands should be hard coded into flash documents where appropriate
• Use the TABINDEX attribute to define tab order. If not used, tab order follows the order of the elements in the underlying code of the page.

 

Visibility

 

• Use multicolumn layouts if appropriate so more content appears on the screen at any given time.
• Reduce column widths to a maximum of 45-75 characters per line (p107), to increase readability.
• Use flexible layouts that adopt to different mediums and screen sizes. Avoid fixed layouts.

 

Animation

 

• Use animation in isolated areas of a web page.
• Avoid animations close to content, they distract, and decrease readability.
• Use flash for animations to reduce file sizes, and include a method for the user to deactivate/active the animation(s). Avoid animated Gifs.

 

Citations

 

• Citations should use the <cite> tags.

 

Lists

• All navigation elements should be marked up as lists.
• Lists can be styled with CSS.
• Avoid lists with multiple levels of classification.

 

Tables

 

• Identify table row and column headings by using the SCOPE attribute.
• Describe data tables by using the SUMMARY, and CAPTION attribute.
• Do not use nested tables.
• Keep tables simple. Include only basic tags such as TD and TR.

Quoted Text

 

• Use the blockquote attribute.

 

Color

 

• Use high contrast colors for increased readability.
• Complimentary colors work best for contrast.

 

 

Forms

 

• Use the LABEL FOR tags for labeling fields. Example:
  <label for=”first_name”>First Name:</label><br />
  <input type=”text” id=”name” name=”first_name” />
• Mark all required fields
• Group related elements
• Follow a logical sequence of elements. The submit button should come last.

 

Medium

 

• Html is far superior to flash, pdf, and other nonstandard formats. Use a substitute to HTML only if html cannot accomplish what it is that you’re trying to create.
• Begin each page with a DOCTYPE.

Layout

 

• Do not draw attention to many elements. Emphasize ONLY important elements.
• Create a fluid or non-fixed design where appropriate.
• Use CSS to eliminate unnecessary, bloated markup and reduce file sizes.
• Do not use frames.

Images

 

• Images should be used minimally and only for enhancing a specific function.
• Reduce file sizes by reducing the number of colors used in a GIF, or decreasing the dimensions of a JPEG.
• Do not use images as links. If necessary, include alt-text to describe the destination.
• Include thumb-nails when trying to display multiple images on a page.
• Include ALT and LONGDESC attributes of the IMG tag for nonvisual users.
• For images irrelevant to the content, use the alt=”” attribute.
• Use GIFS for graphics, JPEGS for photographs.

 

Check Boxes

 

• Use only when more than one choice is possible. Use radio buttons otherwise.
• Use for Yes/No choices.

Radio Buttons

 

• Use when there can only be one choice for more than one option.