Designing for Accessibility: Beauty Secrets of the CSS Masters – Access U
Accessible Design helps:
- people who use screen readers
- people who use different browsers
- people who will maintain your code later
- people with mobility issues
Ha, she’s not crazy about Nielsen, although he “has good intentions”.
FirstNight site is much more esthetically pleasing, but still accessible.
One of the first principles to accessible design is to make your site liquid. The logic is that if you have a narrow layout, someone with magnified text will not find it easy to read.
Good examples at www.cssliquid.com
Faux Columns technique
use percentage based background positioning
Jello layout
could use max/min width, except for IE….:
Min:
body {padding-left: 300px; padding-right: 300px }
div.content {margin-left: -300px; margin-right: -300px}
Max:
- use conditional comment, additional div and JS expression.
Em-based layout
- start with large image, then shrink accordingly
- watch for inheritance
- csszengarden – really good example, elastic lawn
Self-revealing banner
- background images are better than images
div#reveal {background: #90820 url(images/flightplan.gif) left top no-repeat }
div#reveal a { display: block; height: 200px; width: 100%; }
Typography
Times New Roman — times version created specifically for on screen
Georgia – made for the web. Small letters almost as tall as caps.
Trebuchet – good for large text, but harder for body text
Verdana – shown by usability testing to be easiest to read
It’s now ok to use serif fonts on the web.
Discussion on pixels. “There is only one problem with pixels, they are….EVIL!!!”
Don’t use pixels, use ems. You do need to worry about inheritance issues.
Using a keyword for the body, you can always return back to base (escape inheritance)
body {font-size: large; }
div.content { font-size: -9em;}
table {font-size: large; }
table td {font-size: 90%}
div.sidebar {font-size: .8em }
There really is no difference between %age and ems. Functionally, visually, there is no difference. She uses it to remind herself there is some inheritance going on.
Opera has a simulator to use to see how things will look on Opera Mini (for mobile devices)
Images as a headline – if you set an image as text, you need to worry about color contrast and scaling.
Fahrer Image Replacement —
put image as background to h1, text in span, then display: none on span. Doesn’t work if you have images turned off.
Phark Image Replacement —
text-indent negative. Still doesn’t work if images are off.
Shea Enhancement –
puts empty span inside h1, put background over text.
sIFR –
ok, but has alot of dependencies
Color
web developer toolbar will disable color
For every 250 people who visit your site, there will be 10 with some form of color blindness.
You always need to set contrasting color and background color, even for alt text.
Navigation Menus
Recommendation: consecutive links must be separated by printable characters, OR placed in a list
Accessibility widgets
Skip nav – article by Glenda Sims at http://bitesizestandards.com/bites/headings-help-users-skip-navigation
You can give the user plenty of options, often relies on javascript
