Semantic HTML

Using "Semantic" HTML is an important part of designing web pages. In short, if you have a paragraph, use the element for a heading use h1-to create lists, use list elements, etc., etc. If there is something defined in HTML, then you should use the appropriate element. This not only helps visitors using assistive technology but also improves your web page's SEO ranking–– site spiders or search engine bots have a better chance of understanding your page correctly if you use the correct HTML elements.

While Siteimprove doesn't do much to check for semantically correct HTML (there is no way to programmatically understand the difference between content that should be a <p> vs. a <h1>), there are a couple of policies we have in place that can help. Log in first to Siteimprove before exploring the policies' links.

Policy #1: A11Y: Incorrectly formed list

This policy flags any elements followed by a bullet (•) character or "1)" and a couple of other variations. For example, code like this may appear as a list but programmatically is not: 

<p>&bull;List point 1<br />&bull; List point 2</p>

The content should have an unordered or ordered list. Using a correct list element informs a screen reader user not only of the list but also of how many items are in the list and the user's position. Without the list, it will just become part of the text if it's read at all (not all bullets will be).

https://my2.siteimprove.com/Policy/PolicyDetails/Content?PolicyId=25891568362a

Policy #2: A11y: Non-semantic HTML markup

This is a quick policy to look for or elements. Both and have no semantic meaning. In contrast, <strong> and are visually the same as and, emphasizing parts of the text, but, unlike and carry meaning behind them. While that meaning is not read to the user by default, they can have that information presented to them. It is pretty common to use as the element when using icons (such as <i class="fa-solid fa-user"></i>), so this policy doesn't look for any or that has a class or other attribute.

The element for underlining has no semantic equivalent and generally should be avoided. Often when a user sees underlined text, they expect it to be a link. Underlining for emphasis can be especially confusing for those with cogitative or low-vision issues, and ultimately it cannot contain any meaningful information for the user. Use or instead to emphasize content.

https://my2.siteimprove.com/Policy/PolicyDetails/Content/1?policyId=25987877961

And before you ask... "what's the difference between <strong> and <em>?", there really isn't a great definition. The best one I could find is from the Mozilla site:

Adding to the confusion is the fact that while HTML 4 is defined <strong> as indicating a stronger emphasis, HTML 5 defines <strong> as representing "strong importance for its contents." This is an important distinction to make. While it is used to change the meaning of a sentence as spoken emphasis does ("I love carrots" vs. "I love carrots"), <strong> is used to give portions of a sentence added importance (e.g., "Warning! This is very dangerous.") Both and can be nested to increase the relative degree of importance or stress emphasis, respectively.

Policy #3: A11y: Strikethrough (Non-semantic HTML)

This policy looks for the Strikethrough element (<s> or <strike>) on your websites. It is important to note that the strikethrough is not read to screen readers at all. So the following example will confuse a screen reader user:

Price: $999 $599

In this case, the best solution might be to hide the old price or use an aria-label to explain that this is the original price instead of the sales price. This will look very different depending on how your site is coded. Note that it is used on a legal document where there is content struck out because it no longer applies, this will not be understood by the user. For deleted text, use the element instead, which does carry semantic meaning that "this content has been deleted" (there is also an element for, you guessed it, text that has been inserted).

https://my2.siteimprove.com/Policy/PolicyDetails/Content/1?policyId=29705500457

Bonus Policy: Lorem Ipsum

In the Siteimprove Library of policies, they had one for "Check if Lorem Ipsum" is on your site Lorem Ipsum is used as 'dummy' text when building your sites. While it's to be expected on some of the pre-production sites we are scanning, it has made its way to some of our production sites as well. Double-check this policy to see if any of your pages need to be fixed or removed.

https://my2.siteimprove.com/Policy/PolicyDetails/Content/1?policyId=29697018489