Accessibility

1
Accessibility

• Catchup Required re-do's of projects
• Sorting and column example
• W3I quick tips, sources
• HW Screen reader exercise. Majors.

2
Sorting columns

• 2 phase
• xml to xml (done using Saxon)
• (modified) xml to html
• 1st phase uses substring and creating of new
  xml tags
• 2nd phase uses feature that absence of tags can
  be ok
• 2nd phase uses ltxslsortgt
• for the columns uses position() and mod

3
from Macromedia

• An accessible website
• can be perceived
• can be navigated
• can be utilized (with keyboard or devices other
  than mice)
• can be easily understood (even in attention-poor
  situations)
• Accessibility and usability are closely related,
  as they both improve satisfaction, effectiveness,
  and efficiency of users. But while accessibility
  is aimed at making the website open to a wider
  user population, usability is aimed at making the
  target population of the website happier, more
  efficient, more effective.

4
Repent from Flash Sins http//smw.internet.com/sy
mm/voices/flashsins/

• Today's Flash is like the green shag rug from the
  70s.
• Four Flash sins listed
• The "Hidden" Button
• Annoying Audio and Graphics
• Failing to Test
• But It's Art Dammit!

5
Section 508 guidelines by Macromedia
UofWisconsin (Blair Bundy Tim Dugdale)

• (a) A text equivalent for every non-text element
  shall be provided (e.g., via "alt", "longdesc",
  or in element content).
• (b) Equivalent alternatives for any multimedia
  presentation shall be synchronized with the
  presentation.
• (c) Web pages shall be designed so that all
  information conveyed with color is also available
  without color, for example from context or
  markup.
• (d) Documents shall be organized so they are
  readable without requiring an associated style
  sheet.
• (e) Redundant text links shall be provided for
  each active region of a server-side image map.
• (f) Client-side image maps shall be provided
  instead of server-side image maps except where
  the regions cannot be defined with an available
  geometric shape.
• Priority 1194.22(a)

6

• (g) Row and column headers shall be identified
  for data tables.
• (h) Markup shall be used to associate data cells
  and header cells for data tables that have two or
  more logical levels of row or column headers.
• (i) Frames shall be titled with text that
  facilitates frame identification and navigation.
• (j) Pages shall be designed to avoid causing the
  screen to flicker with a frequency greater than 2
  Hz and lower than 55 Hz.
• (k) A text-only page, with equivalent information
  or functionality, shall be provided to make a web
  site comply with the provisions of this part,
  when compliance cannot be accomplished in any
  other way. The content of the text-only page
  shall be updated whenever the primary page
  changes.
• (l) When pages utilize scripting languages to
  display content, or to create interface elements,
  the information provided by the script shall be
  identified with functional text that can be read
  by assistive technology.

7

• (m) When a web page requires that an applet,
  plug-in or other application be present on the
  client system to interpret page content, the page
  must provide a link to a plug-in or applet that
  complies with 1194.21(a) through (l).
• (n) When electronic forms are designed to be
  completed on-line, the form shall allow people
  using assistive technology to access the
  information, field elements, and functionality
  required for completion and submission of the
  form, including all directions and cues.
• (o) A method shall be provided that permits users
  to skip repetitive navigation links.
• (p) When a timed response is required, the user
  shall be alerted and given sufficient time to
  indicate more time is required.

8
from IBM (general usability and highly relevant
to accessibility)

• The Prime Evils of user-experience design
• Confusing navigation and unexpected behaviors
• Slow response time
• Bleeding-edge technologies
• Poor (or omitted) user testing
• Off-the-cuff design services

9

• QUICK TIPS TO MAKE ACCESSIBLE WEB SITES
• Images animations. Use the alt attribute to
  describe the function of each visual.
• Image maps. Use the client-side map and text for
  hotspots.
• Multimedia. Provide captioning and transcripts of
  audio, and descriptions of video.
• Hypertext links. Use text that makes sense when
  read out of context. For example, avoid "click
  here."
• Page organization. Use headings, lists, and
  consistent structure. Use CSS for layout and
  style where possible.
• Graphs charts. Summarize or use the longdesc
  attribute.
• Scripts, applets, plug-ins. Provide alternative
  content in case active features are inaccessible
  or unsupported.
• Frames. Use the noframes element and meaningful
  titles.
• Tables. Make line-by-line reading sensible.
  Summarize.
• Check your work. Validate. Use tools, checklist,
  and guidelines at http//www.w3.org/TR/WCAG
• (c) W3C (MIT, INRIA, Keio) 2001/01

10
Side benefit

• Creating alt tags with meaningful descriptions
  (phrases with keywords) contributes to search
  engines (e.g., google) storing information on
  sites.
• Also, use meta tags, descriptions on pdf
  documents, and any other 'alternative' file
  types.

11
Table

• lttable border"1" summary"This table gives some
  statistics about fruit flies average height and
  weight, and percentage with red eyes (for both
  males and females)."gt
• ltcaptiongtltemgtStatisticslt/emgt about fruit
  flieslt/captiongt
• lttrgtltth rowspan"2"gtltth colspan"2"gtaverage
• ltth rowspan"2"gtredltbrgteyes lttrgtltthgtheightltthgtweig
  ht lttrgtltthgtmaleslttdgt1.9lttdgt0.003lttdgt40
  lttrgtltthgtfemaleslttdgt1.7lttdgt0.002lttdgt43
• lt/tablegt

12
Suggestions

• Inspired (but not limited to) readers with some
  vision and/or senior citizens, but requiring
  magnification
• Group related material. Place action buttons
  close to related text images.
• Do not put links too close together (requiring
  great dexterity).
• Do not assume (graphics only) icons are obvious
  (even if you include onMouseOver text).

13
Accessibility Internet Rally

• California based competition scheduled for
  September 21, 2002.
• http//www.aircalifornia.org/

14
Usability/accessibility checkers

• http//www.usablenet.com/
• Found following problems in my site
• no link back to home page from 3 pages
• img tags without width AND height
• this checker advises always using actual width
  height.
• put meta tag keywords in all pages
• make all titles less than 64 characters
• missing alt tag
• (standard links)
• (problem with studentdatadisk)

15
Exercise

• Locate a site and do the usability check.
• (Can try Purchase sites)
• Another checker is
• http//bobby.watchfire.com/bobby/html/en/index.jsp

16
Homework

• Do screenreader simulation (try to do tasks)
• http//www.webaim.org/simulations/screenreader
• Continue checking usability for any site
• Find other on-line checkers and report.