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">×</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">×</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!!!
Share Improve this question edited Mar 20, 2022 at 17:59 slugolicious 17.7k2 gold badges33 silver badges45 bronze badges asked Mar 20, 2022 at 6:20 Kavishka RajapaksheKavishka Rajapakshe 6512 gold badges14 silver badges30 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
innerTextwhen 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
2 Answers
Reset to default 5The 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.