Pour Explained: P is for Perceivable Part 2
Tags: a11y, beginners, inclusion, webdev
Published: 2020-06-15 18:22:17

# The P in POUR is for Perceivable:

Information and user interface components must be presentable to users in ways they can perceive. *(Ensure content is accessible to people who are blind and/or deaf.)*

__Let me Level with you…__

Each guideline has success criterion, and each one of these are placed at a level of  __A ,  AA ,  or  AAA__.  Now what these levels refer to is the level of their conformance to Accessibility Laws, A being the minimum and AAA being the max.  In most cases you will see a Level AA conformance, because it is achievable as well as meaningful, but will fall short here and there because really every guideline success criterion is necessary to at least some users with disabilities.  So essentially do not ignore level AAA completely. 

## 1.2 Time-Based Media
This had been mentioned earlier in terms of conforming to level A with alternative text, but it itself can be expanded on so much more to really capture accessibility. 

### Success Criterion 1.2.1 Prerecorded Audio-only and Video-only 
__-- Level A__
* Provide a transcript for non-live audio-only content
* Provide a transcript or an audio description that gives relevant information about the non-live video, unless of course the video is  decorative. 
A great example of an audio transcription can found at the [code newbie podcast](https://www.codenewbie.org/podcast/how-to-not-let-imposter-syndrome-hold-you-back)!!

![Code newbie podcast](https://dev-to-uploads.s3.amazonaws.com/i/znadil9kupzvhyzrm9zv.png)

### Success Criterion 1.2.2 Captions Prerecorded 
__-- Level A__
* Synchronized captions are provided for non-line video

![Scene from My Holo Love](https://dev-to-uploads.s3.amazonaws.com/i/h1nl61y5zzzv5iat3jc9.png)
*Pssssst... I really enjoy some Korean Dramas as you can see.*

### Success Criterion 1.2.3 Audio Description or Media Alternative Prerecorded 
__-- Level A__
* A transcript or audio description is provided for a non-live video.
  * This is really only required if there is relevant visual content that is not presented in the audio

{% youtube 7-XOHN2BWG4 %}

### Success Criterion 1.2.4 Captions Live 
__-- Level AA__
* Synchronized captions are provided for live media that contains audio
  * Audio only broadcasts
  * Web casts
  * Podcasts
  * etc...

### Success Criterion 1.2.5 Audio Description Prerecorded 
__-- Level AA__
* When Video is pre-recorded an audio description is provided.
  * This is especially true if relevant visual content is not somehow provided in the audio.
  * _For an optimal accessible experience WebAIM recommends adding transcripts as well._ 

### Success Criterion 1.2.6 Sign Language Prerecorded 
__-- Level AAA__
* Provide a sign language video that corresponds with the audio.

{% youtube rU6qPL8kLTU %}

### Success Criterion 1.2.7 Extended Audio Description Prerecorded 
__-- Level AAA__
* If an audio description can't be added to a video due to insufficient pausing time an alternate version of the video with pauses to allow for the audio description needs to be provided.

 
### Success Criterion 1.2.8 Media Alternative Prerecorded 
__-- Level AAA__
* A Transcript must be provided for pre-recorded media that has a video track.
  * For an optimal accessible experience WebAIM __striongly recommends__ transcripts for all multimedia that isn't just decorative.

### Success Criterion 1.2.9 Audio-only Live 
__-- Level AAA__
* A Descriptive text-based transcript must be provided for live content that has audio.

------------------------------

## 1.3 Adaptable
We need to think outside the viewbox, our site should be able to presented in a variety of formats not just horizontally.

### Success Criterion 1.3.1 Info and Relationships 
__--Level A__
* Use Semantic Markup to designate headings (`<h1>` - `<h6>`)
  * These should go in order and shouldn’t be skipped, they are used to navigate the page via some accessible technologies. 
  * There should really only ever be one` <h1>` and it should be relative to the page title
* Use Semantic markup to designate regions or  landmarks
  * The most common are `<header>`, `<nav>`, `<main>`, and `<footer>`
    * the aria roles to denote landmarks and regions as well, but generally speaking it’s best practice to use your HTML5 semantic markup instead.  However if a quick fix is needed you can find a lost of aria roles [here.](https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page)

* Tables must be used for Table data not for layout purposes
  * Data cells must be related to their associated headers
  * Data captions, if present needs yo associated to the appropriate data table
*Text Label are associated with their form input  elements
  * related form elements are grouped via fieldsets
  * ARIA labeling may be used when standard HTML5 is insufficient 

### Success Criterion 1.3.2 Meaningful Sequence 
__--Level A__
* The DOM Order must be logical and intuitive
  * What this means is that the order must be able to be read in an understandable way.
  * This includes the Navigation and Tab-index order
    * This essentially means that if you are using the keyboard to navigate it will go in a logical order.
      * The best practice is if you need to set a Tab-index, don’t set it over zero.

__Example of semantic markup & logical DOM order:__
```HTLM
<header>
    <h1>This should be realted to you page title.</h1>
    <nav>
        <a>link 1</a>
        <a>link 2</a>
    </nav>
</header>
<main>
    <article>
        <h2>Region Header</h2>
        <p>info</p>
        <h3>Sub Region Header</h3>
        <p>info</p>
        <p>info</p>
        ...
    </article>

    <section>
        <h2>Region Header</h2>
        <p>info</p>
        <h3>Sub Region Header</h3>
        <p>info</p>
        <p>info</p>
        ...
     </section>

</main>
<footer>
    <p>copyright info or other info + links</p>
    <a>link</a>
</footer>
```

### Success Criterion 1.3.3 Sensory Characteristics 
__--Level A__
* Instructions must not rely on shape, size, or visual location
  * _Click the star to continue_
*Instructions must not rely on sound
  * _Turn the poage when you hear the beep_ 

### Success Criterion 1.3.4 Orientation 
__--Level AA__
* Orientation of web content must not be restricted to only portrait or landscape, unless that orientation is deemed necessary.

### Success Criterion 1.3.5 Identify Input Purpose 
__--Level AA__
* Inputs that collect certain types of user information must have an appropriate auto complete attribute defined.
  * not just `on` or `off`, for a comprehensive look at the Autocomplete attribute look [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).

### Success Criterion 1.3.6 Identify Purpose 
__--Level AAA__
* HTML5 regions or ARIA landmarks are used to identify page regions
* ARIA is used, where appropriate, to enhance HTML Semantics to better identify the purpose of the interface components.