Pour Explained: O is for Operable Part 2

Principle 2 -- OPERABLE

UI components that feature interactive capabilities and navigational components MUST be operable.

OK... So it's been a minute since part one, we started with sections 2.1 and 2.2, so we'll be taking a look at 2.3-Seizures & Physical Reactions, 2.4-Navigable, and 2.5-Input Modalities this time around.

Again, a quick refresher on the levels:

• A, AA, AAA
• Many entities try to maintain a level AA compliance because it is achievable as well as meaningful. Maintaining just a level AA compliance is still falling short in being accessible and inclusive.
• Every guideline success criterion is necessary to at least some users with disabilities, so don't ignore level AAA compliance.

Guidelines:

2.3 Seizures & Physical Reactions

DO NOT design content that could or is known to cause seizures or other physical reactions.

Typically, if a TV show or Theatrical production has any type of flashing there will be a warning at the beginning of the show to alert folks that unwanted physical reactions are possible. Our friend Pikachu caused such a fuss when in 1997 an episode of Pokemon caused a large number of children in Japan to have a seizure or physical reaction. The episode itself wasn't necessarily the only factor behind the seizures or physical reaction but possibly an undiagnosed instance of photosensitive epilepsy or other disabilities that have sensitivities to flashes. That is why having warnings are necessary, but also that flashing content should be limited.

Success Criteria:

2.3.1 Three Flashes or Below Threshold

Level A

Web apps, sites, or pages must not contain content that flashes three times or more within a one-second period of time.

• exceptions:
  • Flashing is sufficiently small and low in contrast with limited red content

All content must meet this success criterion

2.3.2 Three Flashes

Level AAA

To meet a higher grade of accessibility success, NO page content should flash three times or more within a one-second period.

NONE just leave it out.

2.3.3 Animation from Interaction (2.1)

Level AAA

At any point in time, a User can disable non-essential animation and movement that is triggers by user interaction.

• Exceptions:
  • The animation is essential
  • The animation is conveying important information.

2.4 Navigable

Hello and welcome to Navigable. Being navigable means helping your user traverse your site content, providing ways to navigate, find content, or figure out where they are within the site.

Success Criteria:

2.4.1 Bypass Block

Level A

A mechanism is provided to skip blocks on redundant content, such as the site nav.

This is sometimes called a skip link and is super helpful for keyboard-only users and screen reader users to skip navigating through the nav element every time entering a new page.

Additionally, if a skip link is not provided, but a proper headings structure is provided and/or page regions and landmarks are properly identified, then this may be a sufficient technique. However, not all browsers support navigating using headings or landmarks, so WebAIM recommends having a skip link.

2.4.2 Page Title

Level A

The page title should be descriptive and informative. Generally, the page title should be similar to the H1 element on the current page. When presented in the <title> tags the unique information should go first, then followed by any redundant information.

Here's an example of What Dev has for the Edit Post screen:

<title>Edit Post - DEV Community 👩‍💻👨‍💻</title>

2.4.3 Focus Order

Level A

The navigation of the links, form elements, buttons, etc is logical and intuitive.

A Best Practice: Don't set a tab-index over zero, unless you are drawing focus in which case you'll want reset it back to zero or negative one when you are done drawing the focus

2.4.4 Link Purpose (in context)

Level A

The purpose of the link can be determined from:

• The text alone
• The link text and context.

LInks that have the same text but go to different locations should be readily distinguishable from each other.

2.4.5 Multiple Ways

Level AA

There need to be multiple ways to find other web pages within the site. There should be at least two of these elements:

• Table of contents
• A Site map
• A Site Search
• A list of all available web pages.

More than one way is available to locate a set of web pages except when the web page is the result of or a step in a process.

2.4.6 Headings

Level AA

Headings and labels describe the topic or purpose of related content.

• Be Concise
• GIve Context

2.4.7 Focus Visible

Level AA

Keyboard Focus Indicator is visible.

Most browsers have focus states already in place, but you can change them to match your style tiles, just remember they need to be there so don't just leave them out!

2.4.8 Location

Level AAA

There should be information on where your user is located within the site. You can achieve that with some of these examples:

• Breadcrumbs
• A Sitemap
• Presenting the current Location in the Nav
  • Via Contrast Change.
  • Via Highlighting.

2.4.9 Link Purpose (link only)

Level AAA

There is a mechanism provided to the user that allows for the purpose of the link to be defined by the text alone.

• Exception:
  • The link's purpose is supposed to be ambiguous to all users in general

2.4.10 Section Heading

Level AAA

Section headings are used to organize the content.

• The heading is used in its general sense and includes titles as well as other ways to add a heading to different types of content.

This success criterion covers sections in writing rather than UI components. UI components will be covered in R of POUR or more precisely 4.1.2: Name, Role, Value.

2.5 Input Modalities

We need to make it easier for the user to operate functionality through various input beyond just the keyboard.

Success Criteria:

2.5.1 Pointer Guestures

Level A

All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture.

• Exception:
  • Multipoint is essential.
  • Path-based gesture is essential.

This applies to web content that interprets pointer actions, in other words, this does not apply to actions that are required to operate the user agent or assistive technology.

2.5.2 Pointer Cancelation

Level A

This is particular to functionality that can be operated via a single pointer.
At least one of these are true:

• No Down Event

  • The down-event is not used to execute and part of the function.

• Abort or Undo

  • Completion is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion

• Up Reversal

  • The up-event reverses any outcome of the previous down-event

• Essential

  • Completing the function on the down-event

Functions that emulate a keyboard or numeric keypad key press are considered essential.

This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).

2.5.3 Label in Name

Level A

UI Components with labels that include text or images of text, the name must contain the text that is present visually.

A best practice is to have the text of the label at the start of the name.

2.5.4 Motion Actuation

Level A

Functionality that is operated by motion (device or user) must also be able to be operated by UI components. Responding to the motion can be disabled to prevent actuation.

Exceptions:

• Supported Interface

  • Motion is used to operate functionality through an accessibilty supported interface

• Essential

  • The motion is essential for the function and doing so would invalidate the activity.

2.5.5 Target Size

Level AAA

The target size should be 44px by 44px (CSS pixels)

Exceptions:

• Equivalent
  • The target is available through an equivalent link or control on the same page that is at least 44px by 44px
• Inline
  • Target is in a text block or sentence.
• User Agent Control
  • The user determines the size of the target
• Essential
  • A particular presentation of the target is essential for conveying information.

2.5.6 Concurrent Input Mechanisms

Level AAA

Web content does not restrict the use of input modalities available on a platform.
Exceptions:

• The restriction is essential.
• It is required to ensure the security of the content.
• It is required to respect user settings.

Welp, that finishes up Operable for WCAG 2.0 + 2.1, I'll be working on U is for Understandable in the near future. U will cover 3.1 - Readable, 3.1 - Predictable, and 3.3 - Input Assistance. So be on the lookout! Thank you so much for hanging out and learning with me as I prepare for my IAAP WAS Cert test!!