Text is a vital part of any web page, email, or other digital communication. It makes the page findable, flexible, and accessible.
Text Accessibility Basics
- "Live" Text: Wherever possible, include your text on the web body of a page or email rather than linking to a Word or PDF file. While these files can be made accessible, it’s often more effective to keep things simple.
- Graphics: Don’t include images of text. A good rule of thumb is not to have any text on your page that can’t be copied or searched for.
- Proofreading: Use correct spelling and grammar. There is a proofread function in many page and document editors. There are browser plugins such as Grammarly which are very powerful.
- Alignment: Keep all text content aligned to the left. Center- and right-aligned text is harder to read and usually makes the page layout look sloppy.
- Size:
- Text size on a web page should be at a minimum the browser default of 16px. Avoid changing text size manually.
- Changes in text size typically inform the visual user about heading structure (see Headings below). Changing the text size often either makes the text too small to read for some people, or confuses the user about how the information is organized.
- Bold & Italics: Use bold and italicized text sparingly. The use of bold or italicized text over long passages creates text which is harder to read, and therefore less likely to be read.
- Text Color: Don’t change text color. Usually the change in color tells the user that text is a link. Making non-linking text look like a link is confusing to users. It is better to allow the site-wide (or document) style sheet to style a page that is properly formatted (such as the proper use of headings and columns).
- Spacing: Don’t hit Enter (Mac: Return) within text multiple times to add extra spacing. This creates a poor experience for people using assistive technology. It is better to use the hierarchical headings to visually organize the page.
Accessibility Reference
Headings and Page Structure
- When you’re designing your pages, whether in an email, web page, or document, make sure to use the heading styles to organize content. This makes it easier for all users to scan and navigate the page.
- Headings are often accessed from a ribbon or pulldown menu above the text area. If you only apply text formatting directly (such as font size, color, italics, and so on), you will omit the structural information that assistive technology relies on to navigate your document.
- Headings should reflect a logical structuring of page content.
- As much as practical, use the correct hierarchy for heading levels within web pages. Don’t skip a heading level to achieve a smaller font, as it affects the page organization.
- HTML comes with six different header levels: <h1> through <h6>.
- The different heading levels are used to signify hierarchy in your content.
- A level one heading <h1> is the most important heading, <h2> is the next-most important, and so on.
- The page heading should already be identified as <h1>.
- Main headings within the content should be indicated with <h2> [1].
- Subheadings within a section should be indicated with <h3>.
- Don’t use the Heading format around empty lines, or in lines that contain only images (“empty headings” are those without any text).
Accessibility Reference
H42: Using h1-h6 to identify headings
Capitalization
Do not capitalize whole words or sentences. Initialisms (abbreviations in all-caps) are okay.
- Text in all capital letters is read letter-by-letter by many screen readers for the visually impaired.
- Text in all capital letters is also difficult to read over long passages.
Lists
- If you find you are using a lot of commas within a sentence, consider using a bulleted list instead.
- Numbered lists should only be used if indicating a numbered sequence.
Accessibility Reference
H48: Using ol, ul, and dl for lists or groups of links
First Paragraphs
The first paragraph on most pages (whether a web page, email, or document) should provide a brief summary of the page content.
- Describe what the page is about. Simple, descriptive text is best.
- Keep the first paragraph short: one or two sentences.
- Use clear, jargon-free language.