Additional HTML elements to consider when building accessible websites and web apps.
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 #
<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
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.
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.
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.
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
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. Then for any in-page elements written in a different language, add that lang attribute to the appropriate wrapper element. Doing this will override the top-level language setting until that element is closed.
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
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.
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?Don't worry about it, the AT can automatically read each language. Include all languages in the
langon each element.
While some AT may have language detection skills, you can't guarantee the AT will guess correctly.
lang attribute can only have one language associated with it.
The AT will primarily rely on the
<html> attribute to read the document, unless an element is explicitly labeled with a different
lang. For multi-language text, make sure to add a
lang attribute around the language which differs from the main HTML document.