javascript - Headings must have content and the content must be accessible by a screen reader - Stack Overflow

admin管理员组

文章数量:1401281

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-ponent></nav-bar-ponent>
    {/* <!-- 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 mand 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!!!

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-ponent></nav-bar-ponent>
    {/* <!-- 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 mand 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!!!

• javascript
• html
• reactjs
• api
• accessibility

Share Improve this question Follow edited Mar 20, 2022 at 17:59 slugolicious 17.7k22 gold badges3333 silver badges4545 bronze badges asked Mar 20, 2022 at 6:20 Kavishka RajapaksheKavishka Rajapakshe 65122 gold badges1414 silver badges3030 bronze badges 1

• If you have to load data first, better to show some sort of loading indicator and then reveal all the content at once, rather than having empty tags. That should avoid this issue. By the way, I'm not clear why you're directly using DOM APIs like innerText when using React, you should handle this using React state - which also will make it much easier to conditionally render whole sections of content. – Robin Zigmond Commented Mar 20, 2022 at 10:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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"

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 piler 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.

本文标签： javascriptHeadings must have content and the content must be accessible by a screen readerStack Overflow