"Applied Accessibility - Make Elements Only Visible to a Screen Reader by Using Custom CSS" has invalid HTML in its instructions

[ZebulanStanphill]

https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css

The instructions of this lesson include invalid HTML: there are <hr>, <li>, and <ul> tags nested in <p> tags. Paragraph elements only allow phrasing content to be nested in them, but <hr>, <li>, and <ul> tags are all flow content.

<div class="challenge-instructions col-xs-12">
    <p class="wrappable">Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect.</p>
    <p class="wrappable">However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.</p>
    <p class="wrappable">Here's an example of the CSS rules that accomplish this:</p>
    <div>
        <blockquote>.sr-only {<br> position: absolute;<br> left: -10000px;<br> width: 1px;<br> height: 1px;<br> top: auto;<br> overflow: hidden;<br>}</blockquote>
    </div>
    <p class="wrappable"><strong>Note</strong><br>The following CSS approaches will NOT do the same thing:</p>
    <p class="wrappable">
        <ul></ul>
    </p>
    <p class="wrappable">
        <li><code>display: none;</code> or <code>visibility: hidden;</code> hides content for everyone, including screen reader users</li>
    </p>
    <p class="wrappable">
        <li>Zero values for pixel sizes, such as <code>width: 0px; height: 0px;</code> removes that element from the flow of your document, meaning screen readers will ignore it</li>
    </p>
    <p class="wrappable"></p>
    <p class="wrappable">
        <hr>
    </p>
    <p class="wrappable">Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an <code>sr-only</code> class, but the CSS rules aren't filled in yet. Give the <code>position</code> an absolute value, the <code>left</code> a -10000px value, and the <code>width</code> and <code>height</code> both 1px values.</p>
</div>

Also notable is that the <blockquote> element contains code which should be wrapped in a <code> element for semantic purposes.

HTML 5.2 specifications and HTML 5.3 drafts for reference:

• https://www.w3.org/TR/html52/grouping-content.html#the-hr-element
• https://www.w3.org/TR/html53/grouping-content.html#the-hr-element
• https://www.w3.org/TR/html52/grouping-content.html#the-li-element
• https://www.w3.org/TR/html53/grouping-content.html#the-li-element
• https://www.w3.org/TR/html52/grouping-content.html#the-p-element
• https://www.w3.org/TR/html53/grouping-content.html#the-p-element
• https://www.w3.org/TR/html52/grouping-content.html#the-ul-element
• https://www.w3.org/TR/html53/grouping-content.html#the-ul-element

[Bouncey]

Issue moved to freeCodeCamp/curriculum #15 via ZenHub