Skip to Main Content

go to Indiana University Indiana University


Archive for the 'Accessibility' Category

Web Accessibility Made Easy: Consistent Navigation and Presentation

This blog post in the “Web Accessibility Made Easy” series discusses why it is important to keep the navigation and presentation consistent.

Consistency

In spite of the importance of consistency for navigation and presentation, not all Web sites on the internet have a consistent navigational structure or presentation. This can be a severe disadvantage for users with physical or cognitive disabilities. For those with cognitive disabilities, remembering the location of links or sections of a Web can be very taxing. If these locations change from page to page, the extra cognitive processing required to relocate links or web page sections may inhibit users from task completion. Similarly, people with other impairments (fine motor, vision, or dexterity issues) may find it physically exhausting if links constantly change position on a Web page.

Consistency also benefits those without disabilities. Because of the vast array of information available on the Internet and the wide variety of Web site design methods, the cognitive load on people without disabilities is great. If the navigation and presentation remain the same throughout a Web site, the cognitive load is lessened for all users and the time it takes for users to locate their desired content is significantly reduced. Consistent navigation and presentation, also known as user interface, is a big topic in the world of usability. Renowned usability expert Jakob Nielsen has written a book on this topic, Coordinating User Interfaces for Consistency (http://www.useit.com/jakob/constbook.html). With the advent of templates and content management systems, consistent navigation and presentation is becoming easier to maintain and more prolific throughout the Internet.

The Guideline

IU Web Accessibility guideline

  1. Presentation and navigation style shall remain consistent throughout the document.

Wrap Up

Maintaining consistent navigation and presentation is not hard to do and is beneficial for both users with and without disabilities. It provides better usability and efficient navigation for all users. Take steps to help improve user experiences by ensuring all navigation and presentation of content on your Web site is consistent.

Web Accessibility Made Easy: Lists

This blog post in the “Web Accessibility Made Easy” series describes how to appropriately use lists… a common feature of Web sites. Although helpful, lists are not always coded correctly.

Lists

HTML lists are an accepted way to outline or organize information into related groups on a Web page. Lists are a particularly helpful means of organizing navigation links. There are three list sub-types: unordered, ordered and definition. Unordered lists, which are proceeded by a bullet, may be the most common type of list. Ordered lists are more commonly recognized as numbered lists.  Definition lists are a special list type, created to order and organize term/definition pair sets.  Below are examples of each type of HTML list. For more information on HTML lists, please consult the W3C HTML 4 List page.

Unordered:

  • Fred
  • Joe
  • Johnny

Ordered:

  1. Joe
  2. Fred
  3. Johnny

Definition:

Sesquipedalian

Given to using long words.

Hortatory

Marked by strong urging; serving to encourage or incite

Note: The Definition list has been faked above because the HTML definition list element is not recognized by WordPress.

Lists, whether unordered, ordered or definition, need to have opening and closing tags to be valid HTML lists and render correctly to user agents including internet browsers and screen-reading software.

Code Example:

<ul>
<li>Fred</li>
<li>Joe</li>
<li>Johnny</li>
</ul>

Many developers create fake lists using images and CSS style rules to create the visual appearance of a list.  This creates navigation roadblocks for screen-reader users, especially if there are multiple lists coded in the same manner.   However, with correctly coded lists, screen-reader users can jump from list to list using keyboard shortcuts for easy navigation. In addition, screen-reading software announces how many items are in each list and if nested lists are present, allowing screen-reader users to understand the hierarchical structure of the list.  For these reasons and many others, lists should always be properly coded, after which, the developer can use CSS style rules to control their visual appearance.

Guideline

IU Web Accessibility Guidelines

18. Mark up lists and nested lists properly.

Tutorial

This tutorial will be using both the Bad example web page and the  Good example web page, along with their associated style sheets.

1.   The bad code – Fake lists coded with images and CSS.

In the code below there is no actual list; the list is faked.  To a screen-reader user, each bullet of this fake list would be read out, “img/bullet,” which would get annoying to any person.  Instead of using <img> tags, the developer should have created a HTML list and used CSS style rules to change the bullet to an image.

<img src="img/bullet.jpg" width="7" height="7" />Learn about the federal statues<br />
<img src="img/bullet.jpg" width="7" height="7" class="float-left" />Research free and commercial tools that can aid you<br />
<img src="img/bullet.jpg" width="7" height="7" class="float-left" />Participate web accessibility training<br />
<img src="img/bullet.jpg" width="7" height="7" class="float-left" />Design the web site according to the standards provided<br />

2.   Create correctly coded HTML lists.

Add the opening and closing tags <ul> and </ul>. Then, replace the <img> and <br/> tags with <li> and </li> tags.  The CSS style declaration below changes the bullet into the chosen image.

<ul class=“cbullet”>
<li> Learn about the federal statues </li>
<li> Research free and commercial tools that can aid you </li>
<li> Participate web accessibility training </li>
<li> Design the web site according to the standards provided </li>
</ul>

CSS Style declaration:

.cbullet ul {

list-style-image: url(img/bullet.jpg);

}

Note: Having an image as a bullet does not affect how screen-reading software announces the list items.

Wrap Up

Properly coding all lists is an easy way to improve the accessibility and navigability of a Web site without impacting the visual design.  Properly coded HTML lists are particularly important for screen-reader users.  In addition, coding lists items properly helps web pages to validate and ensures the Web page renders accurately in any Web browsing software.

Web Accessibility Made Easy: Cascading Style Sheet Basics

This blog post in the “Web Accessibility Made Easy” series discusses the basics of Cascading Style Sheets (CSS) and the importance of correctly using CSS.

Cascading Style Sheets

Use Cascading Style Sheets (CSS) to add consistent styling to Web pages. CSS rules separate document presentation elements (color, fonts, spacing, layout, headings, etc.) from document content (written in HTML or a similar markup language). Separation of content and presentation does the following:

  • Improves content accessibility
  • Improves flexibility and control for specification of presentation characteristics
  • Enables multiple pages to share formatting
  • Reduces complexity and repetition in the structural content though web design that does not rely on tables. (W3C & Wikipedia)

Modern Browsers (Firefox, Opera, and Internet Explorer) allow users to substitute their own custom style sheets that render Web pages in a more accessible format for that user. Without the use of Cascading Style Sheets this is not possible because inline and embedded styles override external style sheets added by the user. The images below show an example of a user modified style sheet created to improve the visual accessibility of the Web page to meet their particular needs.

Normal view of Web Accessibility Good Example Web Page

Normal View as set by CSS


High Contrast view (White on Black) of the Web Accessibility Good Example Web Page

High Contrast view (White on Black)


The first image shows the Web page using the CSS style sheets created by the Web developer. The second image of the same Web page derives from a user specified CSS style sheet. High contrast black and white text improves visual contrast of the page. This is often helpful to individuals with low vision.

It is important to note, not all CSS style rules improve accessibility. If important content is added to a Web page by using CSS instead of through the underlying code, when Cascading Style Sheets are disabled or they are substituted to accommodate personal preference or adaptive technology, the content added with CSS might not be accessible to the user.

Good example with style sheets turned off

Below is the Web page used in the examples above. In this instance, the Cascading Style Sheets have been disabled. Cascading Style Sheets have been used correctly because all the information available with the Cascading Style Sheets enabled is available when Cascading Style Sheets are disabled. In addition, new content is visible that was initially hidden by the CSS. This hidden content aids users of adaptive technology with page navigation. It was hidden so that it would not disrupt the visual layout, but still be useful.

Web Accessibility Good Example page with Stylesheets turned off

Bad example with style sheets turned off

CSS has not been used appropriately in the Web page below. Using CSS, the header image and contact information were coded as background images of an HTML division element (<div>). Neither the header image nor contact information appears when the Cascading Style Sheets are removed.

Web Accessibility Bad Example page with Stylesheets turned off

Guideline

IU Web Accessibility Guidelines

  1. Presentation and navigation style shall remain consistent throughout the document.
  1. Documents shall be organized so they are readable without requiring an associated style sheet.
  1. Use style sheets to control layout and presentation.

Tutorial

This tutorial demonstrates Cascading Style Sheet coding for both the bad example Web page and the good example Web page.

  1. Bad Code – Important content is coded as a CSS background image.

    To display the header image, the code below uses an HTML <div> element with a background image coded using CSS encapsulated in an HTML link element (<a>). The CSS style rule is linked to the <div> element’s id attribute, “headerimg”. Normally, there is no accessibility issue when using CSS background images. But in this case, the header image is the main heading on the page. Therefore, its content should be accessible to adaptive technology through the alternative text attribute. Unfortunately, alternative text can only be added to hard coded images not CSS background images. The CSS style rule is found in the screen.css file or below:

<div id="header">
  <a href="Bad.html"><div id="headerimg"></div></a>
</div>

CSS code

#headerimg {
  background-image:url(../img/Header.jpg);
  width:552px;
  height:150px;
  margin-left: 15.5em;
}

  1. Good Code – The CSS background image is hard coded as an image with alternative text in a HTML heading element

    The header image and parent link element act as the main heading for the page and therefore should be encapsulated a HTML heading element. HTML heading level 1 (<h1>) opening and closing elements are added around the entire link element, which encompasses the HTML <div> element and header image. The HTML heading level 1 element was chosen because the image describes the main topic of the Web page, “Indiana University Web Accessibility Class.”

  2. <div id="header">
      <h1>
        <a href="Good2.html"><div id="headerimg"></div></a>
      </h1>
    </div>

    As stated above, because the image is now part of a heading it should be coded as an image with alternative text, instead of a CSS background image. If no alternative text is present, the heading and link will appear empty to adaptive technology. The HTML <div> element is changed to an HTML <img> element. The image should have its height and width specified in the source code instead of in the CSS style rule to ensure the page layout does not expand when the image is loaded. Finally, a new CSS style rule is added to the image to reposition it in the center of the parent HTML <div> element.

    <div id="header">
      <h1>
        <img src="img/Header.jpg" width="552" height="150"
        alt="Indiana University Web Accessibility Class" />
      </h1>
    </div>

    CSS code

    .thrColElsHdr #header img {
      margin: auto;
    }

    Wrap Up

    Properly using CSS can increase accessibility. However, when improperly used, CSS can adversely affect accessibility for those who use adaptive technology to access the web or who need to modify web pages to fit their specific accessibility needs. Remember, CSS creates the most accessible Web pages when used to style content that already exists in the underlying code. Therefore, a good rule of thumb is to create page content first and then use CSS to style it for presentation on the Web page. By following this rule, no matter what style is used, the content will be accessible to all users of assistive technology. In future blog posts more advanced CSS techniques will be discussed.

Web Accessibility Made Easy: Tab Order

This entry in the “Web Accessibility Made Easy” series discusses an HTML attribute many web developers may overlook… tab order.

Tab order and tabindex

Tab order or “tabbing order”, “defines the order in which (HTML) elements will receive focus when navigated by the user via the keyboard.” (Tabbing navigation, W3C) All elements that by specification or scripting can receive focus will be present in the tab order. The tab order works with the following elements among others…. Read the rest of “Web Accessibility Made Easy: Tab Order” »

Web Accessibility Made Easy: Form Labels

This entry in the “Web Accessibility Made Easy” series will discuss explicitly associating a label with a form control.

Label Elements

The <label> element is an HTML element that defines a label for a specific control on a form.  There are two different ways to use label elements to associate a form control with a meaningful, control specific label. The first way is to associate the label element’s “for” attribute with the corresponding “id” attribute of the form control.  The second way is to give the form control a title attribute, using the label description as the title.

Associating labels with form controls is essential to screen-reader users. Without explicit labeling of form controls, these users would have to guess what kind of information should be entered in each form control. Read the rest of “Web Accessibility Made Easy: Form Labels” »

Web Accessibility Made Easy: Primary Language

This entry in the “Web Accessibility Made Easy” series will discuss setting the primary language of a web page and how to deal with language changes.

Language Attribute

The Language attribute of HTML, lang=”fr”, identifies the language of the document to user agents (browsers, search engines, assistive technology), in this case to French. Including the language attribute in the <html > tag at the beginning of a document sets the primary language for the entire document.  If the document will adhere to the XHTML specification, the xml:lang=”fr” language attribute should also be included. The xml:lang attribute is the standard way to identify language information in XML. Subsequent use of the language attribute changes the primary language to a different language, but only for that HTML element.  Language reverts back to the primary language at the end of the element.  

Read the rest of “Web Accessibility Made Easy: Primary Language” »

Web Accessibility Made Easy: Headings

This entry in the “Web Accessibility Made Easy” series addresses the use of headings to add structure to the content of Web pages.

Headings

HTML headings have been part of the structure of an HTML document from the beginning.  The heading tags <H1> through <H6> are meant to give web documents structure. Therefore, headings should be properly nested to assign level of importance in the structure of the Web page.   Read the rest of “Web Accessibility Made Easy: Headings” »

Web Accessibility Made Easy: I wish I could SKIP to the good stuff

This entry in the “Web Accessibility Made Easy” series will discuss something that is easy and quick to implement and can benefit all users. It is Skip Navigation links.

Skip Navigation

Skip Navigation is a same page or anchored link that can either skip past the navigation of a web site or can be used to skip past any content to what would be considered the main content of the page.

Read the rest of “Web Accessibility Made Easy: I wish I could SKIP to the good stuff” »

Web Accessibility Made Easy: Abbreviations and Acronyms

This entry in the “Web Accessibility Made Easy” series explains expanding abbreviations and acronyms so that, for instance, all users know that ARIA means Accessible Rich Internet Applications and not Automated Robot Integration Assembly.

ABBR and ACRONYM Tags

When web designers use the <abbr> or the <acronym> HTML tags, abbreviations and acronyms will be read as their full text. However, this is only true if the user has set their screen-reading software to do this. Web designers need to set the title attribute of the <abbr> or <acronym> tags to the actual meaning of the phrase. See code example below.

Example:

<acronym title=”Web Content Accessibility Guidelines”>WCAG</acronym>

Using this method a web designer complies with the guideline below. However, as mentioned above this coding only provides the desired result if the screen reader user has set their preference (settings) to automatically voice the entire text of the acronym or abbreviation tags. Therefore, as is common writing practice, it is important that for the first use of a phrase which will subsequently be represented by an acronym or abbreviation, that the phrase be entirely spelled out and followed by the desired acronym or abbreviation in parenthesis (e.g., World Wide Web (WWW). For subsequent uses the acronym or abbreviation tag should be used. Then, for screen reader users who have set their preferences correctly, the entire phrase will be spoken.

Guideline

IU Web Accessibility Guidelines

2. Specify the expansion of abbreviations or acronyms where they first occur in a document.

This guideline requires that the first time an abbreviation is used, it is expanded. Common writing practice is that the first time a name or phrase is used for which an acronym will be used later, the words should be spelled out followed by the acronym in parenthesis. Web coding should employ this same practice. After the first instance, it is up to the web designer to decide whether to continue to use the <abbr> or <acronym> tags to expand the phrase.

Tutorial

This tutorial will again be using the Bad example web page, Good example web page, their associated stylesheets and Dreamweaver.

1. The Bad Code – Acronyms not Expanded

<p>Web accessibility standards have been developed by the W3C (http://www.w3c.org)</p>

The code shown above will validate to the W3C standards. However, since this is the first instance of an acronym, it needs to be expanded.

2. The Good Code – Acronyms Expanded

Example 1…First Instance of the use of a phrase for which an acronym will subsequently be used:

<p>Web accessibility standards have been developed by the World Wide Web Consortium (W3C), http://www.w3c.org.</p>

Example 2….Use of the acronym tag for the second and all subsequent uses of the acronym:

<p>Web accessibility standards have been developed by the <acronym title= “World Wide Web Consortium” >W3C</acronym> (http://www.w3c.org)</p>

Simply expanding the acronym physically in the text (example 1) or using the <acronym> tag in conjunction with the “title” attribute to expand the acronym (example 2) is all that needs to be changed to have the acronym display correctly to all users.

3. All users will know understand the acronym

That is it. Because the acronym has been expanded once, if a user cannot remember what it means they can refer back to the original expansion. Using the <abbr> or <acronym> tag is also beneficial because it can be used over and over again with minimal interruption to the visual design.

Wrap Up

Expanding abbreviations and acronyms not only helps users of assistive technology, it is beneficial to all users. With each new day in this age of the internet and text messaging, new acronyms and abbreviations are emerging. There are even online dictionaries of acronyms and abbreviations. So it is very important that web coders follow the suggestion above regarding the use of acronyms and abbreviations! Physically expanding abbreviations or using the <acronym> tag to expand an acronym adds very little time to the design and coding of a website. However, this practice contributes dramatically to the understanding of a web page.

Web Accessibility Made Easy: Let’s Not Table This… Guidelines for Tables

This entry in the “Web Accessibility Made Easy” series discusses two guidelines that are essential to well-formatted layout and design of data tables.

Tables on the web have been around since the early days of the web. Okay…not the early, early days of the web, but tables were first discussed in 1996 (IETF RFC 1942) and then later included in the HTML 3.2 specification. This specification ensured that tables were the formalized way to display data from a spreadsheet or database.
Read the rest of “Web Accessibility Made Easy: Let’s Not Table This… Guidelines for Tables” »

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.