Tell us what’s happening:
Describe your issue in detail here.
**Your code so far**
<h1> <span class="flex"> <span> AcmeWidgetCorp </span> <span> Balance Sheet </span> </span> </h1>
Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of “Balance Sheet” and a subheading of “AcmeWidgetCorp”. However, this order does not make sense if announced by a screen reader.
Give your existing
class attribute set to
flex, and add two
span elements within it. Give the first the text
AcmeWidgetCorp. Give the second the text
Balance Sheet. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
Your first new
span element should have the text
Challenge: Step 4
Link to the challenge: