Skip to content

Cognitive Accessibility Design Pattern: Support a Personalized and Familiar Interface

User Need

I need (a version of) a familiar interface, that I recognize and know what will happen.

What to Do

Provide users with a way to personalize their interface to make it familiar.

This can be done by:

  1. Allowing user preferences on presentation such as font style, font size, line heights, margins, and contrast. (Note: The default version should still be readable and use clear fonts.)
  2. Allowing a rollback to a previous interface that the user is familiar with and knows how to use.
  3. Adding semantics on controls, links, and symbols that allow the user to control the experience. For example:
    • HTML5 autocomplete on common fields,
    • adding a toolbar that adds personalized images,
    • use attributes in [[personalization-semantics-1.0]].

Ensure the user knows the personalization options and can easily configure them. Clear instructions can help.

How it Helps

Personalization changes the interface to meet the needs of the user.

Having familiar terms and symbols is key to many users being able to use the web. However, what is familiar for one user may be unfamiliar to another requiring them to learn new symbols. Adding semantics allows symbols and support to be added by an extension or browser that is familiar to the individual user.

A stronger example is people using AAC. These users usually only learn one symbol set. They cannot easily communicate with other people using AAC in a written format or may struggle to understand different symbols used in different applications. When using personalization, such as [[personalization-semantics-1.0]] the user agents can load the symbols that are understandable by the individual user. The user can also access the Web and other applications.

Other support includes autocomplete and extensions that help the user fill out forms and understand the content. Many users with memory or executive function impairments cannot fill in forms without asking someone to help copy over information or check their work. Autocomplete allows many more users to manage forms by themselves.

Getting Started

  • Use the HTML autocomplete tags on all common fields.
  • Add a toolbar that adds personalized images.
  • Add the semantics that can work with a toolbar for personalized images.

Examples

Use:

  1. [[HTML5]] autocomplete tags on all common fields.
  2. True text to support browser preferences for styles.
  3. A toolbar that adds personalized images.
  4. Semantics that can work with a toolbar for personalized images or [[personalization-semantics-1.0]].

Avoid:

  1. Forms that do not support [[HTML5]] autocomplete.
  2. Default fonts that are not clear or readable such as a cartoon font or gothic.
  3. Pages that cannot easily be personalized.

User Stories and Personas

User Story

Personas

Glossary

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.