visually hidden layout & text in div choice

Hey, i was recently looking at something Andy bell did in a site example and i've got a few questions, i'd appreciate any help with understanding this 👍

  • In the code below he uses an h1 for the page title but visually hides it, then has another section with the same title which is the one he styles and adds color to etc. Why do people opt to do this sort of thing/layout?
  • What is the benefit of putting text between div tags? Is it something people do when working with visually hidden elements or a different thing perhaps?
    ```html
    <h1 class="visually-hidden">HTML, CSS and a sprinkling of Javascript.</h1>
<div aria-hidden="true">
<div class="headerdisplay-text">HTML, CSS</div>
<div>and a sprinkling of</div>
<div class="header
display-text">Javascript</div>
</div>
```
Was this page helpful?