CSS Tips and Tricks for Designing Accessible Websites

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 • List some useful resources

Benefits of CSS

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… • Save time by controlling the styles for your entire website with one file. • Simplify your web documents. • Reduce file sizes.

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 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.

CSS Techniques

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 • 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 • 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 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 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 • 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 • 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 • 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;}

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”

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

CSS Tips and Tricks for Designing Accessible Websites