The mystique behind the title and the meta tags, and why what’s inside our head really does matter!
I am initiating a series of posts that will document my work on a small project focused on web accessibility. The assignment, created by Ad Hoc, require that I adhere to the following guidelines:
✅ Goal: Achieve 100 in a Google Lighthouse accessibility scan.
✅ Scope: Modern browsers only, with no need for legacy support, UI or JS libraries, frameworks, or mixin libraries.
✅ Specifications: The form doesn’t need to submit; no animations or task runners are required.
For a detailed overview and access to the starter files, visit the Accessibility Engineer Assignment on Ad Hoc’s official website.
Introduction: Accessibility Project Breakdown
My posts will delve in detail into each part of the HTML document. I will discuss the accessibility features I implemented, their benefits, and their impact on users, particularly those using screen readers or with low vision. Additionally, I’ll share insights into my CSS and JavaScript selections.
The assignment is a one-page project created with HTML, CSS, and JavaScript. The HTML component is divided into three main parts: navbar, header, and a main component with a form.
To help you follow along this post series, please visit my version of the completed project and the GitHub repo.
HTML Choices: Laying the Foundation
In this post, the spotlight is on the head element.
Part 1: The Head Component
Though I did not create the head component for this project - it was provided in the original files - two elements in this section are particularly crucial for accessibility: the title and the meta tags.
<head>
<title>Accessibility Engineer Homework</title>
. . .
<meta name="viewport"
content="width=device-width, initial-scale=1.0"/>
. . .
</head>
Do not forget the title and the meta tags!
Head Component: The title Tag
✅ A11y Importance: It provides the title (what else?!) of the webpage, which is the first piece of information announced by screen readers. It helps users to understand the content of the page and decide whether they want to stay or not.
Sighted users also rely on the title element to quickly identify the purpose of a page. The content of the title is displayed in the browser tab or the window title bar and helps them easily identify and switch between open pages/tabs.
👍 Best Practice: Make it descriptive and concise, and try to differentiate it from page to page (in case you have a multipage site) to help users identify the page they are on!
<title>Accessibility Engineer Homework</title>
⚠️ A Key Distinction: Don't mix up the title element with page headings! The title is nestled within the head section of your HTML document, evident in the browser tab. On the other hand, the visible "title" or page heading (often referred to by web developers) is typically displayed prominently on your page, wrapped in an h1 element. The h1 element will be nestled within the body component of your html file.
We'll look at h1 and other headings in the next post!
Head Component: The Viewport meta Tag
What you include and what you omit from this tag are equally important!
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
✅ A11y Importance: This tag determines the starting zoom level, ensuring content appears user-friendly right from the start. It also allows users to zoom in and out on content. This is invaluable for individuals with low vision who rely on enlarged text and images for comfortable viewing.
👍 Best practice: AVOID using the user-scalable=no parameter within this tag! This restriction impedes users' ability to scale the viewport, and it will affect those with visual impairments. Remember: these users need to zoom in or out to view content and interact with the web page comfortably.
Coming Up
Stay tuned for upcoming posts that will delve further into the navbar, header and main components. Later, we will move on to CSS and JavaScript and their role in making the page accessible.
Resources
Microsoft Accessibility Resources
Microsoft has a strong commitment to accessibility and has been actively working on making its products and services more accessible. Their site is a treasure trove of resources and training materials to get you started.
This is a great place to go from zero to hero in accessibility! Go through each topic to find code samples and links to articles and additional resources. The tone is uncomplicated yet technical, and very conducive to learning.
Jon Kuperman's Website Accessibility course on Frontend Masters
This course is not available for free. However, those with a Frontend Masters account, or those willing to sign up, even for a month, will find it incredibly valuable. Jon delves deep into code specifics while also offering a bird's eye view of accessibility requirements.
W3C Before and After Demonstration of an Inaccessible Website
This demonstration contrasts an inaccessible website with a retrofitted, accessible version of the same site. Each page features activated inline annotations, identifying and highlighting significant accessibility barriers or the corresponding repairs made.
Post originally published on September 6, 2023 on corinamurg.dev
Credit: Photo by Robert Ruggiero on Unsplash
Top comments (0)