1. Perceivable

Aug 14 2021- POSTED BY projecth 0 Comment

Info and UI Must Be Perceivable

The WCAG principle called Perceivable states that information and user interface components must be presentable to users in ways they can perceive. This principle is all about providing alternative methods of understanding your web content. If users can’t see your content, for example, let them hear it.

Avoid autostarting audio or video

 

Responsive body copy

 

Use semantic HTML

HTML: a good basis for accessibility
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

Getting to Know HTML
https://learn.shayhowe.com/html-css/getting-to-know-html/

Extending Semantics and Accessibility
https://learn.shayhowe.com/advanced-html-css/semantics-accessibility/

Portrait and landscape orientation

Understanding WCAG 2.1 – 1.3.4 Orientation
https://blogs.lanecc.edu/webteam/2019/09/23/understanding-wcag-2-1-1-3-4-orientation/

Combine multiple visual cues, not just color

Accessibility for Visual Design
https://www.uxbooth.com/articles/accessibility-visual-design/

Text alternatives

An example of an <img> element that is helpful to screen reader users:
<img src="kitten.jpg" alt="kitten with grey striped fur wearing a lavender sweater with gold stars">

Alt Text for Images
https://moz.com/learn/seo/alt-text

Captions and transcripts.

The following are recommended best practices for accessible video captions:

  • Check the captions for accuracy.
  • Ensure the captions have sufficient color contrast.
  • No more than two lines of text at once.

Adding Subtitles to YouTube Videos
https://support.google.com/youtube/answer/2734796?hl=en

Providing closed captions https://www.w3.org/WAI/WCAG21/Techniques/general/G87.html

Closed Captioning Resources

  • https://www.rev.com/
  • https://amara.org/en/
  • https://dotsub.com/
  • https://subtitle-horse.com/
  • https://dcmp.org/learn/captioningkey
Sufficient color contrast

Contrast Checker
https://webaim.org/resources/contrastchecker/

Legible at 200% zoom

According to the Resize Text and Reflow criteria, web content should still be legible and navigable even when the user is zoomed in to 200%.

Give Yourself an Accessibility Test: Zoom Your Page to 200%
https://www.boia.org/blog/give-yourself-an-accessibility-test-zoom-your-page-to-200