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)

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) or command + (MacOS) to zoom in/out
  • Be sure your development team doesn’t block this ability

Related html web page entries