Learn Accessibility by Building a Quiz - Step 25 - `hidden` attribute

Why is it advantageous or a better practice to create a lengthy CSS ruleset to hide text, when it could be quickly done by specifying the hidden attribute within the span element of the html file, like this:

<label for="birth-date">D.O.B.<span class="sr-only" hidden>(Date of Birth)</span></label>

Hello @C1t1z3nWh1t3

The hidden attribute removes the element entirely from being rendered. So, it will not be “visible” to screen readers either, which is the whole point of the sr-only class.

Hope this clarifies

Thank you @Sky020, your explanation is clear and logical. I will use the CSS ruleset as shown in the lesson.

I also want to thank you for replying to my question as a staff member. I am subscribed to a paid learning platform as well, where I do not receive such a privilege, astonishingly. I have now made a cash donation to this platform.

I also want you to know that I appreciate your professionalism and dedication.

Best Regards,
D.A. White

@C1t1z3nWh1t3 For the most part, freeCodeCamp is made by volunteers. As such, if you have a question/suggestion/bug-report, you can do so in:
a) This forum, in the #contributors sub-forum
b) The freeCodeCamp/freeCodeCamp GitHub repository

Specifically, you can open an issue on the repository, or you can open a pull request to fix an issue yourself. Here is our contributor’s guide.

For this lesson, here is the file which contains the tests:

So, I am not sure what you mean by:

This lesson requires the addition of a new CSS Rule Set, and does not require any changes to the HTML.

As this thread is about a separate question, I have gone ahead and moved it to its own topic, where we can continue to discuss as desired.

I hope this helps


Please disregard my request to forward a possible issue to the Q.A. team, I was incorrect. Thank you for the further information for questions/suggestion/bug reporting.

Have a pleasant day :slightly_smiling_face: