Formatting Fonts
- Use sans-serif fonts whenever possible.
- Use relative font sizes like percentages or EM so the user can easily adjust font size.
- Make sure there is strong contrast between background and text using the contrast checker tool listed in the Related Links section.
- Avoid hyphenations when sentences drop to next line.
- Use true text instead of images that contain text. Any image text (e.g. a cursor can not highlight it) would need an alternative text tag.
- Use limited number of fonts.
- Avoid using italic, bold, underline or div tags to mark headings. Instead use heading tags (e.g. h1, h2, h3) to help navigation and emphasis.
Images
Provide alternate text descriptions for images that convey content (such as logos, photos, informational graphics, etc.) When writing alternate text descriptions for images, keep the following in mind:
- Present the same content and function of the image in writing
- Be succinct and to the point
- Don’t repeat the same text that is in the caption
- Avoid including “image of…” or “graphic of…”
- Ignore design elements (such as shapes, different backgrounds, etc.) that convey no meaning and do not require alternate text
Links
- Avoid the use of vague hyperlinks (such as “click here” or “next”). Something brief yet descriptive (such as “information about scholarships and grants”) or the title of the page you are directing the link to is better.
- Use underline and different text color to make hyperlinks stand out.
- If a link is long and unclear, you can add a Screentip to the link that provides more context.
Forms and Surveys
- Make sure that the form has a title or heading and each form field and button has a clear label that explains it.
- Avoid timed responses. When this cannot be avoided, assign the maximum amount of time available.
- Verify that the form can be navigated easily with a keyboard (e.g., using the Enter, Space and Tab keys to move throughout the form). Without easy keyboard navigation, a person using a screenreader or voice-input software will not be able to move through the fields.
- Be sure to keep the question or description for each input field on the same line as the input field itself.
- Do not use bold or italics to indicate that a question is required, as this information will not be relayed to blind users. Instead, make the word “Required” part of the label for each mandatory field.
- If you have CAPTCHA to add security for form submission make sure you have audio alternatives for filling in the designated code.
- Avoid using radio buttons or drop-down selections. If you must, you’ll need to make sure labels (or descriptors for the various buttons) are built into the HTML and keyboard strokes will move through the list.
To check out how a webpage would be read to a blind individual using a screenreader, download the Fangs Screen Reader Emulator, a Firefox plugin. To try using a real screen reader, download NVDA for Windows.
