Content lacks semantic markup

[karlgroves]

Content lacks semantic markup

• Severity: Low
• Affected Populations:
  • Blind
  • Low-Vision
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Structure and Navigation

Issue description

The Content Structure panel includes a summary of the content by type,
and some text that's styled and positioned like a heading ("Document
Outline"), however this content does not use appropriate semantic
markup.

Semantic markup is vital for assistive technology users, to convey the
structure and relationships between information. When appropriate
semantic markup is not used, it may be more difficult for such users to
understand what the content means, and to comprehend the structure that
the visual presentation conveys.

Issue Code

    <div class="table-of-contents__counts" role="note" aria-label="Document Statistics" tabindex="0">


        <div class="table-of-contents__count">Words<span class="word-count">901</span></div>


        <div class="table-of-contents__count">Headings<span class="table-of-contents__number">7</span></div>


        <div class="table-of-contents__count">Paragraphs<span class="table-of-contents__number">27</span></div>


        <div class="table-of-contents__count">Blocks<span class="table-of-contents__number">68</span></div>


    </div>





    <span class="table-of-contents__title">Document Outline</span>

Remediation Guidance

Use a structure such as <ul> or <dl> to semantically
associate the content type information.

Elements which are styled and positioned like headings should be
marked-up as headings. The Recommended Code uses an <h2> on the
assumption that the open panel should be treated as standalone context
within the page (i.e. at a level beneath the page's <h1>).

Recommended Code

    <div class="table-of-contents__counts" role="note" aria-label="Document Statistics" tabindex="0">


        <dl>


            <div class="table-of-contents__count">


                <dt>Words</dt>


                <dd class="word-count">901</dd>


            </div>


            <div class="table-of-contents__count">


                <dt>Headings</dt>


                <dd class="table-of-contents__number">7</dd>


            </div>


            <div class="table-of-contents__count">


                <dt>Paragraphs</dt>


                <dd class="table-of-contents__number">27</dd>


            </div>


            <div class="table-of-contents__count">


                <dt>Blocks</dt>


                <dd class="table-of-contents__number">68</dd>


            </div>


        </dl>


    </div>





    <h2 class="table-of-contents__title">Document Outline</h2>

Relevant standards

• 1.3.1 Info and Relationships
  (Level A)
• 2.4.6 Headings and Labels (Level
  AA)
• 4.1.2 Name, Role, Value
  (Level A)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-25 in Tenon's report

[melchoyce]

Full report screenshot:

[afercia]

Not fully sure a <dl> element would help assistive technology users, given the actual support is inconsistent at best and misleading most of the times. Some testing from @aardrian https://codepen.io/aardrian/full/NzGaKP

Suggest: use a normal unordered list.