Setting up the overall HTML document is foundational to an inclusive interface. Make sure to include the following elements.
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:
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
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
- Only add breakpoints when something in the interface "breaks" depending on the available space
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
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.
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
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.
Contains skip links, site logo, search box, utility and main navigation.
Contains content unique to the page.
Contains page footer with link lists and contact info.
- 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>