Element inappropriately uses semantic markup

Link to Element inappropriately uses semantic markup copied to clipboard

semantic-markup-used-for-presentation

Rule

Semantic HTML elements MUST be used according to their semantic meaning, not to create a visual effect.

Background

People who are blind rely on their screen readers to correctly convey the purpose of a web element - such as a table, list, heading, blockquote, etc. When HTML elements and attributes are used incorrectly, for example to simply create a visual effect such as creating big bold text or indented text, a screen reader will incorrectly convey the purpose of the content. HTML elements must only be used according to their semantic meaning, not because of the way they appear visually. When HTML elements used correctly, screen reader users are able to correctly understand the purpose of a web element.

How to Fix

Fix this issue by removing incorrect semantic markup which is used for visual styling - such as an <h2> element to make text bold or a <blockquote> element to indent text - and use CSS to create the desired visual effect instead.