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

Error Messaging

4:08 with Anwar Montasir

You might recall a Nielsen Norman Group article I mentioned previously that gave us three principles for error reporting. Error messages must be easy to notice and understand, highlighted visually, and accompanied by clear instructions for fixing the problem. With those principles in mind, Iā€™m going to create a page visualizing two types of common errors: a user making an invalid entry, and leaving a required field blank.

When Reporting Form Errors

  • Make messages easy to notice and understand

  • Highlight errors visually

  • Keep instructions simple

Solution

Curious to view how Anwar built this accessible form? Download the solution files below.

Further reading

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

    You might recall a Nielsen Norman Group article I mentioned previously 0:00
    that gave us three principles for error reporting. 0:05
    Error messages must be easy to notice and understand, highlighted visually, 0:09
    and accompanied by clear instructions for fixing the problem. 0:16
    With those principles in mind, 0:22
    I'm going to create a page visualizing two types of common errors: 0:24
    the user making an invalid entry and leaving a required field blank. 0:30
    I'll start by taking my index.html file and 0:35
    saving it as error.html. 0:40
    This will give me the exact same page with a different file name. 0:45
    And from there, I can make a few edits. 0:49
    Again, we're not really using JavaScript to validate our form. 0:51
    Just creating for now 0:56
    an HTML/CSS visualization of what the errors should look like. 0:58
    Let's visualize what would happen if the user entered an invalid email address 1:03
    and left the zip code blank. 1:09
    I'll begin by making the error fields red, 1:13
    since many users associate red with stop and green with go. 1:16
    I'm applying a class called "error-input" to my form inputs with errors, 1:42
    and one called "error-text" to the labels containing errors. 1:47
    However, I know that's not enough. I haven't told users how to fix the errors. 1:53
    And I haven't provided additional visual cues 2:00
    to help colorblind users who might not notice these red highlights. 2:03
    Font Awesome offers an icon called exclamation triangle that looks like 2:09
    an error warning. 2:14
    So I'll add that to the labels above my problem fields. 2:15
    I'll also use the space below the inputs to explain each error. 2:26
    With the email address I'm trying to be as specific as possible. Something 2:42
    like "invalid email address" would offer no clues as to why the address was rejected. 2:47
    So I'll try "email address must contain a single @ symbol". 2:53
    And "please enter a zip code" should explain 3:04
    the error on the empty required field. 3:10
    My class called "error-text" will turn these error hints red. 3:15
    I've included resources in the Teacher's Notes on form error messaging. 3:21
    It's not an easy thing to get right, and 3:25
    you'll definitely want to user test your proposed solutions. 3:28
    If you have time, go ahead and build the Billing Information and 3:33
    Review Orders screens as well. 3:37
    I'd love to see what you come up with. 3:39
    And as you build your portfolio and position yourself to enter the industry, 3:41
    be sure to refer back often to the resources we've covered here. 3:46
    Creating accessible products isn't always easy. 3:52
    But developers who put in the extra effort to make sure their content is 3:56
    available to users with disabilities will always be in demand. 4:01

    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