Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Accessibility For Web Developers

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

WCAG Principles: Understandable

4:23 with Anwar Montasir

People with disabilities must be able to understand your content and use your interfaces.

WCAG Understandable Principle

  • Set HTML language attribute

  • Use plain language

  • Create predictable navigation

  • No unexpected changes in context

  • Make errors easy to spot and correct

Resources

Vocabulary

  • Change in context: To avoid disorienting users, the following should happen only when the user initiates a change by interacting with an interface element:

    • opening a new window
    • loading a new page
    • significantly rearranging page content
    • moving focus to a new component.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    People with disabilities must be able to understand your content and 0:00
    use your interfaces. 0:05
    The Understandable principle is broken into three guidelines, 0:08
    beginning with one called Readable. 0:13
    The level A requirement is pretty simple: developers should set an appropriate 0:15
    language attribute so screen readers know what language to expect and 0:21
    what accent to use in pronouncing page content. 0:26
    In the example shown here, the document's primary language is English, but 0:31
    this particular paragraph asks the screen reader to switch to French pronunciation. 0:37
    The Readable guideline also covers plain language. 0:46
    The website plainlanguage.gov, a resource for keeping body copy clear and 0:49
    straightforward on federal government websites, 0:56
    recommends using strong, simple words, short paragraphs, 1:00
    clearly organized information, and a conversational tone. 1:06
    I'm looking at a sample of complex versus plain language. 1:14
    The lengthy single paragraph on the left creates an intimidating 1:20
    wall of words that few would enjoy reading. 1:25
    And check out this sentence: 1:28
    "The fungal material is carried into the respiratory tract when 1:30
    airborne particles are inhaled." 1:35
    I'm guessing listening to me read that was pretty tedious. 1:38
    The presentation on the right delivers the same information, but in clear language. 1:43
    Be careful. Watch out for mold in all these materials after a flood. 1:49
    Simplifying language like this helps users with cognitive disabilities, low 1:56
    reading literacy, and those encountering an unfamiliar topic or language. 2:01
    The second guideline, Predictable, has to do with keeping app and 2:08
    website experiences predictable and navigation schemes consistent, 2:13
    something which benefits all users regardless of physical ability. 2:20
    In addition, 2:27
    the predictable guideline warns against unexpected changes in context. 2:28
    To avoid disorienting users, the following should happen only when 2:35
    the user initiates a change by interacting with an interface element: 2:40
    opening a new window, loading a new page. 2:46
    significantly rearranging page content, or moving focus to a new component. 2:52
    As the Mozilla Developer's Network says on the subject, 2:59
    people don't want interfaces to surprise them. 3:03
    They want things to be intuitive and behave as expected. 3:06
    The final understandable guideline is called Input Assistance. 3:13
    Users sometimes make mistakes, 3:19
    no matter how well designed the web form or interface. 3:21
    Prevent frustration by making errors easy to spot and correct. 3:26
    A Nielsen Norman group article linked in the Teacher's Notes 3:33
    offers three principles for error reporting in forms. 3:38
    The error message should be easy to notice and understand. 3:42
    The fields in error should be easy to locate. 3:47
    And users shouldn't have to memorize the instructions for fixing the error. 3:52
    We'll take a closer look at building an accessible form 3:58
    in the second stage of this course. 4:02
    You might have noticed that the Understandable principle 4:06
    was quite a bit shorter than either the Perceivable or Operable principle. 4:09
    Our final principle, Robust, is the shortest entry of all in the WCAG. 4:15
    We'll take a closer look in our next video. 4:21

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up