css tips and tricks for designing accessible websites l.
Skip this Video
Loading SlideShow in 5 Seconds..
CSS Tips and Tricks for Designing Accessible Websites PowerPoint Presentation
Download Presentation
CSS Tips and Tricks for Designing Accessible Websites

Loading in 2 Seconds...

play fullscreen
1 / 19

CSS Tips and Tricks for Designing Accessible Websites - PowerPoint PPT Presentation

  • Uploaded on

CSS Tips and Tricks for Designing Accessible Websites. Presented by Grace Strother. 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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'CSS Tips and Tricks for Designing Accessible Websites' - EllenMixel

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
  • 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
css helps your users
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
css helps you
CSS Helps You…
  • Save time by controlling the styles for your entire website with one file.
  • Simplify your web documents.
  • Reduce file sizes.
principles of liquid design
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.
liquid design and accessibility
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.
the undohtml css file
The Undohtml.css File
  • Each web browser has default styles for elements like h1, div, p, ol, and so on.
  • Tantek’s 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.
positioning the skip nav link
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 don’t need it, position it off-screen.
  • Example:div#skip {font-size: .1em;

position: absolute;

left: -1000em;}

font color and background color
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.
  • Example:body {background-color: white; font-color: black;}
relative units for font sizes
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;}
optimal line height
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.
  • Example:body {font-family: Arial, sans-serif; font-size: 1em; line-height: 1.3;}
bottom border for links
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.
  • Example:a:link {text-decoration: none; border-bottom: 1px blue solid; padding-bottom: 2px;}
link pseudo classes
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.
  • Example:a:hover, a:active, a:focus {background-color: white; color: red;}
making text in all caps sound normal
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;}
  • “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”
resources cont
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