Empty h2 headers causing accessibility issues

  • Resolved George

    (@subscriptiongroup)


    2 years, 2 months ago

    We notice that WAVE (https://wave.webaim.org/) is identifying some accessibility issues with this plugin.

    More specifically, it’s complaining about an <h2> element without any content.

    Empty heading
What It Means
A heading contains no content.
Why It Matters
Some users, especially keyboard and screen reader users, often navigate by heading elements. An empty heading will present no information and may introduce confusion.
What To Do
Ensure that all headings contain informative content.
The Algorithm... in English
A heading element is present that contains no text (or only spaces) and no images with alternative text.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter George

    (@subscriptiongroup)

    You can easily resolve this as following.

    on wp-content\plugins\modal-block\src\block\block.js Line 362

    original
    <h2 style={bodFormatStyles ({'color': attributes.titleColor, 'fontSize': attributes.titleSize})}>{attributes.title}</h2>

    Updated
    {attributes.title ? (<h2 style={bodFormatStyles ({'color': attributes.titleColor, 'fontSize': attributes.titleSize})}>{attributes.title}</h2>) : null }`

    Plugin Author merbmerb

    (@merbmerb)

    Thanks for the catch, I have made the change and it will be part of the next release.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Empty h2 headers causing accessibility issues’ is closed to new replies.