Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 5&6

[BaPt]

Hi ! I am new user, learning HTML & CSS, and I wonder the reason for these lines ( Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 5&6) :

   /* <div id="years" aria-hidden="true">
      <span class="year">2019</span>
      <span class="year">2020</span>
      <span class="year">2021</span>
    </div>*/

These are written just before the table tag (with 2019, 2020, 2021 being headers) but hiddened for readers. I bet it concerns script readers, but I really don’t understand how they could use these lines.
Can someone explain the purpose of these lines?

[hbar1st]

Please post a link to the step you are in.

[BaPt]

This is the step I am in,

while this is the final step of the project (lines 18 to 22).

[teiResa]

@BaPt

<div id="years" aria-hidden="true">
      <span class="year">2019</span>
      <span class="year">2020</span>
      <span class="year">2021</span>
    </div>

Step 6 - These years will go at the top of columns to make the table more readable. They’re on the large black horizontal rule hr on step 65.

If it has the class of sr-only, then it will only read out from a screen reader. It is for accessibility.

[BaPt]

Thanks for the answer!

I realize I got confused (too easily…) between sr-only and aria-hidden.

aria-hidden is the opposite of sr-only, allowing to hide unstructured/unintelligible content from script readers, isn’t it?

[teiResa]

Yes.
Sr.only hides it from us reading it with our eyes (and maybe braille), while aria-hidden hides it from those listening.

aria-hidden - Accessibility | MDN (mozilla.org)