Kevin Powell - Community•2y ago

Help with accessibility: Possible heading

I'm using Pa11y and a Chrome extension called Wave Evaluation Tool to check for accessibility issues. I fixed all the errors for one of my portfolio projects but I have some 5 alerts that I don't know how to fix:

Possible heading Text appears to be a heading but is not a heading element.

I have 5 paragraph tags that I'm JS and the textContent property to output values after submitting a form. So I changed the paragraph to an h4 then accessibility checks changed from issues to errors for empty heading elements. Of course they are empty. So I switched back to paragraph tags but how to I fix the Possible heading issue? Should I add an aria-label attribute? How do you handle something like this? The portfolio page: https://everyguitarchord.com/what-chord-is-this.html

Guitar Chord Namer

Use this guitar chord namer by entering the fret #'s' for a guitar chord and get the chord name, notes, intervals, scales that build that chord and more.

4 Replies

WillsterJohnson•2y ago

Wave isn't perfect. By "possible heading" it means "not sure but it looks like this could be a heading. If it isn't don't worry, if it is, be sure to use a heading tag". If it is supposed to be a heading, I would recommend that instead of using <h4></h4> and populating it with textContent, you instead use <div></div>, and populate that instead like;

function populateFormSubsissionHeading(content) {
  const divTemplate = document./* select element here */;
  const header = document.createElement("h4"); // creates a virtual h4 elem
  header.textContent = content; // sets content of h4
  divTemplate.innerHTML = ""; // clear previous h4, if it exists
  divTemplate.appendChild(header); // place virtual h4 inside of div
}

function populateFormSubsissionHeading(content) {
  const divTemplate = document./* select element here */;
  const header = document.createElement("h4"); // creates a virtual h4 elem
  header.textContent = content; // sets content of h4
  divTemplate.innerHTML = ""; // clear previous h4, if it exists
  divTemplate.appendChild(header); // place virtual h4 inside of div
}

Of course, if it is not a heading then continue to use a paragraph and you can safely ignore that warning.

Kernix•2y ago

Ok, no it is just text and a paragraph should be fine. Any reccomendations for a better chrome extension?

WillsterJohnson•2y ago

none that I know of. I use Wave myself, it's just a case of getting used to what you can and can't ignore. Usually if it's red or orange, you need to fix it, otherwise it depends on what you want for your content

Kernix•2y ago

Got it, thanks!

Gaming

Programming

Help with accessibility: Possible heading