# ✎ Technique: Orientation

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential (i.e., bank check).

(Source: Affinity Bridge on responsive design)

# ✎ Technique: Identify input purpose

Make it easier for people to complete input fields requesting personal information. People with mobility issues have difficulty entering data into the fields. People with cognitive disabilities may have difficulty remembering details. It may be hard for them to enter personal information due to memory loss, dyslexia, or other impairments.

Developers should use autocomplete on fields that collect personal data to explicitly identify the data type. Use the list of  Input Purposes for User Interface Components to select the correct value. Turn off autocomplete for sensitive information.

(Source: Knowbility article on input purpose)

# ✎ Technique: Reflow

Use responsive design to allow your content to zoom and respond to various screen sizes.

Present content without loss of information or functionality, and without requiring scrolling in two dimensions, except for parts of the content which require two-dimensional layout for usage or meaning.

Examples of content which require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.

# ✎ Technique: Non-text contrast

The contrast of icons and graphical objects is just as important as that of text. Use sufficient contrast for all elements on the screen, with a minimum contrast ratio of 3:1.

# ✎ 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: Checking color contrast

Color-contrast-checking tools can compare two colors and report on the contrast ratio between them. Some tools will allow you to adjust these values until the ratio is sufficient, helping you to choose a color scheme that avoids contrast problems.... Read more about ✎ Technique: Checking color contrast

# ✎ 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...

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

# ✎ 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

In long lists of links, it's helpful to show users which links they've already followed so they can focus on unseen content. Browsers do not tend to let you style visited links with anything but the color property.

## Examples

### ✓ Good example

With link styling, as with many aspects of web-interface design, you can aid comprehension by capitalizing on convention. By default, browsers style unvisited...

# ✎ 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.

...

# ✎ 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...

# ✎ 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.

A clear indication that specific form fields are required can save users time and avoid potential errors relating to missing data when a form is submitted.

This indication should be visually distinct without relying on color, and it should also be programmatically available to screen-reader users.

# ✎ Technique: Form error communication

Effectively and accessibly communicate form errors by:

1. Communicating that a form has errors,
2. Communicating any individual errors case by case, including clear guidance on how to address the error.

In part, this involves thoughtful content-writing to clearly and unambiguously help users recover from the error. But it also requires that error messages are...