zh
Digital Agency

Development of a Beginners Guide to Designing and Operating an Accessible Web for All Users

The Digital Agency is continuously working to improve web accessibility with the aim of realizing its mission Human-Friendly Digitalization: No One Left Behind. As part of their external initiatives, theyve supported the production of the Introduction to Web Accessibility guidebook. This resource outlines key concepts and best practices for addressing web accessibility, targeting government officials, businesses, and members of the public who are approaching this topic for the first time.
The cover of the "Web Accessibility Implementation Guidebook" issued by the Digital Agency of Japan on December 12, 2022.

A Step Towards Human-Friendly Digitalization: No One Left Behind

Advancements in digital technology have expanded human capabilities, dramatically transforming the information environment and assistive technologies available to people with disabilities, the elderly, and non-native speakers. Consequently, the importance of web accessibility for all web services, particularly public sector websites, continues to grow.

The term web accessibility refers to the ability or the degree to which anyone can use a website without difficulty. This encompasses users of all ages and those with or without visual, auditory, physical, cognitive, or other disabilities, regardless of the severity of such disabilities. It also takes into account the variety of devices and communication environments through which users may access the web. This is an indispensable perspective, especially for the websites of public institutions that handle information that affects peoples lives, such as administrative procedures or evacuation information in the event of a natural disaster. The Digital Agency, whose mission is Human-Friendly Digitalization: No One Left Behind, believes that administrative websites and information systems should be accessible to a diverse range of users.

While international standards set by the World Wide Web Consortium (W3C) and Japanese web accessibility standards based on the W3C standards exist, the reality is that these can be challenging for beginners to understand and implement. Web accessibility is often perceived as a complex subject.
A diagram illustrating the evolution of web accessibility standards, including the international guidelines set by W3C (World Wide Web Consortium) and the Japanese versions based on them. The chart shows the revision history of WCAG (W3C Recommendation), ISO (International Standard), and JIS (Japanese Industrial Standard).
The Introduction to Web Accessibility guidebook, the production of which we supported, is aimed at those responsible for developing information systems in government, public relations staff involved in information dissemination, and businesses commissioned for these tasks. It focuses on creating an accessible entry point for beginners. As such, the content doesnt cover all existing guidelines and practical processes exhaustively but concentrates on core concepts that we believe are essential for newcomers to understand.
A chart depicting the process from the Digital Agency's mission statement "Human-friendly digitalization: No one left behind" to the development of the guidebook's editorial policy. It outlines the thought process from the agency's mission to the ideal state of the web, and finally to what the guidebook aims to achieve.
A sample page from the "Introduction to Web Accessibility" showing two pages from the "Basics of Web Accessibility" section. The page illustrates and describes various groups that benefit from web accessibility, including individuals with visual and hearing disabilities. Additionally, it clarifies common misunderstandings about web accessibility.

Translating Web Accessibility into Plain Language

Introduction to Web Accessibility is based on content created internally by the Digital Agencys Web Accessibility Team. We edited this material for external use by creating a comprehensive table of contents, refining the text, visually examining diagrams and examples, and taking charge of the binding and graphic design.
Another sample page from the guidebook, excerpted from the "What Should Be Achieved with Web Accessibility" section. It features two key points: "Limit screen readers to one at a time. Do not autoplay" and "Don't create dead ends." The page includes illustrations of a video with captions to explain considerations for screen readers during autoplay, and a dialog box with a "close" button to demonstrate how to avoid dead ends. Each point is succinctly explained in 2-3 lines.

The Introduction to Web Accessibility guidebook itself is designed to meet a high standard of accessibilityparticularly in terms of its visual and auditory cognitive characteristics.

For example, its designed for screen readers so that blind people can obtain information in the same way as sighted readers. This is done by embedding alternate text to let blind people know what images show and to ensure the text is read out in an order thats easy to understand even in complex layouts. In addition, headings are tagged so that its possible to jump quickly to any part to be read. This all ensures that the information in the guidebook is conveyed as originally intended. The result is a document thats made even blind staff working for the Digital Agency say that theyve never experienced such a carefully crafted document.

Web accessibility will be required not only by the Digital Agency but also in many other areas in the future. Through easier-to-understand information design, we want to continue our efforts to promote web accessibility in society as a starting point, not just a final goal.

A screenshot of Adobe InDesign demonstrating how to create a PDF optimized for screen readers, ensuring equivalent information is available through audio playback. Using a page from the "Purpose of the Guidebook" section as an example, it shows how to attach audio data to different elements such as title, lead text, and body text, allowing for information parity with the text data.
The PDF version of the guidebook has been optimized for screen readers to ensure that all the printed information is also available through a voice-reader.
A screenshot of Adobe InDesign explaining how the guidebook itself implements recommended accessibility practices by setting alternative text for all figures and tables. The screenshot displays the InDesign interface for entering alternative text, using Takashi Sakamoto's UX (User Experience) pyramid diagram as an example.
Alternate text is included for all figures and tables. Recommended accessibility measures are thus implemented in the guidebook itself.

Project Information

  • Client: Digital Agency
  • Expertise: Digital
  • Year: 2023

Project Team

Thumbnail
Minoru Ito
Design Engineer, Project Director
Thumbnail
Keisuke Kambara
Design Engineer, Project Director

Related Projects

View all projects
Thumbnail

Chair Neue

A product design for new lifestyle
Thumbnail

Connecting with MOTION & CONTROL

Global campaign for mechanical component manufacturer
Thumbnail

KINS WITH

Brand design of a D2C probiotic supplement service for cats and dogs