Text

✎ Technique: Text spacing

Anyone who needs to change the font or text display properties to read the content will benefit from this guideline. This includes people with low vision who use a bigger font, and people with dyslexia, reading, or other cognitive disabilities, who may have specific spacing requirements.

✎ Technique: Structuring content

Adding structure to web content makes it more readable and comprehensible to everyone and especially to people with a visual or cognitive impairment that makes reading on-screen content difficult.

The purpose of HTML is to give structure to otherwise seamless runs of text. HTML allows us to provide semantic meaning to text so that it's available to assistive technologies.... Read more about ✎ Technique: Structuring content

✎ Technique: Writing readable content

Readable content is accessible content. You should aim to choose words and sentence structures that are not difficult or unnecessarily time-consuming to read for your target audience.

Examples

Know your audience, and write in language that’s familiar to them. Even for a specialist audience, there is value in clearly communicating information and concepts when writing online content.

In general, keep words, sentences, and paragraphs short. Remove redundant information and opt...

Read more about ✎ Technique: Writing readable content

✎ Technique: Referring to page content by its position

Avoid referring to a button, menu, or other item in the page only by its position on the page; instead, use additional information that describes the content.

Referring to a specific item in the page content by only its visual position prevents people who use screen readers from being able to make sense of this visual description. Another downside to referring to items by their position is that their position might change when the page is viewed at different screen sizes, such as on a smartphone....

Read more about ✎ Technique: Referring to page content by its position

✎ Technique: Identifying lists of content

Lists are collections of related content. For example, a navigation bar is a list of links or a set of instructions may be an ordered (numbered) list. Clearly identifying a set of items as a list helps people understand that relationship. When you include a list in your page content, this relationship needs to be conveyed visually, and it also needs to be conveyed to people using screen readers.... Read more about ✎ Technique: Identifying lists of content

✎ Technique: Identifying headings

Headings are important orientation aids, and they help people quickly identify the content on your page. When headings are correctly identified, they also allow screen-reader users to quickly navigate from heading to heading using the screen reader's heading navigation functionality.

The best way to do this is to ensure that headings are identified in HTML. When using a web-content editor or a word-processing application, you can do this by making use of the heading options in the styles menu....

Read more about ✎ Technique: Identifying headings

✎ Technique: Consistent layout

Consistency is one of the cornerstones of good usability. Although it is possible in advanced CMSs to create radically different page layouts according to content type, it's important that areas outside of the page’s content area remain consistent across the site for wayfinding purposes. This can be controlled through carefully designing and implementing page templates.... Read more about ✎ Technique: Consistent layout

✎ Technique: Readable paragraph text

Paragraphs of text are a fundamental core of web content, so it's important to display them in a fashion that is optimally readable to the majority of your audience without requiring them to change their display settings. For people who do need to customize display of text to make it easier to read, it's important to support this customization rather than forcing them to read the text the way you specify.

For the most part, this means applying typesetting best practices, which predate the web.

...
Read more about ✎ Technique: Readable paragraph text

✎ Technique: Text and images of text

Some people with reading difficulties or visual impairments need to customize the display of text to make it easier to read. When text is presented as an image of text, that limits their ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling (such as color, typeface, or size).

If you use an online content editor to write content, the styling will happen automatically. If you feel that you need text that deviates from the style, formatting options provided by...

Read more about ✎ Technique: Text and images of text

✎ Technique: Using color to convey information

Some people with color deficit have trouble differentiating between specific colors, such as between red and green or red and black. Screen reader users do not access content visually, so they do not have access to color information.

Color is a powerful visual means of presenting or distinguishing information, but when you use color to identify or distinguish information, make sure that this information is still available to people who can't perceive color.

... Read more about ✎ Technique: Using color to convey information

✎ Technique: Enable text resizing

Some people with reduced visual acuity may not need screen magnification software or screen readers but might still have problems reading smaller fonts. So the ability to allow easy enlargement of text size is important.

There are a number of ways to zoom web-page content in to enlarge text without needing to provide explicit controls to do so. To avoid diminishing this variety of user control, you have to be careful how you code font sizes.

... Read more about ✎ Technique: Enable text resizing

✎ Technique: Expandable sections

Expandables (sometimes called “collapsible” or “disclosure widgets”) are simple interface patterns that allow you to expand and collapse content. They can be helpful accessibility aids as they give users the choice of revealing content to read it, or bypassing the content, making page navigation more efficient for screen-reader users and people using the keyboard or alternative input devices.

To ensure that they are accessible, it's important that expandable sections are coded so that their state (expanded or collapsed) and...

Read more about ✎ Technique: Expandable sections

✎ Technique: Accessible names for buttons

Accessible names are the labels given to HTML elements that can be announced in assistive technologies such as screen readers. They may or may not be visible to sighted interface users, depending on context.

Whether you provide controls using standard HTML elements or create custom controls, ensure that controls are given appropriate names. There are a number of ways to provide accessible names.

... Read more about ✎ Technique: Accessible names for buttons

Pages