FrançaisGet started

Testing conformance to W3C standards

The W3C HTML and CSS validators and how to read their messages, automatic accessibility audit tools (axe, WAVE, Lighthouse) and what they cannot see.

  • 22 cards
  • 3 topics
  • Free
Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

  1. Concepts
  2. Questions
  3. Sort and link

A few cards from the deck

  • W3C HTML validator: what is it?

    Show the answer

    An online tool which reads a document and flags each place where the markup departs from the rules of the HTML specification.

    Its engine is called the Nu Html Checker. It checks the grammar of the markup: badly closed tags, misplaced elements, missing attributes. It says nothing about how the page is actually used.

  • The validator answers: "Element “li” not allowed as child of element “div” in this context." Which fix?

    ```html
    <div>
    <li>Accueil</li>
    <li>Contact</li>
    </div>
    `

    • Replace the div with a ul
    • Replace the div with a nav
    • Add role="list" to the div
    • Add a unique id to each li
    Show the answer

    Replace the div with a ul

    An li only makes sense inside a list: ul, ol or menu. The message says exactly that: the parent div is not allowed. A nav is not a list (a ul goes inside it), an ARIA role does not make the markup valid and an id is unrelated.

  • The W3C's Nu Html Checker validates the … of the HTML markup, but not the actual … of the page.

    Show the answer

    The W3C's Nu Html Checker validates the grammar of the HTML markup, but not the actual accessibility of the page.

    A page can be valid and unusable by keyboard, or accessible with a few markup errors: the two checks are complementary.

  • W3C CSS validator: what is it?

    Show the answer

    A tool that reads a style sheet and reports unknown properties, invalid values and syntax errors.

    The browser silently drops an invalid declaration: the validator is one of the few ways to learn that a rule was thrown away.

  • The validator reports "No “p” element in scope but a “p” end tag seen." on the last line. What is the cause?

    ```html
    <p>Bonjour
    <div>monde</div>
    </p>
    `

    • A </div> is missing right before the final </p> on the last line
    • The div already closed the p, </p> is surplus
    • The p is opened twice, once before and once after the div
    • The text "Bonjour" must sit in a tag, not bare inside the p
    Show the answer

    The div already closed the p, </p> is surplus

    A p may only hold phrasing content: when the div opens, the browser closes the p by itself. The final </p> then closes nothing, since no p is open. Rewrite with a div around both, or a span in place of the div.

Study this deck