Accompanying Files
Observation Details
These mis-matches happen with improper use of semantic HTML or lack thereof. Content, visually presented in a certain way, communicating certain purpose or functionality, uses mis-matched HTML elements.
This occurs in two "directions". Visually presented as X, using element Y, and using element X, while content is non-X content. The former includes:
Links, using HTML elements other than
<a href="">Buttons, using HTML elements other than
<button>Input elements, not using appropriate semantic HTML elements for e.g. selects or text inputs with
typeattributesHeadings, using HTML elements other than
<h1>-<h6>Lists, not using
<ul>,<ol>,<dl>...
The latter includes, using semantic HTML elements for content that does not fit the semantically conveyed role of that element, includes:
Lists for non-list content
Headings for non-heading content
...
Improper use of semantic HTML leads to numerous issues for many users, also affecting other success criteria at the same time, including those, ensuring keyboard navigation and accessible use of assistive technology.
Remediation Notes
Ensure proper use of semantic HTML.
Elements with needed or wanted functionality use the native HTML element, fitting said functionality
Links use
<a href="">Buttons use
<button>Lists use
<ul>,<ol>,<dl>; this includes all list content (e.g. navigations and lists of articles / cards)Headings use
<h1>,<h2>,<h3>,<h4>Emphasis of text content uses
<strong>and<em>instead of<b>and<i>...
Only content with that functionality uses said HTML elements.
No grouping for layout or styling is done, using semantic HTML elements; use
<div>and<span>onlyNo styling is done, using semantic HTML elements; this includes creating paragraphs with line break elements or spacings with empty paragraphs