Cognitive

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

... Read more about ✎ Technique: Identify 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.

(Source: Knowbility article on Reflow)... Read more about ✎ Technique: Reflow

✎ 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: Content on hover or focus

Make it easier for users to interact with added content. Tooltips, drop-down menus, and popups are examples of added content. This new content is usually made visible when you put your mouse pointer over a "trigger" item such as a button or link. It can also display when an item receives focus. Some people have difficulty keeping the mouse pointer over the trigger item. Also, the new content will sometimes obscure existing content. The three requirements of this success criterion, as outlined below, help make the added content more operable.

Dismissable

When using magnification, tooltips or added content can display on top of other information. Unless the newly visible content is displaying an error, the user must be able to dismiss that content without moving the mouse or changing focus. The easiest way to implement this is by providing a keyboard command, such as pressing the escape key, to close the content. The developer can also include a close button within the added content.

Hoverable

Often the new content only displays when the mouse pointer is over the trigger element and disappears when the mouse moves off of the trigger. It can be hard for people with tremors or limited movement to keep the mouse over the trigger element. To remedy that situation, the content must stay visible as long as the mouse remains over the trigger or the mouse moves onto and remains over the new content.

Persistent

This rule combines the previous two. The content must remain visible until the user dismisses it, the hover or focus trigger is removed, or the information is no longer valid.

✎ Technique: Label in name

People with disabilities rely on interface controls that are used programmatically. These controls have a visual label, as well as a programmatic label, known as its Accessible Name. Users have a much better experience if the visible text labels of controls match their accessible names.

Speech input users can navigate by speaking the visible text labels of menus, links and buttons that appear on the screen. It’s confusing to speech input users when they say a visible text label they see, but the speech input does not work because the accessible name that is enabled as a speech input command does not match the visible label.

✎ Technique: Status messages

Assistive technology users should be able to detect when important changes occur on a web page, With the use of a status message, information can be provided to the user without changing focus or unnecessarily interrupting their work. The following are the kinds of status messages to provide:

  • success or results of an action
  • waiting state of an application
  • progress of a process
  • existence of errors

... Read more about ✎ Technique: Status messages

✎ Technique: Differentiating controls

Placement of controls affects their ease of use. For example, for a search feature, the “submit” button should be positioned right after the input field. Appearance and positioning are particularly important when providing a control that supports “destructive” actions, such as a “delete” or “clear” button. In these cases, ensure that these controls are clearly differentiated .... Read more about ✎ Technique: Differentiating controls

✎ Technique: Building tables

The <table> element is for data that one might find in a spreadsheet, consisting of rows and columns of cells. Browsers provide this mechanism to display table structures and to convey table data to assistive technologies. It's important to ensure that the editing process allows identifying row and column headers so that screen reader users can access the meaning of each data cell by understanding what row and column it appears in.

In WYSIWYG editors such as the one provided in Open Scholar, it's possible to create HTML tables using the table tool.... Read more about ✎ Technique: Building tables

✎ 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 link text

Link text is the text you select for a link that describing what happens when a user activates it. So it needs to clearly and accurately convey the link's purpose. Commonly, link text is the name of the linked page or document. When a link leads to a document that's not a web page, such as a PDF or Word document, that should be clarified in the link text. Avoid overly terse, ambiguous link text, and avoid reusing the same link text within a page for links that lead to different destinations.

Good link...

Read more about ✎ Technique: Writing link text

✎ Technique: Writing document titles

The title of a web page is the page's accessible name, and it will be the first thing read aloud by a screen reader when it starts reading the page. It will also be used by search engines, and it labels the browser’s tab containing the page.

To be as helpful as possible, the title should briefly tell the user what the page is about and where they are within the site.... Read more about ✎ Technique: Writing document titles

✎ 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: Describing graphs

Some people understand complex information best when it's presented visually, such as as a chart or diagram, while others find that reading the information suits them better. For people who use screen readers, a good text equivalent of the information that’s presented graphically is essential for their understanding.

For simple graphics, providing a succinct, informative text alternative is usually fine. But for complex graphics, it's not enough to provide a screen reader user with only short alternative...

Read more about ✎ Technique: Describing graphs

Pages