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!!

Success Criterion 1.2.2 Captions Prerecorded

-- Level A

• Synchronized captions are provided for non-line video

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

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.

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.

• 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:

<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.

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.