Design accessible mobile first
The Web was already responsive, until we started mistaking websites for movie posters with specified widths and heights.
Do yourself a favor: Design for accessibility, on mobile, then think about larger screens.
Annotations for Web
When designing a new website or template, these annotations are the foundation for accessibility.
Declare a language
lang="en"- This affects the screenreader pronunciation.
- It is encoded in the page at the opening tag
<html lang="en">
Give each page view a unique title
Why this matters
- This shows up in the browser tab and is announced when Web pages open
- When people compare similar content across browser tabs using a screen reader, this allows them to know which tab is which
How to structure the title
title="My special Web page - Company name"- Each page must have unique
<title>encoded in the<head>- This example gives a unique name, followed by the company name
- The first part of the title (before “- Company name”) almost always matches the
<h1>heading in the main content - Do not use the
|pipe character as a divider (it is read by screen readers)
- Each page must have unique
Structure your page with landmarks
Landmarks give structure to the page for the screenreader user to be able to navigate the page by major sections.
Each page must include:
Ensure users can zoom in
- People with low vision need the ability to magnify the page on mobile and desktop
- Pinch/zoom on mobile
- Pressing
ctrl +(PC) orcommand +(MacOS) to zoom in/out
- Be sure your development team doesn’t block this ability