CSS Tips and Tricks for Designing Accessible Websites

1
CSS Tips and Tricks for Designing Accessible
Websites

• Presented by Grace Strother

2
Objectives

• Understand the benefits of CSS
• Understand principles of liquid design and how it
  relates to accessibility
• Demonstrate simple techniques for using CSS to
  make websites more accessible
• List some useful resources

3
Benefits of CSS
4
CSS Helps Your Users

• Exercise greater control over how websites are
  presented.
• Access websites on multiple media platforms
• Computer monitors
• Paper
• Projectors
• Screen readers for the blind
• Mobile phones

5
CSS Helps You

• Save time by controlling the styles for your
  entire website with one file.
• Simplify your web documents.
• Reduce file sizes.

6
Liquid Design
7
Principles of Liquid Design

• Layout elements are given relative sizes (usually
  percentages).
• The page scales to fit any view port, no matter
  the resolution, screen size, or text size.
• The user does not need to use the horizontal
  scroll bar.

8
Liquid Design and Accessibility

• Liquid design helps your page degrade
  gracefully.
• The page displays properly even if the user
• Changes text size or screen resolution.
• Views the page on an extra large monitor.
• Disables style sheets.

9
CSS Techniques
10
The Undohtml.css File

• Each web browser has default styles for elements
  like h1, div, p, ol, and so on.
• Tanteks undohtml.css file cancels out these
  default styles.
• In your web document, add a link to this file
  before the link to your own style sheet.

11
Positioning the Skip Nav Link

• The Skip Nav jump link enables screen reader
  users to skip past navigation links to the main
  content.
• To hide the Skip Nav link from users who dont
  need it, position it off-screen.
• Exampledivskip font-size .1em
• position absolute
• left -1000em

12
Font Color and Background Color

• Always define a background color when defining a
  font color (and vice versa).
• Use colors that contrast enough for easy reading.
• Examplebody background-color white
  font-color black

13
Relative Units for Font Sizes

• Relative units help users control text size.
• Avoid absolute units (e.g. pixels, inches, or
  points) whenever possible.
• Examples
• h1 font-size larger
• div font-size .8em

14
Optimal Line Height

• Optimal line heights help users with visual
  impairments or dyslexia.
• Define a line height between 1.2 and 1.6 times
  the normal height.
• Examplebody font-family Arial, sans-serif
  font-size 1em line-height
  1.3

15
Bottom Border for Links

• The default underline for links obscures the
  descenders for letters like g and y.
• Use a bottom border instead of underlining.
• Examplealink text-decoration none
  border-bottom 1px blue solid
  padding-bottom 2px

16
Link Pseudo-Classes

• Define styles for the focus pseudo-class as well
  as hover so mouse and non-mouse users have
  similar experiences.
• IE7 gives focus the same styles as active.
• Exampleahover, aactive, afocus
  background-color white color red

17
Making Text in All Caps Sound Normal

• Avoid all caps whenever possible.
• CONTACT US Contact U. S. to screen readers.
• If necessary, use text-transform to make your
  text appear in all caps.
• This technique may not work with IE and the
  ZoomText screen reader.
• Example.allcaps text-transform uppercase

18
Resources

• CSS for Accessibility by Ann McMeekin
• CSS The Definitive Guide by Eric Meyer (Third
  Edition). Available in print or online at
  mysafaribooksonline.com.
• G146 Using Liquid Layout
• Liquid Design - A Step Forward To Make Your
  Website Accessible

19
Resources (Cont.)

• Really Undoing Html.css by Eric Meyer
• Top Ten Tips for Making Your Website Accessible
• Using CSS focus pseudo class by Matt Lawson