Along with structure, there are many supporting HTML elements to consider when building and designing for digital accessibility. Throughout the Learn Accessibility course, we cover a lot of elements.
This module focuses on very specific elements that don't quite fit into any of the other modules but are useful to understand.
Page title
The HTML <title>
element defines the content of the page or screen a user is about to
experience. It's found in the
<head> section of
an HTML document and is equivalent to the <h1> or main topic of the page. The
title content is displayed in the browser tab and helps users understand which
page they are visiting, but it is not displayed on the website or app itself.
In a single-page app (SPA),
the <title> is handled in a slightly different way, as users don't navigate
between pages as they do on multi-page websites. For SPAs, the value of the
document.title
property can be added manually or by a helper package, depending on the
JavaScript framework. Announcing the
updated page titles
to a screen reader user may take some additional work.
Descriptive page titles are good for both users and search engine optimization (SEO)—but don't go overboard and add lots of keywords. Since the title is the first thing announced when an AT user visits a page, it must be accurate, unique, and descriptive, but also concise.
When writing page titles, it is also best practice to "front load" the interior page or important content first, then add any preceding pages or information after. This way, AT users don't have to sit through the information they have already heard.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
Language
Page language
The page language attribute (lang) sets the default language for the entire page. This attribute is added to the <html> tag. A valid language attribute should be added to every page as it signals the AT to which language it should use.
It's recommended that you use two-character ISO language codes for greater AT coverage, as many of them do not support extended language codes.
When a language attribute is completely missing, the AT will default to the user's programmed language. For example, if an AT was set to Spanish, but a user visited an English website or app, the AT would try to read the English text with Spanish accents and cadence. This combination results in an unusable digital product and a frustrated user.
<html>...</html>
<html lang="en">...</html>
The lang attribute can only have one language associated with it. This means
the <html> attribute can only have one language, even if there are multiple
languages on the page. Set lang to the primary language of the page.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
Section language
You can also use the language attribute (lang) for language switches in the content itself. The same basic rules apply as the full-page language attribute, except you add it to the appropriate in-page element instead of on the <html> tag.
Remember that the language you add to the <html> element cascades down to all
the contained elements, so always set the primary language of the page
top-level lang attribute first.
For any in-page elements written in a different language, add that lang
attribute to the appropriate wrapper element. This will override the
top-level language setting until that element is closed.
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
"Kas sa räägid inglise keelt?" when I met someone new.</p>
</div>
</body>
</html><html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
<span lang="et">"Kas sa räägid inglise keelt?"</span>
when I met someone new.</p>
</div>
</body>
</html>iFrames
The iFrame element
(<iframe>) is
used to host another HTML page or a third party's content within the page. It
essentially puts another webpage within the parent page. iFrames are commonly
used for advertisements, embedded videos, web analytics, and interactive
content.
To make your <iframe> accessible, there are a couple of aspects to consider. First, each <iframe> with distinct content should include a title element inside the parent tag. This title supplies AT users with more information about the content inside the <iframe>.
Second, as a best practice, it is good to set the scrolling to "auto" or "yes" in the <iframe> tag settings. This allows people with low vision to be able to scroll into content within the <iframe> that they might not otherwise be able to see. Ideally, the <iframe> container would also be flexible in its height and width.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>
Check your understanding
Test your knowledge of document accessibility.
Your site is a multi-language online textbook, where multiple languages are shown on one page. What's the best way to tell assistive technology the language of the copy?
<html> element. For example <html lang="en,lt,pl,pt">lang attribute can only have one language associated with it.lang for the <html>, and additional languages on any element which has content in a different language.<html> language attribute to read the document. If you have multi-language text, make sure to add a lang attribute to the corresponding element (such as a section or paragraph) with the correct two letter ISO code.