Methods for Improving Web Portal Accessibility

1
Methods for Improving Web Portal Accessibility

• Bob Easton Internet analyst T.J. Watson
  Research CenterMatthew King Accessibility
  Advocate Corporate HQ

2
What kind of Portals?

• Highly personalized portals
• Content is dynamically presented for each
  individual
• We look at three examples
• Googles new personal portal
• MyYahoo! Portal
• IBMs intranet employee portal

3
What kind of accessibility?

• Our primary focus is on three most common
  accommodations
• Blind
• Low vision
• Mobility impaired

4
Agenda

• Survey of three portals
• Recommended improvements

5
Googles new personal portal

• Linked to Google mail account
• Easily personalized
• News
• Mail
• Weather
• Stock quotes
• Movies
• Few other services
• You can select if item appears, but cannot
  personalize position or sequence of appearance

6
Google in FangsFangs is a Firefox Extension
which simulates a Screen Reader
Text transcript Listen to IBM HPR 3.04 JAWS
6.1 Window Eyes 5.0 Audio files areabout 0.9 mb
each
7
Google headings in Fangs

• No headings at any level

8
Google links in Fangs

• Many well named links

9
MyYahoo! portal

• Extensive personalization choices
• News, stocks, weather, sports, entertainment
• Multiple pages are possible
• Hundreds of pre-selected feeds provided
• Any RSS feed can be added
• You can personalize both selection of items and
  position (sequence) of items on each page

10
MyYahoo! in Fangs
Text transcript Listen to IBM HPR 3.04 JAWS
6.1 Window Eyes 5.0 Audio files areabout 1.5 mb
each
11
MyYahoo! headings in Fangs

• Several well named headings

12
MyYahoo! links in Fangs

• Many well named links

13
IBM Intranet portal

• Personalized for each employee over 300,000
• Three pages Home, Work, Career and Life
• Selection of about 25 portlets
• News, stocks, search, corporate directory,
  assets, expenses, various reports, HR tools,
  other applications for getting things done
• You can personalize both selection of items and
  position (sequence) of items on each page

14
IBM Intranet portal in Fangs
Text transcript Listen to IBM HPR 3.04 JAWS
6.1 Window Eyes 5.0 Audio files areabout 1.5 mb
each
15
IBM Intranet portal headings in Fangs

• Many well named headings

16
IBM Intranet portal links in Fangs

• Many well named links

17
Portal Accessibility Accommodations

• Headings
• Skip links
• Landmarks
• Page index
• Access keys

18
Headings

• Description
• an H2 or H3,4,5,6 heading that marks the
  beginning of and tells the name of a psection of
  the page.
• Benefits
• Allows screen reader users to rapidly navigate to
  a specific section either through heading
  navigation or heading list
• Provides a screen reader user with a better
  understanding of overall page layout and
  contents, removing the horrific confusion
  previously experienced by screen reader users on
  portal pages.

19
Landmarks

• Description
• Invisible headings that provides screen reader
  users with useful information about page layout
  and a fast means for navigating to different
  areas of a page.
• Benefits
• Provides a screen reader user with a better
  understanding of overall page layout and contents
• Makes navigating a page with a screen reader more
  efficient
• Allows blind and sighted users to more easily
  discuss a pages content by providing the blind
  user the ability to understand visual page
  layout.
• List of portal page landmarks
• Start of masthead
• Start of page tabs
• Start of page index

20
Landmarks implementation

• Off left technique uses Cascading Style Sheets
  for layout
• A modern alternative to the skip link attached to
  an empty image
• Places material that should be heard but not
  seen, off left relative to the browser window.
• Screen readers pronounce the material. Browsers
  do not display it.
• Coded as h2 headings for easier screen reader
  navigation
• HTML codeidpagetabs" Start of page
  tabs
• CSS code.access position absolute left
  -3000px width 500px

21
Skip Links

• Description
• A CSS-based implementation of the skip links we
  already know
• Provide for fast access to the page index
• Used at the top of the page and at each section
  heading
• Benefits
• Provides for rapid navigation

22
Skip links implementation

• Off left technique uses Cascading Style Sheets
  for layout
• HTML Code
  skip to Page Index
• CSS code.access position absolute left
  -3000px width 500px

23
Page Index

• Description
• A dynamically built index of the sections on a
  portal page.
• Each entry in the index is a link to the
  beginning of that section.
• Benefits
• Provides another means for rapid navigation to a
  specific section
• Allows the screen reader to easily understand
  which parts of a page are section
• Provides a screen reader user with a better
  understanding of overall page layout and
  contents, removing the horrific confusion
  previously experienced by screen reader users on
  portal pages

24
Page index implementation

• Due to the dynamic nature of the page
  construction, the page index is written at the
  end of the HTML.
• Is generated by the Java Server Program that
  creates the page.
• class"access"Start of page index.
  id"page-index" class"access"
  • href"sr"Search
  • href"wn"What's new
  • href"xx"Mail and calendar
  • href"on"On Demand
  • href"ma"Market report
  • href"el"Essential links
  • href"ne"News

25
Access Keys

• Description
• a single hotkey that can be pressed to move the
  focus directly to a specific location, usually a
  link or form field.
• It is usually alt plus a letter or number pressed
  at the same time. In HPR, it is alt plus shift
  plus the access key.
• Benefits
• allows any keyboard-only user to rapidly navigate
  to frequently used features of a page
• Standardized access keys are helping users better
  exploit their benefit
• List of access keys
• ALT plus 0 links to Accessibility Statement page.
  
• ALT plus 1 links to the w3.ibm.com home page.
• ALT plus 2 is the skip to page index link.
• ALT plus 9 links to the feedback page.

26
Access keys implementation

• Part 1 - A block of information describes the
  access keysThe access keys
  for this page are
  • AL
    T plus 0 links to this site's href"http//w3.ibm.com/w3/access-stmt.html"
    accesskey"0"Accessibility Statement.
  
  
  • ALT plus 1 links to the w3.ibm.com home
    page.
  • ALT plus 2 skips to index of
    portlets on this page.
  • ALT plus 9 links
    to the feedback page.
• Part 2 Coding for each access key is simplehref"http//w3.ibm.com/w3/access-stmt.html"
  accesskey"0"name"sitemark_map"to W3 Home Page" coords"0,0,130,70"
  href"/wps/myportal" accesskey"1" / class"access"accesskey"2"skip to Page Index id"feedback" href"http//w3.ibm.com/feedback/"
  accesskey"9"

27
Benefits and Costs

• Multiple ways to navigate
• Satisfy multiple usability pathways
• Up to 4800 productivity improvement in
  accomplishing specific tasks
• Example Check the stock quotes
• Inexpensive to implement
• Some accommodations done by server side
  programming
• Some accommodations based in templates
• All parts independent of actual content

28
Reference

• IBMs Accessibility Center
• http//www.ibm.com/able/
• Extra materials for this presentation on Bob
  Eastons Access Matters blog
• http//access-matters.com/hci/Methods-for-Improvin
  g-Web-Portal-Accessibility.ppt (1.5 mb)
• IBM Systems Journal Vol 44, No 3, focuses on
  Accessibility
• http//www.research.ibm.com/journal/sj44-3.html