HTML and CSS Reference
In-Depth Information
Just as important as taking advantage of the HTML features provided specifically for
accessibility is taking care to design your pages in a manner that's as accommodating as
possible for users who are in need of assistance. Most of these techniques are relevant to
all users, not just those using alternative browsers or assistive technologies.
Use Color
A common pitfall designers fall into is using color to confer meaning to users. For exam-
ple, they print an error on the page and change the font color to red to indicate that
something went wrong. Unfortunately, visually impaired users can't distinguish your
error message from the rest of the text on the page without reading it. Needless to say,
putting two elements on the page that are the same except for color (such as using colors
to indicate the status of something) is not accessible. You can add borders to elements
that need to stand out, or you can label them with text. For example, you might display
an error message this way:
<p class=“error”>ERROR: You must enter your full name.</p>
Fonts
When you specify fonts on your pages, you can cause accessibility problems if you're
not careful. In some cases, font specification doesn't matter at all because the user
accesses your site with a screen reader or alternative browser that completely ignores
your font settings. However, users who simply see poorly can have an unpleasant experi-
ence if you set your fonts to an absolute size—particularly if you choose a small size. If
a user has set his browser's default font to be larger than normal, and your pages are hard
coded to use 9-point text, that user will probably dump your site altogether.
In many cases, it makes sense to leave the default font specification alone for most of the
text on your site. That way, users can set their fonts as they choose, and you won't inter-
fere with their personal preferences. If you do modify the fonts on the page, make sure
that the fonts scale with the user's settings so that the user can see the text at a comfort-
able size.
CAUTION
Be sure to test your pages with a variety of text size settings
when you do browser testing. Many users change increase the
size of fonts in the browser to make them easier to read, and you
should make sure that if users have done so, your pages still
work for them.
