'Headings must have content and the content must be accessible by a screen reader

I've created a react web application which has an HTML body content inside home.js as below,

class Home extends React.Component {
render() {
return (
  <div>
    <nav-bar-component></nav-bar-component>
    {/* <!-- Trigger/Open The Modal --> */}

    {/* <!-- banner --> */}
    <header id="banner">
      <div id="banner_contents">
        <h1 id="banner_title"></h1>
        <div id="banner_buttons">
          <div id="banner_button_play">Play</div>
          <div id="banner_button">My List</div>
        </div>
        <p id="banner_description"></p>
      </div>
      <div id="banner_fadeBottom"></div>
    </header>

    {/* <!-- trending now row --> */}
    <div id="trending_head_row">
      <div class="trending_row">
        <h2 class="trending_row_title"></h2>
        {/* <!-- <h1 class="trending_number"></h1> --> */}
        <div class="trending_row_posters"></div>
      </div>
    </div>

    {/* <!-- rows --> */}
    <div id="headrow">
      <div class="row">
        <h2 class="row_title"></h2>
        <div class="row_posters"></div>
      </div>
    </div>

    <div id="myModal" class="modal">
      {/* <!-- Modal content --> */}
      <div class="modal-content">
        <span class="close">&times;</span>
        <header id="movie_cover"></header>
        <div id="modal_fadeBottom"></div>
        <h1 id="selected_banner_title"></h1>
        <p id="selected_banner_description"></p>
        <div id="info_box">
          <p id="movie_cast"></p>
          <br />
          <p id="movie_genre"></p>
        </div>

        <h1>Trailer</h1>
        {/* <!-- <div id="trailer_box"></div> --> */}
        <iframe title="trailer_video" id="trailer"></iframe>
      </div>
    </div>
  </div>
);

} }

The <h1> and the other heading tags are empty because I'm getting data from an API and by using the innerText function I'm assigning values for them in another js file (function.js). When I try to build my app using npm run build command I get these errors

Line 13:13:  Headings must have content and the content must be accessible by a 
screen reader  jsx-a11y/heading-has-content
Line 26:13:  Headings must have content and the content must be accessible by a 
screen reader  jsx-a11y/heading-has-content
Line 35:13:  Headings must have content and the content must be accessible by a 
screen reader  jsx-a11y/heading-has-content
Line 46:13:  Headings must have content and the content must be accessible by a 
screen reader  jsx-a11y/heading-has-content

Please help me!!!

javascripthtmlreactjsapiaccessibility


Solution 1:[1]

The h1 to h6 tags are used to define HTML headings, you should check where you have Tags with empty content.

" Headings must have content and the content must be accessible by a screen reader"

Solution 2:[2]

Sounds like you have accessibility checking turned on when you're building (perhaps via a linting plugin). That's a great feature but the results have to be manually verified to make sure they're real problems. In this case, it sounds like it's warning you because you have empty headings. If a developer accidentally removed the text for a heading and forgot to delete the heading, that would be a good thing to fix. But if the heading is empty because it'll be filled in later when the page loads, that's ok. You have a valid use case for empty headings and the compiler warning (error?) can be ignored.

The accessibility checking probably has options that you can turn on/off. For example, you might be able to specifically turn off the heading check. I probably would not do that in general because it might catch valid cases but for this specific file, it might be ok.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 slugolicious

Related Questions