Common Barriers to Web Accessibility

Denis Anson – College Misericordia

Roger O. Smith – University of Wisconsin - Milwaukee

Types of web sites

Art or Entertainment Sites If the site is primarily about a visual or auditory

experience for the visitor, general accessibility rules may not apply.

Expecting a web artist to create meaningful alt-text for a tone-poem would be like expecting a race car to perform in an air show. The medium is part of the experience.

Accessibility does not “handicapping” a situation.

Conceptual Issues in Web Design

The old rules still apply! The web is another print format. The web is another visual medium.

I need to control your experience on my site.

Old Rules Still Apply!

Many web developers received their training (if any) in the print publishing industry.

As such, all of their training in design and layout are firmly rooted in the visual design of documents.

While these rules may be effective when applied to paper design, they bring two problems to web design:

Thinking of the Web as a different form of paper Applying print design rules to web design

encourages thinking of the World Wide Web as a printing press.

This limits the possibilities to what could be accomplished in a paper document.

Paper documents are static – once designed, they remain the same. Even “mail merge” has limited variability.

A Web page is not an electronic sheet of paper Printed Document

Almost entirely visual in nature.

“Almost” because some paper documents are produced in Braille.

Web document May be “rendered” as

printed text, as spoken text, or as tactile layout!

A Web page is not an electronic sheet of paper Paper Document

The designer has control over the paper texture, glossiness, and weight used.

Web Document Will be delivered via

the user’s browser, with no control over glossiness or brightness.

A Web page is not an electronic sheet of paper Paper Document

The designer has control over the ink colors and weight.

Web Document Colors on the rendered

document depend on the hardware being used by the visitor.

Some visitors may have monochrome displays, or shifted colors.

A Web page is not an electronic sheet of paper Paper Document

The designer has control over the ink colors and weight.

Web Document Some visitors may be

using an “aural” browser, and having the page read to them!

Some may be using a refreshable Braille display, and “view” your page with their fingertips!

A Web page is not an electronic sheet of paper Paper Document

In print design, the author can select the font used, with subtle (or not) variations in font being used to convey the speaker or emotional tone.

The author can specify formatting with underline, strike-through, changing degrees of boldness.

Web Document The author may

specify a “preferred font,” but is limited to the fonts on the visitor’s computer.

Different browsers will render “bold” at different weights, and may not render some variants at all!

A Web page is not an electronic sheet of paper Paper Document

Formatting method is irrelevant – it’s the result that matters.

Any means of producing the same visual result is equivalent!

Web Document Formatting is based on

logical organization of the page.

Formatting that looks exactly the same can “mean” completely different things.

Enlarged, bolded text is not the same thing, logically, as a header!

A Web page is not an electronic sheet of paper Paper Documents

Relatively static – once produced, they are not changed, and generally cannot be customized to the individual reader.

Web Documents Can be highly

dynamic. Can be created to

meet the needs of the individual visitor.

Abbreviations and acronyms can be self-explaining, without distracting those who know what they are.

So, What’s the Problem?

Thinking of the web in terms of paper encourages practices that interfere with access by visitors using browsers different from the designers.

This includes blocking access to people with disabilities.

A Web site has much in common with a movie. The script is only one part and only sketchy

with organization. Organizational elements in cinematography

include, shot composition, connecting shots into scenes and sequences (editing), integrated use of special effects.

Movie making uses a concept used in web site development -- storyboard.

Content Versus Presentation

In the design of HTML, Tim Berners-Lee conceived that, where paper documents primarily use visual organization, the web should use logical organization.

The formatting features of HTML are intended to describe the logical structure of a document, but may be rendered visually.

Content Versus Presentation

As web design became more elaborate, designers wanted more visual control, and created HTML tags to provide more control over layout and presentation. The <FONT> tag is an example. <FONT> controls presentation, but provides

no information about organization.

Content Versus Presentation

Other tools intended for one use were co-opted for other uses. The <Table> tag was developed for

presentation of tabular information. It become common to use tables to position

content in specific locations on the page! In accessible design, HTML should only be

used to describe the logical organization of the page, and other tools used for visual presentation.

Content Versus Information

This appears to be one of the most difficult concepts for many writers and web designers.

When an element is added to a web page, it is generally intended to convey some specific information.

It is that information, not the specific content, that should be described in multiple formats (see below).

Content Versus Information

Unfortunately, many authors appear to include content by instinct rather than deliberate design, and cannot describe the information that is being conveyed!

As a result, even when they are included, many “alternative text descriptions” are of little use.

Common Barriers to Accessibility

And how to fix them

Provide Text Equivalents For All Content It is commonly asserted that “A picture is

worth a thousand words.” Many web pages use graphics to convey

information to the visitor. An image of a product An image of a view Decorative art Mathematical equations “Word Art” to present words in a form that

cannot be shown as text

Provide Text Equivalents For All Content Other sites use animations or video to display

processes or actions. These images will not be available to visitors

who do not use their eyes for page access. Users of aural browsers. Users of screen readers or refreshable Braille.

They will also not be visible to the estimated 30% of web users who have graphics loading turned off by default!

Provide Text Equivalents For All Content The author of a web page should provide a

text equivalent (alt-text) that conveys the same information as the graphic.

When a graphic is included in a web site, there is generally some information that is intended to for the visitor. Note: This is not true for “eye-candy;” images

whose sole purpose is to be visually attractive.

Provide Text Equivalents For All Content The designer of a web page should consider

how to convey the information of the graphic to the user through language. In most cases, the information of a graphic is

very different from the content of the graphic.

What does this picture convey?

In a Real Estate Listing:

This three bedroom, 2 story house is located on a landscaped, treed lot. Great location.

In an architecture course:

Dutch Colonial--A hallmark of the style is a broad gambrel roof with flaring eaves that extend over the porches, creating a barn-like effect. End walls are generally of stone, and the chimney is usually located on one or both ends. Double-hung sash windows with outward swinging wood casements, dormers with shed-like overhangs, and a central Dutch double doorway are also common.

On the residents’ personal website:

Our cool new house. Really, it is not new, but new to us. Upstairs and downstairs on quiet street. Small front porch. Here it is on a sunny day. Look! Green grass. It rains here! Uh oh. And shrubs to clip!

What does this image convey?

(This is a custom bullet for a list)

This is another, but not expanded.

A description of the graphic might be:

“Small image of a fern frond” The purpose of the graphic is to indicate a

new list item, so the “information” might be “new list item.”

The same information can be conveyed by the shorter “bullet”. On a more complex page, you might want to

indicate “top level bullet”.

Failure to Provide Access to Information Through More Than One Medium

Traditional “multimedia” presentations provide some information through words, other information through pictures, and still other information through sound. Consider a narrated travelogue of a trip up the

Amazon river, for example. This approach works well for the person who

can read, who can see, and who can hear.

Failure to Provide Access to Information Through More Than One Medium

It doesn’t work as well for the person with limited vision or limited hearing, or who’s reading skill is at a lower level of complexity than the author’s writing.

A more appropriate form of multimedia presents information in a way that accommodates the visual and the auditory learner.

NPR and National Geographic have demonstrated the potential of using audio for universal experience.

Failure to Provide Access to Information Through More Than One Medium

The writing level should never be more complex than what is needed to convey the information. In the movie, “Pirates of the Caribbean, the

pirate Captain Barbosa says, at one point, “I’m disinclined to acquiesce to your suggestion… Means no.”

Failure to Provide Access to Information Through More Than One Medium

Pictures are often used to convey spatial information (size, scale, structure)

Failure to Provide Access to Information Through More Than One Medium

If a non-visual visitor finds this image, they may get the message, “Graphic,” which tells them that they are missing information.

Some browsers will give, instead, the file name and file size. 18.jpg (39k) This is also not particularly helpful

Even when alt-text is provided, it may be poorly conceived and written.

Failure to Provide Access to Information Through More Than One Medium

A common alt-text might be “This image shows the relative size of the Pacific Spiny Lumpsucker and the human hand” .

This description tells the non-visual viewer what information they would have, if they could see, but doesn’t give them the information.

Failure to Provide Access to Information Through More Than One Medium

A better description would be something like:

“The adult Pacific Spiny Lumpsucker is about the size of a thumb, has no visible fins, and is covered with small, conical scales.”

This description gives a physical size as well as an idea of the texture of the fish.

Failure to Provide Access to Information Through More Than One Medium

Animations may provide a visual representation of the changes taking place over time.

For example:

Failure to Provide Access to Information Through More Than One Medium

To the visitor who does not have access to graphics, this animation provide no information.

It should be paired with a text and/or audio narration that describes the information of the animation.

Failure to Provide Access to Information Through More Than One Medium

This might include: “When an action potential reaches the

synapse, the axon releases a neurotransmitter into the synapse. The transmitter contacts receptors on the dendrite, and triggers an action potential in the next cell in the chain.”

It wouldn’t have to include the image of the spinning skull, since that is not the information of the animation.

Failure to Provide Access to Information Through More Than One Medium

An audio narration may help a low vision visitor, but is not useful to a person who is deaf.

Spoken language should be matched with a text-transcript to provide the information of the dialogue.

Failure to Provide Access to Information Through More Than One Medium

Non-language sounds are more difficult to manage, unless you think about the information being conveyed rather than the sound. When sounds are used to provide an

indication of success (cheering) or failure (booing or “splat”), they can be accompanied by visual text.

When sounds provide ambiance, they are similar to eye-candy, and do not provide information.

Mouse-Overs are Cool… If You Use A Mouse Mouse-overs allow the visitor to trigger events

by placing the mouse pointer over an element on a web-page.

If the element is an acronym, (e.g., NASA), it might cause the expansion to appear (National Aeronautics and Space Administration).

Mouse-Overs are Cool, If You Use A Mouse Moving the mouse over the name of a bird

might cause its picture to appear on another part of the screen, and its call to be heard

If the element is part of the navigation, it might cause a sub-menu to appear

Mouse-Overs are Cool, If You Use A Mouse If the visitor lacks the motor control to move

the mouse, s/he may not be able to gain access to that part of the information

In order to make a mouse-over accessible, two things must be possible The element must be able to accept “focus” The user must have a way to move the focus

to the element

Accepting Focus

Some elements can receive focus from the Tab key Links Form elements Controls of some multimedia players

Other elements cannot accept focus Specific words in a document Non-link graphics Server-side image maps

Accepting Focus

By creating mouse-overs on elements that cannot accept focus, the designer is making some content inaccessible to users who cannot control a mouse

Giving Focus

There are two means of giving focus to an element Tab Key Access Key

Giving Focus

By failing to specify the Tab Order of elements on the page, the author does not optimize access to the page

Giving Focus

Access Keys (keyboard shortcuts for elements) are not interpreted the same by all browsers In some browsers, an access key activates a

link rather than giving focus to the link (“clicks on it”) which bypasses the mouse-over that may have been intended to provide information

Holding Control Over Presentation

When a page is designed for a specific window size, it can hinder access by someone who has a different sized browser

This problem usually occurs because the web designer has a large, high-resolution monitor, and has created a spatial layout using all of the available space

It can also occur by “hard coding” font and sizes in a page

Holding Control Over Presentation

Both of these occur because the designer is thinking of the web as a visual/paper medium!

In fact, not all web viewers have large monitor By attempting to “force” a particular view, the

designer is locking out some potential visitors

Holding Control Over Presentation

A person with a cognitive limitation may not be able process complex visual fields, and may need to space things out more to understand them

A person using an aural browser, a cell phone, or a PDA to access a page may not be able to understand the intended layout at all!

Holding Control Over Presentation

Accessible design uses “proportional” sizes for page elements to scale to the browser of the viewer

Accessible design use CSS to specify fonts, backgrounds, etc. This allows the user to specify a different style

sheet, that better fits his/her specific preferences or needs

Tables as Layout

In the early days of the web, all pages were linear and black-and-white

Tables were introduced to allow the presentation of tabular data

Tables as Layout

Web designers discovered that specifying row and column sizes allowed the creation of specific locations on the page where information could be placed

This allowed a more “interesting” layout on pages

Tables as Layout

As a result, a great many pages began to use tables to present the desired appearance

This lead to a number of access issues for people with disabilities.

“Screen Readers” read the screen a row at a time

Screen Readers and Tables

In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king's castle lay a great dark forest, and under …

There were once a man and a woman who had long in vain wished for a child. At length the woman hoped that God was about to grant her desire. These people had a little window at the back of their house from which a splendid garden could be seen, which was full of the most beautiful flowers and herbs…

Screen Readers and Tables

To compensate for this limitation, some assistive technologies simply ignore table layout when rendering a page

These linearized pages can be understood at the table-cell level

Screen Readers and Tables

However, all information that was conveyed by relative position will be lost “As can be seen by the picture to the left…”

Any critical information that is conveyed via the relative location of cells will not be available to some visitors

This is especially true of form layout (see below)

Tables For Data

Some data is truly tabular in nature, and should be presented in tables The Periodic Table of the Elements includes a

great deal of information in the position of the elements that is not conveyed by a linear listing

Tabular data commonly is associated with labels at the top and sides of the table

When this relationship is conveyed only by the table, it will be lost if the table is linearized

Tables For Data

To convey the information effectively, the tabular information must be “associated” with the appropriate headings

This is done in two ways:

Tables For Data

When there is a single column header and/or a single row header, the designer can indicate that the cell is a header cell in markup This is *not* done by “bolding” the text!

When there are multiple headers, or a header spans several columns, each cell should have markup indicating the cells that are headers

Using Forms

Forms are very useful ways to collect data over the net Users can provide feedback to the web

designer Users can order products

Most forms consist of a number of data entry areas (text fields, buttons, etc.) associated with labels

Using Forms

If the designer uses a table to layout the labels and fields, the relationship will be lost when a table is linearized!

To make a form accessible, the field labels must be explicitly associated with the fields through markup!

Use of Color

It is not true that in order to be accessible, a website cannot use color

It is true, however, that in order to be accessible, a website must use more than color to convey information

Use of Color

Roughly one person in 30 has some sort of colorblindness

A large fraction of these cannot discriminate red and green reliably Many cannot see any color at all

A person who is using an aural browser won’t have access to color information

Other visitors may be using monochrome monitors or tactile displays

Use of Color

If a website is designed so that some information is conveyed only by color, some visitors will not be able to access that information

Some web designers think that underlining links is unattractive, so use a color change to show that text is a link This effectively hides the navigation from

some visitors

Meaningful Link Text

One of the most common barriers on websites is the “Click Here” link.

Many authors will scatter links around their pages such as these: If you are a coordinator, click here for News

& Tools. Click here if you would like to enroll a new group

Meaningful Link Text

To assist with navigation, many types of assistive technology will create a separate list of links Click Here Click here Click here

On this page, none of the link lists will be usable, and many visitors will not be able to navigate your page!

Meaningful Link Text

This could be fixed very easily, buy shifting the link to meaningful text If you are a coordinator, click here for

News & Tools. Click here if you would like to enroll a new group

Now the link list will show: News & Tools Enroll a new group

Logical Layout

Because of their background in print media, many web designers indicate paragraph headings with a larger font, a font change, or bold faced text

In the world of print media, any formatting that looks the same, is the same

Logical Layout

On a web page, font changes do not convey any logical information, and are lost when a page is visited with an aural or tactile browser

Changes in heading level should be indicated using heading markup, so that the logical priority of the page is preserved

Logical Layout

The <b> tag forces text to be displayed as “bold faced,” provided the browser knows how to display bold faced text

The <strong> tag may be shown bold faced, but may also be shown as a change in inflexion in a spoken browser, or a change in color in a text only browser

Logical Layout

Using CSS for layout, it is possible to display a page in any order desired

It is therefore possible to have a non-CSS page that is completely out of order in a browser that does not use CSS

Logical Layout

It is important in creating web pages to have the basic HTML page provide a can be read meaningfully without any added layout

Then use formatting to make the page appear as the user would like

Web Design for All = New Way of Thinking Works best when the designer brings key

knowledge and skills to the table: When the designer understands concepts of

functional ability and disability. When the designer understands fundamentals

of web design tools. When the designer has evaluation skills. When the designer has experience with basic

web access strategies.

How does one bring all of these to the table? More and more this means a design team. Most webmasters do not have this range of

skills, so usually this means some continuing education is needed.

We hope we have contributed to your continuing education in this exciting new area of accessible and universal design practice.