Common Barriers to Web Accessibility

1
Common Barriers to Web Accessibility

• Denis Anson College Misericordia
• Roger O. Smith University of Wisconsin -
  Milwaukee

2
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 require handicapping a
  situation.

3
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.

4
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

5
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.

6
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!

7
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 users browser, with no
  control over glossiness or brightness.

8
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.

9
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!

10
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 visitors computer.
• Different browsers will render bold at
  different weights, and may not render some
  variants at all!

11
A Web page is not an electronic sheet of paper

• Paper Document
• Formatting method is irrelevant its 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!

12
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.

13
So, Whats 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.

14
A Web site has much in common with a movie.

• The script is only one part and with only sketchy
  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.

15
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.

16
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 ltFONTgt tag is an example.
• ltFONTgt controls presentation, but provides no
  information about organization.

17
Content Versus Presentation

• Other tools intended for one use were co-opted
  for other uses.
• The ltTablegt 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.

18
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).

19
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.

20
Common Barriers to Accessibility

• And how to fix them

21
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

22
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!

23
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.

24
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.

25
What does this picture convey?
26
In a Real Estate Listing

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

27
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.

28
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!

29
What does this image convey?

• ? (This is a custom bullet for a list)
• This is another, but not expanded.

30
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.

31
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.

32
Failure to Provide Access to Information Through
More Than One Medium

• It doesnt work as well for the person with
  limited vision or limited hearing, or whos
  reading skill is at a lower level of complexity
  than the authors 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.

33
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, Im
  disinclined to acquiesce to your suggestion
  Means no.

34
Failure to Provide Access to Information Through
More Than One Medium

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

35
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.

36
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 doesnt give them the information.

37
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.

38
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

39
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.

40
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 wouldnt have to include the image of the
  spinning skull, since that is not the information
  of the animation.

41
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.

42
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.

43
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).

44
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

45
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

46
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

47
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

48
Giving Focus

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

49
Giving Focus

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

50
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

51
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

52
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

53
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!

54
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

55
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

56
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

57
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

58
Screen Readers and Tables
59
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

60
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)

61
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

62
Tables For Data

• To convey the information effectively, the
  tabular information must be associated with the
  appropriate headings
• This is done in two ways

63
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

64
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

65
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!

66
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

67
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 wont have
  access to color information
• Other visitors may be using monochrome monitors
  or tactile displays

68
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

69
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

70
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!

71
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

72
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

73
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

74
Logical Layout

• The ltbgt tag forces text to be displayed as bold
  faced, provided the browser knows how to display
  bold faced text
• The ltstronggt 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

75
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

76
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

77
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.

78
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.