PHPAML

Documentation · Chapter 05

Create an interface
usable by everyone.

Accessibility starts with correct HTML. It also helps keyboards, mobile devices, search engines, and temporarily limited users.

We improve reading-list without changing its HTTP logic or temporary session storage.

A meaningful structure

phpaml — zsh
<header>…</header>
<nav aria-label="Main navigation">…</nav>
<main id="content">
    <h1>My books</h1>
    …
</main>
<footer>…</footer>

These elements describe their role, unlike anonymous div elements. A page normally has one main h1 heading, then h2 headings for major sections.

Forms must remain understandable

  • Every input has a label connected through for and id.
  • Errors appear near the field and use role=alert.
  • Keyboard focus remains visible.
  • The button describes the action: Save rather than OK.
  • Color is never the only error signal.
phpaml — zsh
input:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid #5b35e8;
    outline-offset: 3px;
}

Minimum metadata per page

phpaml — zsh
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My books — Reading List</title>
<meta name="description" content="Manage your personal library.">

lang helps assistive technology pronunciation. title distinguishes tabs. The description summarizes the page for search engines and previews, without guaranteeing good ranking by itself.

Five-minute manual check

  1. Navigate the whole page using only Tab.
  2. Zoom to 200% and look for clipped content.
  3. Narrow the window to phone width.
  4. Submit an invalid form and read the message order.
  5. Disable CSS: the document should keep a logical order.