Category: Beginner (Level A)

Archive of my posts about Level A guidelines from the WCAG 2.0. This is the level to kick start your web accessibility journey.

Three Flashes or Below Threshold (2.3.1 – Level A)

Posted on December 17, 2012| By | In Beginner (Level A)

‘Three flashes or below threshold’ requires that no content flashes more than three times per second.

Introduction

Flashing content on a website can cause difficulties for users with photosensitive seizure disorders such as epilepsy. Flashing content can cause these users to suffer a seizure.

How to Pass ‘Three Flashes or Below Threshold’

Don’t add anything to your website that flashes more than three times per second.

Exceptions

There’s one exception to this guideline based on the size of the flashing content, but I recommend you ignore it and just don’t let anything flash more than three times per second.

“the combined area of flashes occurring concurrently occupies no more than a total of .006 steradians within any 10 degree visual field on the screen (25% of any 10 degree visual field on the screen) at typical viewing distance.”

Understating Success Criterion 2.3.1

If you can understand that you’re smarter than me!

‘Three Flashes or Below Threshold’ Tips

Remember, flashing is different to blinking (see Pause, Stop, Hide). Blinking can distract users but doesn’t cause seizures. 

If blinking content occurs three times per second, it is considered flashing content.

The exception is removed at Level AAA in Three Flashes.

See Also

Pause, Stop, Hide (2.2.2 – Level A)

Posted on December 10, 2012| By | In Beginner (Level A)

Provide user controls to pause, stop and hide moving and auto-updating content.

Introduction

Moving or auto-updating content on a website can cause difficulties for users with visual or cognitive impairments. These users may not be able to perceive the information before it changes or may be distracted by the movement.

Alongside avoiding moving content, you can help users by providing them with simple controls.

How to Pass ‘Pause, Stop, Hide’

  • Ensure moving, blinking or scrolling content has a control to pause, stop or hide it.
  • Ensure auto-updating content has a control to pause, stop, hide or control the frequency of updates.

Exceptions

  • The moving, blinking, scrolling or auto-updating content starts only by user request.
  • The moving, blinking, scrolling or auto-updating content is not presented in parallel with other content (for example, a full-page advert displayed before users reach your webpage).
  • The moving, blinking or scrolling content lasts less than five seconds.
  • The movement is essential (for example, an animation that shows users that something is loading, if it would otherwise look like your website was frozen).

‘Pause, Stop, Hide’ Tips

When a user pauses and unpauses content, let them continue where they left off if the content is pre-set but take them to the current display if the content is real-time.

A rough guide is that “blinking” content pulses less than three times per second.  Anything that pulses faster is “flashing” content and has its own rules (see Three Flashes or Below and Three Flashes). The distinction falls on the line between what may cause a seizure in a user (flashing) and what is more of a distraction than a hazard (blinking).

My advice is to remove anything that blinks or flashes and never auto-play content – that way you pass without having to build all the controls or time it to five seconds.

See Also

Timing Adjustable (2.2.1 – Level A)

Posted on November 12, 2012| By | In Beginner (Level A)

‘Timing Adjustable’ requires that you provide user controls to turn off, adjust or extend time limits.

Introduction

Users with visual, motor or cognitive impairments may need more time than others to understand and use your website. Any time controls or limits can make using your website difficult for these users.

How to Pass ‘Timing Adjustable’

If content on your website uses a time limit:

  • Give users an option to turn off the time limit before it begins (for example, a landing page before the time-limited page can display a message that shows users what to do); or
  • Give users the option to adjust the time limit before it begins, over a range of at least ten times the default setting (you can do this with a landing page too); or
  • Give users the option to extend the period at least twenty seconds before it expires. This must be a simple action like clicking a button and must be available to use at least ten times.

If your website has moving or animated text, users must be able to pause the movement.

If your website has a feature that is automatically updated (for example, with the latest football scores), you must allow users to delay the frequency of the updates by at least ten times the default setting.

Exceptions

  • The time limit is due to real-time events, like bidding in an auction or a livestream

  • The time limit is essential for your business. For example, a ticket sales website that saves a reservation for ten minutes because demand is high and giving users unlimited time would undermine the business process
  • The time limit is more than 20 hours.

‘Timing Adjustable’ Tips

Take as much content outside of time limits as possible but consider your users’ security. For example, logging out of an account after a period of inactivity is a positive use of a time limit.

Make sure any user controls you provide are keyboard accessible.

The exceptions of the time limit being essential or over 20 hours are both removed at Level AAA in No Timing. 

If you use a pop-up to give your users the option to extend a time limit, consider Interruptions.

See Also

No Keyboard Trap (2.1.2 – Level A)

Posted on November 05, 2012| By | In Beginner (Level A)

‘No Keyboard Trap’ ensures users can navigate to and from all content using a keyboard.

Introduction

Users with visual or motor impairments may choose to access your website with only their keyboard. Users must be able to navigate to and away from all content and functionality on your website using a keyboard. 

How to Pass ‘No Keyboard Trap’

All elements on your website can be navigated to and away from by keyboard only using the ‘tab’ or arrow keys.

‘No Keyboard Trap’ Tips

To test for this guideline, unplug your mouse and make sure you can fully use your website with only your keyboard.

It’s tempting to use non-standard navigation with an explanation of what to do, but this isn’t worth your time. Stick to the ‘tab’ and arrow keys that most users are familiar with.

See Also

Keyboard (2.1.1 – Level A)

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

All functionality is accessible by keyboard with no specific timings.

Introduction

Users with visual or motor impairment may navigate your website using only their keyboard or through assistive technology that relies on a keyboard-like interaction with your website.

How to Pass ‘Keyboard’

  • Ensure users can access all elements of your website using only a keyboard
  • Ensure there are no specific timings needed for keystrokes, for example holding down ‘Enter’ for three seconds to submit a form

Exceptions

Functions that require a mouse pointer for input, for example free drawing tools and some types of games. 

‘Keyboard’ Tips

To test for this guideline, unplug your mouse and make sure you can fully use your website with only your keyboard – you might be surprised by what you can’t do.

Make sure no function on your website requires timed keystrokes (for example, ‘double tap on enter within two seconds’).

Don’t use ‘access keys’ (assigning a navigation link to a particular key) or page-specific key commands as they can conflict with assistive technology.

At Level AAA, 2.1.3 – Keyboard (No Exception) removes the exception.

See also

1.4.2 – Audio Control (Level A)

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

Don’t play audio automatically.

Introduction

Automatically playing sounds can distract and disorientate users, especially those with cognitive impairment or relying on a screen reader.

How to Pass

Don’t have any audio that plays automatically.

Exceptions

Although you can technically pass this guideline by adding a pause, mute or stop function to automatic audio, that’s a bad idea. You don’t want users searching around your website for the audio control.

There’s a further exception on audio that plays for less than three seconds. Ignore this too. Three seconds of audio can still distract users, especially those who have problems maintaining focus.

Tips

Don’t be afraid to use audio! It can be great on a website, just let users choose when to play it.

See Also

Use of Colour (1.4.1 – Level A)

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

Don’t use presentation that relies solely on colour.

Introduction

Users with visual impairments, including difficulties perceiving colour, may need help where colours on your website present information.

You can solve this by using other identifiers such as labels, shapes and patterns, issue.

How to Pass ‘Use of Colour’

  • Ensure no instructions rely on colour alone
  • Ensure that no information (like charts and graphs) relies on colour alone

‘Use of Colour’ Tips

Check for issues by viewing your website in black and white.  Are there any instructions you can’t follow or is there information you can’t understand?

Making your website accessible to colour blind users is simple. The main area to focus on is giving instructions. Saying things like ‘Click the green button’ or ‘Required fields are red’ is useless to users who can’t see green or red. Reinforce these instructions with at least one more identifying remark.

A common failure is link text. Marking this out with a change of colour alone isn’t good enough, use an underline, bolding or a symbol too.

Another point is to make sure that important graphics are not dependent on colours alone. For example, your users might not understand a pie chart where only colours separate the segments. In this case, you should add clear labelling and patterns to the segments.

There’s an overlap here with 1.3.3 – Sensory Characteristics. Instructions should always be clear and give your users the detail they need.

See Also

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