CSS and Web Accessibility

1
CSS and Web Accessibility
2
How Style Sheets Benefit Accessibility

• Discourages tag misuse with separation of
  document structure from presentation
• Discourages image misuse (spacers)
• Precise control over font-size, color, style, and
  spacing
• Users can easily override author styles
• Aural styles available

3
Web Developer CSS Accessibility Tools

• Skip Links
• Image Header Replacement
• List Navigation
• Add padding to links for mobility impaired
• Creating a correct linear layout using div order
  in the code

4
CSS Layouts instead of Tables

• http//www.bluerobot.com/web/layouts/
• http//www.glish.com/css/

5
CSS Zen Garden

• http//www.csszengarden.com/

6
Highlight Focus

• aactive, afocus background FF0
• http//www.people.eku.edu/owenspa/accessibility
  for web developers/paragraphfocus.html

7
List Navigation

• You can use CSS styles to remove the bullets and
  display the list horizontally.
• For best results across multiple browsers, use a
  background image.
• .bullet list-style-imageurl(/images/icons/bullet
  .gif)
• A List Apart http//www.alistapart.com
• http//www.people.eku.edu/owenspa/accessibility
  for web developers/list_styles.html

8
User override of styles

• This is an important feature to users who require
  or must avoid certain color combinations or
  contrasts, users who require large fonts, etc.
  For instance, the following rule specifies a
  large font size for paragraph text and would
  override an author rule of equal weight
• P font-size large !important
• BODY color 000 !important background FFF
  !important

9
Relative Fonts

• http//www.alistapart.com/stories/sizematters/ is
  the best article on how to get around font size
  rendering in the different browsers
• body, body div, body p, body th, body td, body
  li, body dd
• / more specific to override imported rule /
• font-size x-small
• / false value for WinIE4/5 /
• voice-family "\"\""
• / trick WinIE4/5 into thinking rule is over
  /
• voice-family inherit
• / recover from trick /
• font-size small
• / intended value for better browsers /
• htmlgtbody, htmlgtbody div, htmlgtbody p, htmlgtbody
  th, htmlgtbody td,
• htmlgtbody li, htmlgtbody dd
• font-size small
• / be nice to Opera /

10
Spacing, alignment, and positioning

• CSS2 allows authors to control the visual
  placement of content on the page through text
  indentation, margins, floats, and absolute and
  relative positioning.
• 'text-indent', 'text-align', 'word-spacing',
  'font-stretch, margin', 'margin-top',
  'margin-right', 'margin-bottom', 'margin-left
• 'float', 'position', 'top', 'right', 'bottom',
  'left'.
• The 'empty-cells' property allows users to leave
  table cells empty and still give them proper
  borders on the screen or on paper.

11
CSS supports aural style sheets (but popular
browsers dont!)

• Aural style sheets specify how a document will
  sound when rendered as speech.
• Aural style sheets (or "ACSS" for short) allow
  authors and users to specify the volume of spoken
  content, background sounds, spatial properties
  for sound, and a host of other properties that
  can add effects to synthesized speech similar to
  effects achieved with styled fonts for visual
  output.
• H1 voice-family paul
• stress 20
• richness 90
• cue-before url("ping.au")

12
Media types

• _at_media cause documents to render more
  appropriately on certain target devices. 
• Using "_at_media" rules can also reduce download
  times by allowing user agents to ignore
  inapplicable rules.
• These style sheets can tailor content for
  presentation on braille devices, speech
  synthesizers, or tty devices.
• _at_media
• Aural, braille, embossed, handheld, print,
  projection, screen, tty, tv

13
Skip Links

• Skip links are blocks of repeated material, such
  as navigation menus and document headers, marked
  up so that they can be bypassed by people who use
  assistive technology or who navigate via keyboard
  or keyboard interface.  
• People using screen readers, the mobility
  impaired, others not using a mouse, and cell
  phone/pda users can make use of skip links.
•  
• Provide skip links wherever possible. Skip links
  jump over the navigation and start a screen
  reader at the main content. You can make skip
  links invisible to sighted users if required
  for design reasons.

14
Best Solution for Skip Links

• Display the skip navigation link as a normal
  link. Be aware some people will be confused
  because the link that doesnt appear to do
  anything.
• Another solution in addition to this one is the
  extended use of headings. Several browsers can
  now tab by heading as easily as by links.

15
Other Skip-through Solutions

• Display the link on cursor focus using CSS. The
  link would be invisible until someone tabs to it.
  Some might miss the link with this method because
  the link disappears when the tab moves the cursor
  focus to the next link.
• http//www.webaim.orghttp//www.jimthatcher.com/s
  kipnav.htm
• Accesskeys allow the user to jump to anchors
  using the alt-key and another key combination.
  The biggest problem with accesskeys is informing
  the user what keys to use. No standards exist for
  key combinations.
• http//diveintoaccessibility.org/day_15_defining_k
  eyboard_shortcuts.html

16
Other Skip-through Solutions

• Link tags can be used for text browsers and
  assistive technologies to provide links for next
  and previous pages.
• http//people.eku.edu/owenspa/accessibility for
  web developers/link_styles.html
• Tabindex specifies the order of the links when
  tabbing through. Using tabindex, the user can
  jump to the links in the content first, then go
  back to navigation at the end. The problem with
  this method is that the path is predetermined and
  not based on user needs.

17
Incorrect (but creative!) Techniques for Hiding
Skip Links

• Display none or Visibility hidden (Most
  alternative browsers do not display or read text,
  and reading browsers will skip)
• Create invisible text using CSS or the font tag
  (This makes the link unavailable to the mobility
  impaired and cell phone/pda users. Plus, the site
  may be penalized by search engines.)
• Make invisible link by wrapping a href tag around
  a 1 x 1 clear spacer.gif. Use the alt text to
  describe the link (Not read by some Jaws
  versions. Not available to mobility impaired)
• Provide content first in the code using layers
  and positioning (Then you need a skip link to the
  navigation)
• Use the Fahrner Image Replacement method to hide
  text (Not visible to mobility impaired)
• Positioning the skip link outside the browser
  window using CSS (Only read by aural browsers,
  not available to other users)
• Creating very small text link that users wont
  notice (Mobility impaired cant hit it with a
  mouse)

18
Image Header Replacement

• Img tags with the relevant alt tag could be used,
  but that loses the important structure that H
  tags provide and accurate search-engine
  interpretation.
•  
• lth1gtltimg srcourservices.jpg" altOur
  Services"gtlt/h1gt
•  

19
Accessible Image Replacement

• ltH1 id"replaceText"gtSome text goes
  here...lt/H1gtWith this kind of CSS attached to
  it
• replaceText text-indent -9000pxbackground
  url(text.gif)....
• Note IE5 on Windows has a problem with the
  technique, where it negatively indents the text
  and background image. To fix this, place the
  image inside of an absolutely positioned parent
  element. Just experiment, there are other
  workarounds for this bug )

20
Add padding for mobility impaired

• Add padding on links, and increase line height as
  necessary.
• a.link padding padding 10px line-height
  400
• http//www.people.eku.edu/owenspa/accessibility
  for web developers/padding.html
• http//www.people.eku.edu/owenspa/accessibility
  for web developers/spacing.html

21
Mouse and Pointer Feedback

• For the cognitively impaired, do not use
  underlines for any text that is not a link. When
  link underlines are removed with CSS, create a
  hover pseudo class to make it obvious to the user
  that text is a link.
• If images are used for navigation, use a rollover
  image to provide feedback (for instance, an
  underline or glow). Be aware color-blind users
  need plenty of contrast. Make sure alt-text is
  provided or some users wont be able to navigate
  your site.

22
Feedback Examples

• CSS hover, active
• pseudo-classes for data table row background
  color to create visual help scanning long rows.
• a.link_paddingvisited text-decorationline-throu
  gh
• a.link_paddingactive colorF00
• a.link_paddinghover background-colorF9C
  borderthick solid 039
• http//people.eku.edu/owenspa/accessibility20for
  20web20developers/padding.html

23
Forms

• Layout
• Focus
• http//people.eku.edu/owenspa/accessibility20for
  20web20developers/formcsscoding.htm

24
Tools

• IE and Opera
• AIS Toolbar
• Mozilla
• Accessibility Extension
• Text Aloud Plug-in
• Fangs (lets you know what Jaws reads)

25

• End