Pour Explained: O is for Operable Part 2
Tags: a11y, beginners, webdev, inclusion
Published: 2020-09-06 19:00:53

## [__Principle 2 -- OPERABLE__](https://www.w3.org/TR/WCAG21/#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](https://www.w3.org/TR/WCAG21/#seizures-and-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.

![crying pikachu](https://media.giphy.com/media/L95W4wv8nnb9K/giphy.gif) 

### __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](https://www.w3.org/TR/WCAG21/#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.
![Foo Fighters Flight Attendant](https://media.giphy.com/media/xUOxf2qC1HIVDj9u5a/giphy.gif)

### __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:

``` HTML

<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](https://www.w3.org/TR/WCAG21/#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!!

![LAter Skaters](https://media.giphy.com/media/zmjKxrest6JBS/giphy.gif)