What does this accessibility issue mean?
Accessibility issue summary: Missing or inaccessible <title> tags
HTML title tags are used by screen readers to provide a brief summary of the content of a page, making it easier for users to understand the purpose of that page.
If there is no title tag present on a page, the screen reader may provide a generic or incomplete description of the page, making it difficult for users to identify and distinguish between multiple open tabs or pages.
Solution:
Ensure each HTML document contains a non-empty title element.
Example HTML violation: Missing or inaccessible title tags (WCAG Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An eCommerce website selling the best products.">
<!-- Missing <title> here -->
</head>
<body>
<!-- Some HTML content goes here -->
</body>
</html>Explanation: The above code violates the rule because the <title> element is missing in the <head> section.
According to the Web Content Accessibility Guidelines (WCAG), with 'Missing or inaccessible <title>' rule (rule-id: 'document-title'), each HTML document must have a <title> element in the head section to provide a concise description of the document’s content or purpose. This is important for the accessibility as it helps users in understanding the content and purpose of the webpage, and assists in navigation and orientation.
Now let's correct that:
How to fix "Missing or inaccessible title tags (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An eCommerce website selling the best products.">
<title>Best Products - eCommerce Website</title>
<!-- The issue has been resolved here -->
</head>
<body>
<!-- Some HTML content goes here -->
</body>
</html>Explanation: The corrected code now includes a <title> element in the <head> section. This makes the webpage compliant with the rule, thus solving the issue.
