Transcript CSS - SCATP

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 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:
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.
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 nonmouse users have similar experiences.
IE7 gives :focus the same styles as
:active.
Example:
a:hover, a:active, a:focus {backgroundcolor: 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