Tag: Adaptable

1.3.6 – Identify Purpose (Level AAA)

Posted on July 06, 2020| By | In Advanced (Level AAA)

The purpose of all components must be programmatically determinable..

Introduction

Users often set personal preferences in their browser or assistive technology to help them understand websites. By ensuring components are understandable by these technologies, users can experience websites in the way that best suits their needs.

Users with cognitive impairments (such as problems with memory, focus, language and decision-making) benefit from this approach. For example, they may set their browser to display a familiar icon for a navigation link or replace your chosen icon for one they understand.

How to Pass

  • Use ARIA landmarks to define regions of each page
  • Use HTML markup to identify links, icons and user interface components

See Also

Identify Input Purpose (1.3.5 – Level AA)

Posted on July 06, 2020| By | In Intermediate (Level AA)

‘Identify Input Purpose’ requires the purpose of input fields to be programmatically determinable.

Introduction

All users, but particularly those with cognitive impairments, benefit from programmatically determinable input fields. These allow assistive technologies to understand the purpose of fields and present them in a preferred format to the user.

In addition, users with motor impairments benefit from autocomplete on forms by reducing the need for fine motor movement.

How to Pass ‘Identify Input Purpose’

  • Specify the intention of each input field with “input type=”type”
  • Use specific autocomplete values to allow the user’s browser to prefill fields where it already has the data

‘Identify Input Purpose’ Tips

There’s a full list of input purposes that need to be covered at www.w3.org/TR/WCAG22/#input-purposes

Use the most specific label for each field, for example “bday” rather than “date” if you want a user’s date of birth. While the field does want a date, its purpose is to collect the birthday. 

See Also

Orientation (1.3.4 – Level AA)

Posted on July 06, 2020| By | In Intermediate (Level AA)

‘Orientation’ requires your website to adapt to portrait and landscape views.

Introduction

Some users have a preferred alignment (portrait or landscape) or physical requirements and need content to adapt to their preference. Others have visual impairments and may find one way round easier to use.

Most websites pass this guideline as they are responsive and adapt to the user’s chosen positioning.

How to Pass ‘Orientation’

  • All content retains meaning in either position.
  • All content retains function in either position.

‘Orientation’ Exceptions

When a single alignment is essential, for example:

  • A landscape image that would be too small to see in portrait mode
  • Where the width or height of one mode is necessary for its function 

See Also

Understanding Succession Criterion 1.3.3 (W3C)

1.3.3 – Sensory Characteristics (Level A)

Posted on October 08, 2012| By | In Beginner (Level A)

Instructions don’t rely solely on sensory characteristics.

Introduction

“Sensory characteristics” is an important but complicated-sounding phrase in web accessibility. It’s actually far less complicated than it sounds. The sensory characteristics of components are things like shapes, sounds, positioning, orientation, sound, colour and size.

You’ll often come across sensory characteristics in instructions to users. Saying things like “Use the search bar on the right” isn’t helpful to a user who doesn’t understand what ‘right’ is and “Click the green button” doesn’t help users who can’t see green.

How to Pass

Getting sensory characteristics right is mainly a case of using your common sense. There are no technical requirements, just good and sensible copywriting:

  • Use text labels to elements in addition to sensory characteristics
  • Don’t user instructions that only use sensory characteristics
  • Avoid instructions that rely on sound

Tips

Creating accessible instructions is great for everyone. The clearer your instructions are, the more likely users will follow them.

Good instruction will use several sensory characteristics. Consider the accessibility of these examples:

  1. ‘Use the search box’
  2. ‘Use the search box on the right’
  3. ‘Search by using the green rectangular box labelled ‘Search’ at the top right of the page’

The first two won’t pass, they don’t give users enough sensory information. The third uses text labelling to help the user.

We often have an aversion to adding words, feeling that they can confuse users. In this case, the opposite is true. When you need instructions, make them count.

Avoid sound for instructions. It’s always hard to tell what the sound means and what a user did to make it happen. A prime example is if you use sounds to alert users to errors on a form. The user can’t tell exactly what made the error, they can’t even be sure the sound indicated an error. Use visual cues instead such as colour and symbols.

By making sure you don’t rely solely on colour in your instructions, you can work towards Guideline 1.4.1.

See Also

1.3.2 – Meaningful Sequence (Level A)

Posted on October 01, 2012| By | In Beginner (Level A)

Present content in a meaningful order.

Introduction

The meaning of content on your website relies on the order you present it. For example, in English we read from left to right and read a left-hand column before a right-hand column.

Users who rely on assistive technology (such as a screen reader) to interpret content, require content to be presented in a meaningful order. If this is presented out of sequence, users may become disorientated and may not understand the content.

How to Pass

Ensuring you present your content in a meaningful sequence is a wide-ranging part of web accessibility. It applies to all elements of all pages, so is as big or as small a task as your website.

A sequence is “meaningful” if the order of the content within it cannot be changed without altering its meaning.

Make sure you:

  • Present all content in a meaningful order
  • Separate navigation menus from the content
  • Use paragraphs in order
  • Nest headings from H1 downwards to show their relative importance
  • Choose whether a list needs numbering or not
  • Use valid HTML

Tips

Invest in some assistive technology and use it to browse your website.

Not all content has a meaningful sequence – for example, a sidebar next to the main article where it doesn’t matter if the user reads the sidebar or the article first

Turn off the site’s Cascading Style Sheet (CSS) and check that your web page displays in the correct order.

Using headings to show importance isn’t always straightforward. Headings on a web page are a great way to break up content and show your users the relative importance of each section. Headings in HTML range from H1 (the most important) to H6 (the least important). It’s best to have just one Heading1 (H1) on a web page, to show the title of that page.

However, headings don’t need to descend from 1 to 6 each time you use one. As well as headings that share levels, you can skip levels altogether if that fits your content.

See Also

1.3.1 – Info and Relationships (Level A)

Posted on September 24, 2012| By | In Beginner (Level A)

Content, structure and relationships can be programmatically determined.

All users benefit when your website structure is logical and each section of content has a clear relationship with the content around it. Visual cues like headings, bullet points, line breaks, tables, bolding, underlining links and other formatting choices help users understand the content.

Assistive technology often relies on correct formatting and logical structures to work. When a user experiences the site through a screen reader, other assistive technology or without CSS they should still understand the content.

How to Pass

Complying with the need for good structure and formatting is a wide-ranging target. Half-measures don’t work, so you can’t use subheadings properly and then throw random bullet points all over the place.

Amongst other things, you must:

  • Break up content with subheadings for new sections
  • Mark headings with HTML header tags
  • Use lists, tables and other formats where needed
  • Use the correct HTML for all structural elements
  • Use valid HTML everywhere
  • Use clear labels and alternative text on forms

All these elements must be programmatically determinable – which means that a web browser or assistive technology can understand them. For example, don’t just use bold for headings but use the correct heading tag such as H1.

Where this can’t be achieved programmatically, you must provide a text description. For example, “* indicates required fields”.

Tips

Ensuring that your web pages have an accessible structure is at once a simple and complex task. The level of difficulty depends on the complexity of your website; a page with several levels of headings will take more work than a single-topic blog post.

An efficient way to check your markup is to use an HTML validator. This will tell you if the web page structure has any HTML errors – these errors won’t always equate to accessibility flaws but the cleaner your code the better. Errors like improperly closed paragraph tags are easily remedied.

After using the validator, check pages manually for correctly nested headings and other more visible page elements. Manually check that any forms you use are labelled clearly too, simple things like required field asterisks that lack explanation can cause big problems.

See Also