Development Guide to Web Accessibility Part #1: HTML Structure
1. What is accessibility?
Let’s get started with some definitions. Accessibility in our tangible world is the usability of an environment by as many people as possible. Taking the door handle as an example, a few decades ago, the spherical door knobs were used quite popularly. They save space and look cute, but they are a nightmare for those with limited arms and hands movement, regardless of in temporary or permanent condition. Therefore, they were replaced by the pivoting door handles, which provides ease of door opening, especially in emergency situations like in fire.
Whereby, web accessibility is how usable a website is by as many people as possible. Every accessible website has tons of HTML elements invisible to the user, beneath its surface, so that those users who do not rely on visibility could still comprehend the content of the site. Doctype,
<title> are among the top three regarding web accessibility.
2. The Doctype
What’s It About?
No matter how complex and dynamic your web application is, you need to remember that it’s core functionality is still to simply provide content in a browser window. This holds true for both static pages and one page applications – in the end, your page structure is a text document. This is why
<!DOCTYPE html> should be on the first row of your code.
Doctype and Web Accessibility
Leaving Doctype out can cause the entire web page to break for the users, as the browser does not know how to interpret its contents and might start using standards not fit for the site. This is often called “quirks mode”. The structure and functionality of the site can turn prone to errors and unpredictable.
“In quirks mode, layout emulates nonstandard behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In full standards mode, the behavior is (hopefully) the behavior described by the HTML and CSS specifications.”
– Quirks Mode and Standards Mode – Mozilla Web Docs
As a rule of thumb, always add
<!DOCTYPE html> in the beginning of your HTML document.
3. The Lang Attribute
What’s It About?
<html> element, the
lang attribute defines which language the page uses: for example English or Finnish. You can change the language the page uses by using the
lang attribute on child elements within the
<body>, such as in a
<blockquote lang=”en”> <p>English content goes here.</p> </blockquote>
lang Attribute and Web Accessibility
Defining the language of the site is important for both accessibility and search engine optimization. By doing this, you can:
- Make the site index better for search engines
- Make the site easier to translate for users, that use third-party translation tools, such as Google Translate API
- Help the user to check their spelling errors in the language of the page. For example, Firefox changes its dictionary in
<textarea>, highlighting any spelling errors.
- Help the page tell screen readers which synthetic voice profile to use
- Assist the browser in choosing and rendering system fonts with the correct characters. Setting the
langattribute to zh-Hans, for instance, tells the browser to use the simplified Chinese font.
Always define the lang attribute within your <html> and its child elements that use a different language from it.
What’s It About?
Browsers pay attention to
<title> element when naming a browser tab for the user. It’s also what search engines use when naming a link to your page in their search results.
<title> Element and Web Accessibility
Many assistive technologies name the elements of your web page based on the
<title>. To name some, document,
<iframe> and embedded SVG get their names straight from the
<title>. As the title of the page is shown in the beginning of the page load, it’s an excellent opportunity to summarize the purpose of your web page.
<title> from the source code of your web page. The usual practice is to describe both the page and its owner. For example, “Employees | Punos Mobile”. On search results pages, the title should contain the search term used: “Search results for ‘Punos Squad’ | Punos Mobile”.
As HTML pages can differ dramatically in both shape and size, they can include any combination of patterns and good practices. Yet this handful of document level ones should be a nice start for the series that we will expand on later.