New Components
Required elements
Essential elements for valid HTML Structure and Accessible Content
Doctype
Why
Doctype declaration instructs the web browser about the version of HTML used in the document. This ensures that the browser renders the page in standards mode, which leads to more consistent and predictable rendering across different browsers.
A valid doctype is crucial for accessibility because assistive technologies rely on the correct interpretation of HTML to convey information to users accurately.
N.B: When an XHTML doctype is declared, it is important to note that this type of doctype follows a more strict and precise syntax, based on XML. Therefore, some HTML5-specific tags such as <header>, <main>, <nav>, <footer> and <aside> are not used in the XHTML code.
<!DOCTYPE html>Where
The doctype declaration should be the very first line of the HTML document, before the opening <html> tag.
Screen Reader Behavior
Screen readers do not typically announce the doctype. However, a correct doctype indirectly impacts screen reader behavior by ensuring the proper rendering of the HTML, which affects how the screen reader interprets and presents the content.
Language (lang attribute)
Why
The lang attribute within the <html> tag specifies the primary language of the content on the page. This information is vital for assistive technologies like screen readers to process and present the content correctly.
Where
The lang attribute is included in the opening <html> tag.
For example, for an English language page:
<html lang="en">Screen Reader Behavior
- Screen readers use the lang attribute to select the appropriate voice for speech synthesis.
- They apply language-specific pronunciation and grammar rules.
- They utilize the correct dictionaries and language-related features.
- Without the
langattribute, a screen reader may mispronounce words or apply incorrect grammar rules, hindering comprehension.
Source Code (HTML structure)
Why
The HTML structure provides the semantic foundation for web content. Assistive technologies rely heavily on this structure to understand the relationships between different elements on the page.
Where
The HTML structure encompasses the entire document, from the opening <html> tag to the closing </html> tag. It includes the proper use of headings, lists, paragraphs, tables, and other semantic elements.
Screen Reader Behavior
- Screen readers navigate through headings, lists, tables, and landmarks to provide users with an overview of the page structure.
- They announce elements based on their semantic roles (e.g., "heading level 1," "list with 3 items").
- A well-structured HTML document allows screen reader users to navigate efficiently and understand the content's hierarchy.
- Errors in the HTML code can disrupt the reading order or make content inaccessible.
Page Title (title tag)
Why
The page title provides a concise and accurate description of the site and page content. It's the first piece of information that users encounter, and it's crucial for both search engine optimization (SEO) and accessibility.
Where
The title is placed within the <head> section of the HTML document, enclosed in the <title> tag.
Screen Reader Behavior
- Screen readers typically announce the page title as soon as the page loads.
- It sets the context for the content and helps users understand what the page is about.
- A clear and descriptive title is essential for screen reader users to orient themselves and decide if the page is relevant to their needs, and to quickly understand the topic being addressed. By choosing an appropriate title, you facilitate navigation and page identification in search results.
- For an optimal title, it's recommended to combine two elements: the site name and the page name, thus providing clear identification and a better understanding of the content offered.
<title>Website Name | Page Name</title>