Setting up the overall HTML document is foundational to an inclusive interface. Make sure to include the following elements.

The Doctype

No matter how you slice it, we're putting content into a browser and if we don't declare the doctype, the browser doesn't know how to interpret our code and may switch to "quirks mode" which can cause our interface to behave in odd and unpredictable ways.

The first line of the document must be:

<!DOCTYPE html>

The lang attribute

We've just told the browser what kind of document we are serving, now we need to tell it what language the content is written in, e.g. English or Spanish.

This is important for the following reasons:

  • Helps with search engine indexing
  • Easier to translate with third-party tools like the Google Translate API
  • Helps users write in their language within elements such text inputs, for example Firefox switches dictionaries to highlight spelling errors appropriately
  • Search engines can switch their synthetic voice profiles to pronounce the content with the correct accent

Be sure to add lang to the opening html tag:

<html lang="en">

Responsive design

Responsive design plays a large role in inclusive design, it allows for interface elements and content to adapt to their environment. This really helps vision impaired users who zoom in to view content by not breaking the layout and forcing elements off screen.

Keep the following in mind when authoring CSS:

  • Don't rely on fixed widths or heights, allow elements to flex (this is how the web has always worked)
  • Use relative units em, rem instead of px
  • Only add breakpoints when something in the interface "breaks" depending on the available space

Allow pinch-to-zoom1

The viewport meta tag is essential to enable responsive design to happen. Be careful not to disable zooming on touch devices. Here's why:

  • The text may be too small for the user to read
  • The user may want to see more detail in an image
  • Selecting words to copy/paste may be easier for users when the text is larger
  • The user wants to crop animated elements out of the view to reduce distraction
  • The developer did a poor job of responsive design, and the user needs to zoom just to use the page (this happens!)
  • There is a browser bug or quirk (still a bug) that causes the default zoom level to be odd
  • It can be confounding for users when a pinch/spread gesture is interpreted as something else
1

DON'T do this:

<meta name="viewport" content="width=device-width, initial- scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Do this instead:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The page title tag

To provide an accessible name for the overall page, i.e. to help user's understand they are where they expected to be, use the title tag within the head tag -- the title will get announced by screen readers on page load.

The pattern for the page title has two elements:

<page_topic - site_name>

Page_topic mimics as close as possible the of the page and should also map to navigation elements where applicable that link to the page. Site-name is always the same for all pages across the site.

Examples

Medical Coverage - myCigna
Claims - myCigna

Note: The “-” character is used as a separator to reduce verbosity for screen reader users which pronounce the “|” character as “vertical line” or “vertical bar”. It can also be confused with a lowercase “L” or an uppercase “I”.

For single-page (SPA) implementations, the client side router should update both the title tag and a live region so screen readers will announce the new page, since their isn't a page load action.

Live region attributes and values

role="alert"
aria-live="assertive"

Landmarks

Landmark tags provide the overall structure of a page along with context for users to understand where to look for certain types of information (header, main content and footer). Landmark tags also allow screen reader users to bypass blocks of content with shortcut keys. Every page should include the following landmark tags and attributes by default.

Examples

Header

Contains skip links, site logo, search box, utility and main navigation.

<header role="banner"></header>

Main

Contains content unique to the page.

<main role="main"></main>

Footer

Contains page footer with link lists and contact info.

<footer role="contentinfo"></footer>

Notes

  • Landmark tags have an intrinsic role associated to them, but we recommend explicitly setting the role for better browser support (e.g. IE11)
  • Landmarks can be targeted with CSS to control what gets output to printed page.
  • These landmark tags configured with the following roles must:
    • Only occur ONCE on the page
    • NOT be nested within each other

Avoid the following:

<main role="main">
    <header role="banner">...</header>
</main>

This is OK:

<main role="main">
    <section>
        <header>
            <h2></h2>
        </header>
        <p></p>
    </section>
</main>

Skip Links