Headings with heading semantics

[tseykovets]

Headings in the interface are only visual headings, but are not described semantically. This is an accessibility issue and creates inconvenience for users of assistive technologies such as screen readers.

It would be nice if the headings in the interface have the role of a heading.

The issue is relevant for the following elements:

• Headings "Theme", "Auto Refresh", "Show first" and "Subscriptions" in the settings. They are laid out as an element, which has the role of banner and is intended for marking pages headers.

It is best to use basic heading tags:

<h2>Theme</h2>

As a last resort, if there is no desire or opportunity to change the layout and adapt styles for new elements, then you can use the role and aria-level attributes:

<header class="dropdown-header" role="heading" aria-level="2">Theme</header>

The option with the basic tag is preferable from an engineering point of view.

For more details see:

• role:
  • https://www.w3.org/TR/role-attribute/
  • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
• aria-level:
  • https://www.w3.org/TR/wai-aria-1.2/#aria-level
  • https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level