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: o Computer monitors o Paper o Projectors o Screen readers for the blind o Mobile phones

CSS Helps You… Save time by c ontrolling 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: o Changes text size or screen resolution. o Views the page on an extra large monitor. o 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.undohtml.css 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: o h1 {font-size: larger;} o 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 McMeekinCSS for Accessibility CSS: The Definitive Guide by Eric Meyer (Third Edition). Available in print or online at mysafaribooksonline.com. “G146: Using Liquid Layout”G146: Using Liquid Layout “Liquid Design - A Step Forward To Make Your Website Accessible”Liquid Design - A Step Forward To Make Your Website Accessible

Resources (Cont.) “Really Undoing Html.css” by Eric MeyerReally Undoing Html.css “Top Ten Tips for Making Your Website Accessible”Top Ten Tips for Making Your Website Accessible “Using CSS focus pseudo class” by Matt LawsonUsing CSS focus pseudo class