Build a Quiz Webpage - Step 24

HTML-CSS
1

The instruction of Step 24 is

The question numbers are not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the element, is to add text only a screen reader can read.

Nest a span element with a class of sr-only after the number in each of the h3 elements.

There is a word after in the last sentence.

I explain that this word after means

<span class="sr-only"></span>

is to the right of the number 1.

1<span class="sr-only"></span>

So the full code would look like this

<div class="question-block">
  <h3>1<span class="sr-only">Question</span></h3>
  <fieldset class="question"></fieldset>
</div>

But according to Step 25

<div class="question-block">
  <h3><span class="sr-only">Question</span>1</h3>
  <fieldset class="question"></fieldset>
</div>

where

<span class="sr-only"></span>

is to the left of the number 1.

Could anyone shed light on these two steps?

2

Hi. Can you please post a link to the challenge you are stuck on.

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

3

I passed this step before.

But today I review this step and I find something ambiguous or unclear.

Screenshot (68)
Screenshot (68)1920×1200 217 KB

4

OK. Can you link to the step please.

5

@a1legalfreelance
You could try the step 24 by positioning the span element to the right or the left of the number 1.
Either is acceptable on FCC to the next step 25.
But the instruction says

Nest a span element with a class of sr-only after the number in each of the h3 elements.

It looks misguided.

6

please share the link to the step so we can investigate

7

Here is the link.

8

in the next step the seed code has the span be to the left of the element, so it looks like the instruction text of step 24 is wrong

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

1 Like
9

Thank you for remind me of gitHub Issues page.
I am new to FCC. I checked the Step 24 on this forum only before posting this.

10

And I agree with you that there is an issue, would you mind opening a github issue to report it on the bug tracker?

11

It is done.
For your reference

12

Thank you for helping making freeCodeCamp better!

1 Like