SFCG

Lesson 16: HTML Validation

Learn how to validate HTML using the W3C Markup Validation Service.

Background

Validating HTML may seem unnecessary or redundant, but it can actually save you a lot of manual testing and debugging time. Tools like the W3C Markup Validator are good at finding bugs you can't visually see like:

  • interactive elements nested inside of one another, such as placing a link inside of a button (it happens!)
  • elements placed as children where they're disallowed according to spec, such as a div as an immediate child of a ul
  • missing required attributes based on an element's role, especially if you're modifying an element's default semantics with ARIA

I've seen HTML validation catch a lot of errors that only take a few minutes to fix, but make a world of difference for people using assistive technology. You might be surprised by what you find!

5-minute action steps

  1. Go to https://validator.w3.org/nu in your browser
  2. Locate the "Check by" select input
  3. Select "address" from the select input
  4. In the URL input that follows, enter the page URL you want to check
  5. Hit the ENTER key or the "Check" button located after the URL input
  6. Wait for the checker to complete
  7. In the "Message Filtering" section of the page, show all errors, warnings, and info messages
  8. Make note of the messages given

Analyzing the results

Depending on how many messages the validator gave, you may need to plan some time to go through them. Make sure to prioritize errors first, then warnings, then info messages. Not every info or warning message will need action but it may take some time to confirm that.

If you're unsure of what a message means, you'll likely find your answer if you go to the link(s) provided in message text or copy and paste it into your preferred search engine.

Share your results

The end goal of this exercise is to resolve the issues you've found. Tracking them in your project management system is a huge step toward that goal. Sometimes we can't fix accessibility issues immediately, but we can always chip away at them over time.

Share the results you've noted today with the person or team responsible for fixing these kinds of issues. You might start the conversation with, "I'm learning about validating HTML, and these are some of my results."