search

umbraco / Umbraco-CMS.Accessibility.Issues

6 stars 1 forks source link

Section text - Text that looks like a heading must be coded as a heading #44

Closed umbrabot closed 1 year ago

umbrabot commented 2 years ago

Steps to replicate:

  1. Access the Content section
  2. When adding content in the main panel, all the section text (content, footer etc.) is bold
  3. Bold text coded as paragraph text

Issue: No missing headings: Text that looks like a heading must be coded as a heading

Section text Content, Footer etc.

Why it matters: People with good vision can quickly scan a page to identify headings based solely on their appearance, such as large or bold font, preceding white space, or indentation. Users of assistive technologies can't find headings that aren't properly coded.

How to fix: Re-implement using a heading tag. (You could add role="heading" to a different element, but the first rule of ARIA is to use native HTML elements where possible, instead of repurposing an element by adding ARIA.)

W3 reference: https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html

tiffy74 commented 2 years ago

Happy to look at this one

tiffy74 commented 2 years ago

so this exposes a wider issue with how headings have been nested within the backoffice.

It's simple enough to fix technically - but it's hard to be consistent and thorough.

Example - If you open the back office and tab past the navigation - the first heading you reach is a H5 'Content' - which when activated opens up a contextual modal which contains an H1.. yes an H1

I'm guessing each section will be the same.

If I were to guess I would say that the headings have been chosen because of their visual size as opposed to their semantic value as a heading

So instead I now need to look at the whole heading structure

tiffy74 commented 2 years ago

So I think this refers to the group-panel elements within the editor view. Therefore I have submitted a PR that fixes this issue by:

Adding a H2 tag to the section header. H2 because H1 is used within the left column (presuming that the PR I submitted for #42 is accepted)

I have attached additional styling to the section header to match it's previous style.

Please take a look at the PR and give comments :)

Fixed Group Headings in Content