2

Sometimes in my accessibility audits I will come across a <p> tag without any content inside it. The screen reader will read out "empty", wasting my time and any disabled person's time in browsing the website.

There is also reading of redundant elements like "separator" when I pass an <hr> tag.

I know these things lessen the accessible experience. But are they considered to break the WCAG standard? If so, then what criteria? Is that subject even given thought to in the standard?

Migdal Or
  • 25
  • 2
  • An empty `

    ` tag is read out? That is unusual, are you sure there isn't a hidden character? Headings, Links etc. should not be empty but a `

    ` tag could be empty. If it is unavoidable you can just add `aria-hidden="true"` to empty paragraphs, what screen reader are you using?

     – GrahamTheDev Jul 07 '21 at 08:20
  • @GrahamRitchie yes. It reads out "empty". I use NVDA in hebrew. – Migdal Or Jul 07 '21 at 13:30
  • Strictly speaking `
    ` carries some meaning (in HTML5 it is defined as a "thematic break"), and therefore if the tag was chosen appropriately in the first place, it should be announced. A 'meaningless' horizontal line should be made with CSS. Instead of `aria-hidden`, you can also use `role="none"`.     – brennanyoung Aug 09 '21 at 12:52

1 Answers1

2

Empty paragraphs, divs, spans, etc. are definitely annoying for users of assistive technology, and it's best-practice to remove them, but they are not a WCAG failure.

To the best of my knowledge, the only empty elements that may cause a WCAG failure are:

  • title - the title element must describe the purpose of the page (S.C. 2.4.2 Level A)
  • labels - a form label associated with an input field must not be empty (S.C. 3.3.2 Level AA)
  • heading - heading elements (h1-h6) are not required, however if a heading element is present, then it must contain text that is descriptive of the content (S.C. 2.4.6. Level AA)
  • table - if a table elements is used for tablular data, it must contain tr, td, and th items (S.C. 1.3.1. Level A).
  • table header - table header (th) elements are required for displaying tabular data. While there is no restriction on empty table cells (td), table headers may not be empty (S.C. 1.3.1. Level A)
  • lists - list elements (ul, ol, dl) must have list items as child elements. (S.C. 1.3.1. Level A)
  • links - anchor elements (a) must have a valid href value and programmatically-discernible text, as determined by the accessible name calculation algorithm (WCAG 4.1.2 Level A).

There are more things that will fail without required attributes, but that seems a little outside the scope of the question.

Josh
  • 3,872
  • 1
  • 12
  • 13