HTML Web page

How to design a html web page

WCAG Disabilities

A html web page must meet WCAG principles:

1 Perceivable

Text can resize up to 200% with no loss of information - 1.4.4 AA
Content is presented in a meaningful sequence - 1.3.2 A
Page view adapts to horizontal or vertical orientation - 1.3.4 AA
Browser can zoom up to 400% without horizontal scrolling - 1.4.10 AA

2 Operable

Web pages have unique titles that describe its purpose - 2.4.2 A
The focus order is meaningful (even if it doesn't perfectly match the visual layout) - 2.4.3 A
Offer at least two ways to find pages on your website - 2.4.5 AA

3 Understandable

The human language of the page is documented - 3.1.1 A
The human language any multilingual components is documented - 3.1.2 AA
Help options are presented consistently in the page view. - 3.2.6 A

4 Robust

Meets criteria across platforms, devices and viewports 4.0.0 AA

A html web page must work for people with disabilities:

Low vision

Text can resize up to 200% with no loss of information - 1.4.4 AA
Browser can zoom up to 400% without horizontal scrolling - 1.4.10 AA

Cognitive

Offer at least two ways to find pages on your website - 2.4.5 AA

Motor

The focus order is meaningful (even if it doesn't perfectly match the visual order) - 2.4.3 A

Blindness

Web pages have unique titles that describe its purpose - 2.4.2 A
Content is presented in a meaningful sequence (even if it doesn't perfectly match the visual layout) - 1.3.2 A
The human language of the page is documented - 3.1.1 A
The human language any multilingual components is documented - 3.1.2 AA
Meets criteria across platforms, devices and viewports 4.0.0 AA

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

Web html web page criteria