Three detached keyboard keys forming the text "web", with a Punos Mobile logo underneath. This symbolizes Web Accessibility.

Development Guide to Web Accessibility Part #1: HTML Structure

Every accessible website has tons of HTML elements invisible to the user, beneath its surface. Doctype, lang, and title are among the top three regarding web accessibility.

1. 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

In Practice

As a rule of thumb, always add <!DOCTYPE html> in the beginning of your HTML document.

2. The Lang Attribute

What’s It About?

In an <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>:

<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 lang attribute to zh-Hans, for instance, tells the browser to use the simplified Chinese font.

In Practice

Always define the lang attribute within your <html> and its child elements that use a different language from it.

3. The <Title> Element

What’s It About?

Browsers pay attention to <head>’s <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.

The <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.

In Practice

Never omit <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”.

Closing Words

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.