Website accessibility check: labels, keyboard access, alt text and contrast

Design for perception, operation and understanding

An interface communicates through words, position, color and behavior. Good accessibility carries that meaning through different forms of presentation. A visible field label associated with its control also gives a screen reader a useful name. A logical heading structure helps someone scan the page visually and lets another person jump between topics with assistive technology. These relationships make content easier to understand.

WCAG organizes accessibility around perceivable, operable, understandable and robust content. Turn those principles into design questions: how does information reach the person, how can they operate the controls, how clearly does the journey explain itself and how consistently can browsers interpret it? Applying these questions to a real task gives the team a practical way to shape each component.

Give each control a name that supports action

Our workshop form asks for a name, an email address and a session date. A visible label gives each field a lasting identity during entry. Connect the label programmatically as well: its for value can match the input’s id. The browser can then expose the relationship to assistive technology, and the label offers a larger area to select the field.

Choose words that explain the action, such as “Choose workshop date” and “Confirm booking.” Native buttons and links provide familiar browser behavior and a useful foundation for keyboard interaction. Review the computed accessible name in developer tools and experience the component with a screen reader. Consistent visible and spoken names help people recognize the same action across different ways of browsing.

Create a clear route through the page

Move through the booking with Tab and Shift+Tab, activate the date picker and choose a session. A visible focus indicator shows the current position, while a logical order connects related controls. Give focus a clear appearance alongside the other visual states in your design system. Place persistent navigation and banners so the active control remains easy to see.

A modal dialog provides a focused space for a choice. Move focus into it when it opens, offer predictable keyboard controls and a clear close action, then return focus to a useful place afterward, usually the opening control. This continuity helps someone keep their place in the larger task. Review the real component to experience how its structure and behavior work together.

Let structure and alternatives carry the meaning

Headings create a useful outline. Choose levels that reflect the content hierarchy, and use styling to achieve the desired appearance. A visitor can then find a topic by scanning or by navigating through headings. Set the page language to support pronunciation tools and give each page a distinctive title that explains its purpose.

An image alternative conveys the image’s role in context. A workshop diagram might explain seating or the materials included. A purely decorative flourish can use an empty alt attribute, keeping attention on the useful information. For an image link, describe the destination or action. Give complex charts a main takeaway and a nearby explanation or data table, offering several ways to understand the same content.

Make reading comfortable across viewing conditions

Choose text and background combinations that remain easy to distinguish. Under WCAG AA, ordinary text generally uses a contrast ratio of at least 4.5:1 and qualifying large text 3:1, with defined exceptions. Check the colors as rendered, including text over photographs and the states used for focus and feedback. Recording approved combinations in the design system makes them easy to reuse.

Explore larger text and narrower viewports. Reflow allows most content to fit a width equivalent to 320 CSS pixels with a single reading direction; defined exceptions accommodate inherently two-dimensional content. Keep navigation, instructions and actions available as the layout adapts. Reserved media space and thoughtfully placed overlays support comfortable reading on small screens and in varied lighting.

Connect each design choice to a visitor benefit

Form feedback can be as helpful as the instructions at the start. Explain the next step in specific language, such as “Enter an email address in the format name@example.com.” Keep completed entries and make the guidance easy to locate. A clear confirmation rounds off the journey by telling the person what happens next. Apply these patterns to the shared component so every form benefits.

Make accessible patterns part of everyday work

Follow the booking with a keyboard, explore names and headings with a screen reader and review zoom, reflow and contrast. Include the instructions, selection states, progress messages and final confirmation. Automated checks provide repeatable observations about markup, while task-based reviews and feedback from people with relevant access needs help shape the experience in use.

Record the page, component and intended behavior so the team can repeat the review. After an update, explore the component in another page where it is used. Store successful labels, focus behavior and feedback patterns in the design system. Reusing a well-designed field across twenty pages makes accessibility a shared capability of the site and gives future features a strong starting point.

Put the learning into practice with Sitelemetry

Sitelemetry’s accessibility audit, part of the paid plans from $49 a month, reviews the static HTML of one URL: image alternatives, form labels and control names, heading order, the main landmark, page language and title, and contrast where inline styles set both colors. The page is not rendered, so keyboard navigation, focus visibility, reflow and most contrast questions still need the browser and screen-reader review described here, and the score is not a WCAG conformance level.

Use its findings to choose components to fix first, then repeat the keyboard and screen-reader journey after each change.