Step 4 css pseudo

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Can someone explain to me this: 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.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Balance Sheet</title>
  <link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
  <main>
    <section>
      <h1>
        <span>
        </span>
      </h1>
    </section>
  </main>
</body>
</html>

/* file: styles.css */


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Step 4

Link to the challenge:

2

you should read instructions carefully, you are asked to give class flex to existing span tag and add two more span tags within it and each should have appropriate text

3

I just do not understand what they mean when they say :this order does not make sense if announced by a screen reader. I mean, why can’t we put balance sheet first and AcmeWidgetCorp second(how does this order effect the screen reader)

4

What I understand from the instructions that screen readers will not announce the order in which you define Balance sheet first that’s why you have to define AcmeWidgetCorp first this will render Balance sheet first on screen readers. And for the page, you have to reverse the order using css

1 Like
5

Thank you so muchPreformatted text

6

You are welcome, :smiley:, it makes me happy that I was helpful to you

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.