Accessibility and Usability

Introduction

When the World Wide Web (WWW) was in its infancy, web developers designed their sites using a nested table technique. This is where the designer uses multiple tables to layout the structure of the page. This technique is, in fact, still widely used across the WWW by many web developers, both professionals and amateurs alike. In 1996 the World Wide Web Consortium (W3C) introduced Cascading Style Sheets (CSS) into HTML. This allowed web developers to seperate content (text, images and markup) from style (layout and presentation).

The medium of the WWW has a potential audience of over six billion people. Because of the magnitude of consumers, there will be a diversity of needs. First of all, there will be hardware differences within computers; some people will have the best hardware available, whereas others maybe confined to older technologies. Secondly, there are substantial software combinations a user can choose. These will range from major choices, such as different Operating Systems (OS) and user-agents (web browsers), to the configuration of such programs. The three main OSs are Microsoft Windows, Macintosh (Mac) and various Linux distrubutions. The most popular web browser is Microsoft’s Internet Explorer.

Microsoft OSs: Windows XP, 2000 and 98 currently dominate with approximately 91%2 market share. Whereas, Mac, Linux and Unix systems have only 2%2 between them! Microsoft’s Internet Explorer web browser is used in 93%2 of WWW web browsing!

Accessibility has two main standards on the internet. There is the W3C’s Web Content Accessibility Guidelines (WCAG) and the United States of America’s Section 508 of the Workforce Rehabilitation Guidelines. The WCAG was written by an international panel of accessibility experts and is comprised of three priority levels. These are defined as:

A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.

Web Content Accessibility Guidelines, Priority Level 1 (A)

A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.

Web Content Accessibility Guidelines, Priority Level 2 (AA)

A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

Web Content Accessibility Guidelines, Priority Level 3 (AAA)

Accessibility Laws

The United States’ law outlines a minimum standard level of accessibility; Section 508 Guidelines, to which electronic resources, mostly the internet, should adhere too. All government agencies and contractors dealing with these agencies are required to be Section 508 compliant.

The US Section 508 guidelines and WCAG Priority 1 (A) have similar standards for accessibilty — chart comparing these two guidelines. You can see a great demonstration of how people with disabilities find an inaccessbile website.

It is unlawful for a person who provides goods or services, or makes facilities available, to discriminate against another person on the ground of the other person’s disability in the terms or conditions on which the person provides the other person with those goods or services; or in the manner in which the person provides the other person with those goods or services or makes those facilities available to the other person.

Disability Discrimination Act, 1995

There is currently only one legal case case involving accessibility discrimination on the web. The case concerned Bruce Maguire, a blind Australian, and the Sydney Organizing Committee for the Olympic Games (SOCOG). In June 1999, Bruce Maguire lodged a complaint against the Olympic committee stating that the website of the SOCOG had significant parts that were inaccessible to him as a blind person.

In late 2000, the Human Rights and Equal Opportunity Commission (HREOC) supported Maguire’s complaint. They ordered that certain access provisions were to be introduced on the olympics website by mid-September 2000. The SOCOG ignored this ruling and was fined 20,000 AUD.

Semantic Markup

Adhering to web standards and having validated web pages are the first two steps in making your website a lot more accessible. A third step in making your website more accessible is generating semantic markup.

Semantic markup means using the appropriate markup elements for the piece of text you are presenting. A paragraph should be wrapped with the <p> tag and headers should use the h1, h2, h3, h4, h5, h6 elements. Below are a few examples of good semantics within HTML markup.

Example of Semantic HTML Markup

<h1>Title</h1>
<h2>Subtitle</h2>
<p>This is a paragraph.</p>
<p>This <em>word</em> is emphasized.</p>

Using semantics within markup means that your code will make sense to others and will be much easier to follow. Search engine spiders rank keywords based upon your semantic structure. So, using the correct semantics not only means that your page will be easily understood, but will also give you higher search engine rankings. Therefore, semantically-rich websites are easier to find and, therefore, need less promotion

Readability

The viewing medium of web pages can be extremely diverse because of the possbile combinations between monitor size, screen resolution and colour depth. Approximately 87%3 of monitor sizes are between 14” and 21”, with approximately 65% of users running a screen resolution of 1024x768 pixels or greater. However, there is a still a substantial number of users, 30%, using a screen resolution of 800x600 pixels, the standard screen resolution introduced with Microsofts Windows XP OS.

The majority of people get information from a variety of resources, such as books, newspapers and reports. These sources have controlled layout, line lengths or characters per line (CPL). Newspapers are split up into thin columns and books are usually a maximum of A5 portrait line lengths. However, nowadays more people are reading online reports and newspapers.

Of the 25-to-34-years-old age group, it is reported that 25 percent read online newspapers, compared to only 19 percent who read from printed newspapers.

DigitalEdge.org, 2000

Studies across the internet have compared different line length sizes on the effect of the users ability to read efficiently, and the time taken to complete tasks. These tests also concentrate on different age groups, studying adults (between the age of 18 and 61), and children (aged between 9 and 12). The different line length sizes assessed were; Full-length (132 CPL, Figure 1.1), Medium-length (76 CPL, Figure 1.2) and Narrow-length (45 CPL, Figure 1.3).

• 
• 
• 

Each type of line length has advantages and disadvantages.

• The full line length passages, users did not have to scroll.
• Narrow line length passages were easiest to concentrate on.
• Medium line length passages were the best presented.

When presented with an option, adults prefer the medium line length passage and children the narrow line length passage. Neither age group opted for the full line length. These results should be taken into consideration when designing websites for a specific age range. A review of many studies has proved inconclusive as to the better format for presenting large passages of text on the internet.

A second interesting study on the readability of websites concentrated more on an article’s layout and navigation. Again, three different scenarios were tested. Users were asked to read a passage from three different layouts.

The first layout was over four seperate web pages (Paging, Figure 2.1). The second layout was presented full screen and across two pages (Full Length, Figure 2.2). Both of these layouts had ‘forward’ and ‘back’ buttons to navigate. Finally, the third layout was presented on one web page, which the user had to scroll to access information (Scrolling Text, Figure 2.3).

• 
• 
• 

This study found that the paging technique for presenting an article took significantly longer to read than the other two layouts. This technique also highlighted some problems in accessing data for future reference and searching back through the information. The website also states that in previous studies the Scrolling Text layout had achieved poor results. However, it seems that users have become accustomed to browse this way on the WWW. From this study it seems that the best technique would be a combination of the Full Length and Scrolling Text layouts, limiting the amount of different pages in favour of some, but not all, scrolling. This technique also optimizes the use of screen area.

Image Replacement

There was no need for special image replacement techniques before the introduction of CSS, as web developers used the Alternative Text (ALT) attribute in the <img> tag to provide the appropriate information. Now presentational elements such as graphics, should be placed within the CSS. Purely presentation images, to give the site more “Bells and Whistles”, can be removed without too much impact on message of the site. However, if images are used for the title or sub headings, then this information is completely lost. This is where problems with accessibility and usability arise.

If a user visits the page in a modern browser, with default settings, then the images will be presented as desired. However, if the user visiting the site wishes to change the CSS or disable it completely, then the images will be lost, along with the possible meaning behind them. Personal preference is the main reason for changing the style sheet. Doing this could make the site more user friendly and accessible, especially for people with disabilities.

Fahrner Image Replacement (FIR)

This method was named after Todd Fahrner, one of the founding conceptualists in image replacement techniques. The principal for this technique is creating pure HTML text representation of the image, then hiding the text when the style sheet is enabled.

The example below uses generic HTML tags; <div> a block element, and <span> an inline element. Other markup could be used to make the code more semantic, such as <h1> for a title and <h2>s for sub headings.

HTML Code for Fahrner Image Replacement

<h1><span>Title</span></h1>

CSS Code for Fahrner Image Replacement

h1 {
  height: 35px;
  background: #fff url(path/to/image.png) no-repeat 0 0;
}
span {
  display: none;
}

This markup is a lot neater than the alternative method; <h1><img src="" alt=""></h1>, which could be used to represent a header as an image. However, there are some problems with the FIR technique. First of all when the user has CSS enabled but has images turned off, nothing is displayed. Eastern European countries mainly use this combination when browsing, as they are using metered 56k internet access. This could pose a major problem if the image(s) represent your logo, main title or even subtitles, as they aren’t replaced.

A display of ‘none’ does not create an invisible box; it creates no box at all.

AListApart.com, 2003

Secondly, because of the way display: none is parsed by the browser/interpreter the text is completely hidden. If a user is using a screen reader then this text will be ignored. This may cause some, or even complete loss of the meaning to be communicated to the user.

More accessible techniques have been devised, including methods by Phark, Radu and Gilder/Levin. The technique that succeeds in solving the problems posed above is the Gilder/Levin method.

HTML Code for the Gilder/Levin Method

<h1><span></span>Title</h1>

CSS Code for the Gilder/Levin Method

h1 {
  position: relative;
  width: 320px; height: 25px;
}
h1 span {
  position: absolute;
  width: 100%;  height: 100%;
  background: #fff url(path/to/image.png) no-repeat 0 0;
}

This technique works with screen readers, as the text information is not hidden using CSS. However, neither the Gilder/Levin method nor the FIR technique produces semantically correct markup, as it uses unnecessary <span></span> tags.

Phark’s Image Replacement Technique

Phark’s image replacement technique has also been developed to be more accessible. This technique uses a similar method to that of the FIR technique. It hides the text from the browser by moving it offscreen, rather than physically removing it. This technique is, therefore, accessible to screen readers, but not to users with only images turned off.

HTML Code for Phark’s Image Replacement Technique

<h1>Title</h1>

CSS Code for Phark’s Image Replacement Technique

h1 {
  overflow: hidden;
  height: 25px; width: 320px;
  text-indent: -5000px;
  background: #fff url(path/to/image.png) no-repeat 0 0;
}

This method removes the <span></span> tags, making the code semantically more correct. However, there is no replacement when the user has images turned off.

To conclude, I believe that the best image replacement technique is the Gilder/Levin method as, although it produces semantically incorrect code, it has the greatest accessibility range.

Screen Readers

What is a screen reader?

A screen reader is software that works together with a speech synthesizer to read aloud everything contained on a computer screen, including icons, menus, text, punctuation, and control buttons.

S. Widmayer

Screen readers are used by a lot of disabled people, mainly by people who are blind or hard of sight.
The most popular screen readers include:

• Freedom Scientific’s JAWS
• Dolphin’s Hal Screen Reader
• IBM’s Home Page Reader