Accessibility guide

Screens for everyone: accessibility starts at planning

How to take care of web accessibility at every stage: planning, design, development, and operations.

In this guide

Accessibility is easy to treat as a checklist item to verify after development is finished. But fixing it after the screen layout and content are set means many more things to change. If you work out at the planning stage who uses the service and in what conditions, design and development can work to the same standards.

Accessibility concept image of a gentle ramp with handrails, low steps, and a flat path with floor guide lines all leading to one blue glass entrance

01. Picture the full range of usage conditions first

Think through real usage situations: people who navigate only with a keyboard instead of a mouse, people who listen to content through a screen reader, people who enlarge text, and people reading on a phone outdoors in bright light. Also think of older adults and of people who can’t use their hands for a while because they are injured or carrying something.

Check early whether the project requirements or the contracting agency’s standards include accessibility items. Once the standards to apply and the acceptance method are set, the scope of work in later stages becomes clear too.

What to prepare

  • Main users and their usage conditions (devices and assistive technology)
  • Accessibility standards to apply and the acceptance method
  • Key flows that must work through to the end, such as applications, payments, and lookups

02. Structure and content must read clearly first

Set up heading levels, list and table structure, and link text so they make sense without seeing the screen. When the same text, such as “Learn more”, repeats, people listening with a screen reader can’t tell where each link goes.

Describe informative images in alt text, and mark decorative images so screen readers skip them. For materials provided apart from the main text, such as downloadable documents and videos, also prepare a way for people to access their content.

What to prepare

  • Heading levels and page structure
  • Link and button text that shows where it leads
  • Alt text for informative images, and decorative images marked as such

03. Set standards at the design stage

Make the design standards cover text and background contrast, text size and line spacing, and buttons large enough to press easily. Don’t mark important information such as errors and required fields with color alone; add text or symbols as well.

The focus indicator, which shows where you are when moving with a keyboard, is part of the design too. If the default indicator is removed with nothing to replace it, keyboard users can’t tell where they are, so decide from the start on an indicator that suits the service.

04. Combine automated checks with manual testing

Automated checking tools quickly flag problems that rules can find, such as missing alt text or low contrast. But a person has to check whether the alt text fits the content and whether the navigation order feels natural.

Go through the key flows to the end using only a keyboard, and listen to the main pages with a screen reader. Include differences between browsers and devices, screen magnification, and mobile environments in the acceptance scope.

What to prepare

  • Using menus, forms, and pop-ups with a keyboard alone
  • Listening to the main pages with a screen reader
  • Display under magnification, on mobile, and in different browsers

05. Keep it accessible during operations

Even if the standards were met at launch, accessibility can slip again as new posts and images pile up. Prepare admin screens and entry guidelines so content owners can enter alt text and heading structure.

Add to your routine checks the items to review whenever features are added or the design changes. Give users a way to report problems, and manage the feedback you receive as improvement items.

That’s all you need before a consultation.

If you prepare the items below, we can align on scope more quickly in early discussions. Even if not everything is ready, we can start with your current situation.

  • Main users and their usage conditions
  • Accessibility standards to apply and the acceptance method
  • Design standards for contrast, text size, and focus indicators
  • What to test by hand with a keyboard and a screen reader
  • Content entry guidelines and an owner for routine checks

KPS project guide · The specific technical setup and conditions depend on your requirements.

Let’s outline your challenge together.

From the first idea to operations, we’ll think it through with you.