Selected Papers

Universal Design Guidelines for Web
Contents
Masahiro Watanabe†, Aya Okano, and Yoko AsanoAbstract
This paper describes NTT’s universal design guidelines for making Web contents accessible to everyone.

1. Introduction
It is becoming more and more important to makesure that products and information intended for public use can be used by everyone. A universal design
policy is needed in the fields of not only architecture
and traffic but also information technology (IT).
Although IT has the significant advantage of inherent
flexibility, this flexibility is seldom fully utilized.
Universal design for IT implies ensuring that thehardware and/or software is user-friendly to everyone
including the disabled and the elderly. By optimizing
its presentation, we can make IT easy to use for disabled people. Because being able to access Web contents is becoming essential in our daily lives, theapplication of universal design to Web contents isbecoming critical [1].
As shown in Fig. 1, various users including the disabled and elderly will access Web sites using manykinds of input/output and display devices. Blind people may use voice browsers to access text on a Webpage. Those with weak sight may use greatly
enlarged fonts. Physically disabled persons may use
special input-devices to operate their personal computers (PCs). To support these various users and situations, IT with universal design is strongly needed.
The key goal of universal design is to ensure that allusers, regardless of their capabilities, can get thesame Web-based information. This makes it essentialfor Web content to be made device-independent.
Some Web sites provide special Web pages for thedisabled. However, it is difficult and expensive tosynchronize Web-content updates so that information
is kept uniform. It is more efficient to use universal
design so that everyone can access the same page andget the same information.
2. Universal design guidelines: international anddomestic
The World Wide Web Consortium (W3C), whichissues standards on Web techniques, released “WebContent Accessibility Guidelines 1.0 (WCAG 1.0)”
in 1999 [2]. In the United States of America, theRehabilitation Act, Section 508, which was amended
in 2001, requires the Federal government to consider
accessibility when procuring IT devices, software,and Web sites [3]. Here, “accessible” means accessible to a wide range of people .
In Japan, a Committee of the Ministry of Posts andTelecommunications (now the Ministry of Internal
Affairs and Communications (MIC)) and the Ministry of Health and Welfare (now the Ministry ofHealth, Labour and Welfare) announced in 1999 apolicy on Web accessibility [4] based on WCAG 1.0.
This policy has since been adopted by many Japanese
governments, municipal offices, and auxiliary organizations. Many private companies have created theirown guidelines based on WCAG 1.0. In June 2004,
the Japan Industrial Standard (JIS) X8341-3 [5] wasreleased in advance of WCAG 1.0, and it has become
the established set of guidelines in Japan. The guidelines mentioned above are summarized in Fig. 2.

† NTT Cyber Solutions Laboratories
Yokosuka-shi, 239-0847 Japan
E-mail: watanabe.masahiro@lab.ntt.co.jp

Vol. 3 No. 11 Nov. 2005

17

Selected Papers

Universal designguidelines

Web contents
users

Web contents
designers

Nobi-city,
Top page... Listen

Explanations

Voice browser
ExamplesWebcontents

Enlarged characters
SeeBrowser
Monochrome environment
NetworkUse
Web server

Non-mouse input device

PC

Fig. 1. Web contents based on universal design.
Overseas andinternational guidelines

Domestic guidelines
Public guidelines

Rehabilitation act,Section 508(U.S. government)

Guidelines on how tomake accessible Webcontents in Internet (MIC)

Public sites
Web ContentAccessibility
Guidelines1.0(W3C)

Minnano-Web(MIC)
Kokoro-Web(JEITA)JIS X8341-3

Guidelines of private companies
FujitsuIBM

HitachiMicrosoft

UDIT

Fig. 2. Various guidelines from many public institutions and private companies.

3. Situation in NTT Group companies
The NTT Group set the “NTT Official Websiteguidelines” to ensure the same basic appearance andusability. One problem is that they make insufficientuse of universal design. Thus, very few Web sites ofthe NTT Group adequately consider universal design,
which is regrettable. This is a serious problem
18

because accessibility will be a key feature of Web
sites created by the NTT Group for outside customers. In particular, for public Web pages for local
governments, municipal offices, and so on, a universal design policy is essential. Although the demand
for universal design in Web contents is rapidly
increasing year by year, Web producers and designers
have no clear idea of what good designs are or how toNTT Technical Review

Selected Papers

evaluate them.
4. Features of our guidelines
To solve the problems described above, we developed “NTT Web Contents Universal Design Guidelines” based on WCAG 1.0. Our 61 guidelines enable
Web developers to develop Web contents easily andevaluate them. They have the following features:
1. They deal with the problems specific to theJapanese language: These are caused by the useof both 1- and 2-byte codes for Japanese words
and also by the different readings possible forthe same Chinese character.
2. They deal with the problems and requests ofdisabled or elderly users: The results of interviews with such people and those of otherexperiments are reflected in the Web pagestructure, writing style, text size, and so on.
3. They deal with the problems and requests of
Web developers: The guidelines have the structure demanded by Web developers and haveindexes such as target objects and influenced
elements, which are described in more detaillater.
4. They provide practical examples: Some goodand bad illustrations are provided so that Webdesigners can easily understand the guidelines.

Some examples also include the corresponding
HTML source code.
5. Version 2.0 and later versions are fully compliant
with JIS: Our guidelines embrace JIS X8341-3,
which describes 39 guidelines.
5. Contents of the guidelines
To facilitate easy comprehension, the guidelines
include some common items, such as a statement,explanation, and practical examples, and each guideline is presented on a single page, as shown in Fig. 3.
Each guideline includes:• Guideline number• Statement of the guideline’s purpose• Target objects• Influenced elements• Priority of the guideline (one of three levels)• Target users and situations• Explanation that includes why this guideline isnecessary, what kind of problems would becaused if it were not applied, and how to design a
Web site that applies it• Practical examples (good and bad illustrations),
some including HTML source code).
Each guideline has four elements to help Web
developers understand its features or importance as
described below. First of all, one of the nine target

Target objects

Influenced elements

Guideline number

Statement of the guideline
Priority number

Target users
and situations
Explanation

Explanation of reasoningor standard values

Practical examples
ExamplesFig. 3. Page layout of the guidelines.

Vol. 3 No. 11 Nov. 2005

19

Selected Papers

objects is displayed in the top-left corner of each page
as shown in Fig. 3. Target objects include:• Text information (text)• Styles and layouts• Navigation (links)• Image maps (buttons)• Lists and tables• Images and multimedia• Frames• Scripts• Input forms.
Second, one of four kinds of influenced elements isdisplayed in the top-right corner of each page, asshown in Fig. 3. Influenced elements include:• Readability: support for voice browsers• Navigation: ability to reach desirable information
effectively• Expression: good visual representation like colorand correct Japanese readings• Operation: support for operation by all kinds ofusers.
Third, one of the three priorities is clearly displayed. A Web designer can easily refer to them separately in order to adjust the characteristics of theWeb site.
Finally, the target persons and situation of eachguideline are shown so that the Web designer canchoose the really important guidelines and decide theorder of managing them, especially when they
improve a Web page.
6. Three examples of Web pages without
universal design
This section discusses three examples of poor
design commonly found in many Web sites.
First of all, there are problems with the alternative
explanations provided for images. It is quite common
for these explanations to be omitted. A voice browser will read aloud the text entry indicated by the alt
attribute of the IMG element. Many Web designers
fail to see the need to include any text beyond just asimple title. A more complex problem is that some
IMG elements are used only to assist page layout andso are not intended to be processed by voicebrowsers. Some Web designers omit the alt attributeitself from the IMG element, but some voice browsers
handle this by saying “Image without alt-text”. Users
with visual disabilities cannot understand thisresponse. Moreover, if the layout image has a link, its
destination address is read out. In both cases, it is very
hard for voice browser users to understand the infor20mation. The solution is ensure that the alt attribute isused, but that the entry is null or a space (e.g., alt = “”or “ ”).
The second example is a problem peculiar to Japanese words. Most Chinese characters used in Japanese
have several readings. In Japanese, the reading isdetermined by character order. Unfortunately, character sequences are often broken to achieve “better”
text layout by adding blanks. This can confuse voicebrowsers and lead to incorrect readings. For example,
the Japanese word nen-kin, which means pension, iswritten with two Chinese characters; it is often seenin public sites. If a blank is inserted between the twocharacters, some voice browsers read it incorrectly
such as toshi-kane, where toshi and kane are alternate
readings of the Chinese characters nen and kin,respectively. This indicates that padding spaces
should be avoided and instead style sheets should beused to achieve the layout desired.
The third example is the problem of color. Careshould be taken to ensure that text and graphics areunderstandable when viewed without color information. Some simulations for various users and situations are shown in Fig. 4. The left figure shows anoriginal image full of color. The middle image simulates what is seen by a person with deuteranopia (theinability to recognize green). Obviously, some of theinformation provided by the color is missing. Theright image is the gray scale equivalent. It suggeststhat a document printed on a monochrome printerwill lack a considerable amount of the original information. For example, the table in Fig. 4 indicates thegarbage collection times in several areas. There are
two collection periods: daytime and nighttime. Areas
with daytime collection are shown in red. In this case,one of the worst designs would be to use only thephrase “Areas shown in red have daytime garbage
collection.” Instead, it is better to use the phrase“Areas indicated by “D” have daytime garbage collection”. Note that we do not suggest that Web contents should omit the use color. In this example, it isdefinitely effective to enhance the text by showing itin red. However, it is important to provide the same
information in other ways as well. Then, even if all
the color is lost, as in a monochrome printout, theuser can still acquire the information by finding theareas identified by “D”.
Some problems described in our guidelines are due
to immature voice browser technologies. W3C has
issued guidelines for Web browsers [6] and authoring
tools [7]. We should find out how to make good Web
contents that can avoid the problems of current voice
NTT Technical Review

Selected Papers

Deuteranopia

Gray scale

Originals

Fig. 4. Results of color simulation: Web page appearance.

browsers. The guidelines for universal design willchange along with further development of Web technologies such as voice browsers.
7. Tools related to universal designIt is effective to use tools related to universal design
to check the accessibility of Web contents automatically. Many organizations and private companies provide various tools for checking Web pages by comparing them with their own guidelines [8]. Somecompanies offer simulators for color disability, as
shown in Fig. 4, and ones for voice browsing. We arealso developing a tool to check Web pages by comparing them with our guidelines. This tool will enable
Web developers who have little knowledge about universal design to make a Web site that complies withuniversal design.
8. Conclusion
This paper described the weaknesses of current
Web contents and the use of universal design to eliminate them. We would like to enlarge the universal
design policy to support all NTT Group companies

Vol. 3 No. 11 Nov. 2005

and their Web pages. For this purpose, we plan tohold seminars similar to the “Universal IT Design
Symposium” that was held in May 2005 in Tokyo.
Moreover, we must plan to ask NTT Group companies that have know-how about Web solutions to evaluate the guidelines and provide a support framework
for all NTT Group companies.
References
[1]
[2]
[3]
[4]

[5]

[6]
[7]
[8]

M. G. Paciello, “Web accessibility for people with disabilities,” CMP
Books, CMP Media. Inc, Kansas, USA, 2000.
Web Content Accessibility Guidelines 1.0, http://www.w3.org/TR/WCAG10/, 1999.
The Rehabilitation Act, Section 508, http://www.section508.gov/,
2001.
Guidelines on how to make accessible Web contents in Internet,
http:// www.soumu.go.jp/joho_tsusin/policyreports/japanese/group/tsusin/90531x51.html, 1999 (in Japanese).
Japan Industrial Standards Committee: “JIS X8341-3:2004 Guidelines for older persons and persons with disabilities—Information andcommunications equipment, software and services—Part 3: WebContent,” Japanese Standards Association, Tokyo, Japan, 2004.
User Agent Accessibility Guidelines 1.0, http://www.w3.org/TR/UAAG10/, 2002.
Authoring Tool Accessibility Guidelines 1.0, http://www.w3.org/TR/
ATAG10/, 2000.
To use the Web helper: Minnano-Web, http://www2.nict.go.jp/ts/
barrierfree/ accessibility/, 2004 (in Japanese).

21Selected Papers

Masahiro Watanabe

Yoko Asano

Research Engineer, Human Interaction Project, NTT Cyber Solutions Laboratories.
He received the B.E. and M.E. degrees inmechanical engineering in 1991 and 1993,
respectively, and the Dr.E. degree in electronics,information, and communication engineering in2003 from Waseda University, Tokyo. He joined
NTT Basic Research Laboratories in 1993 andstudied the human auditory system. He moved toNTT Cyber Solutions Laboratories in 1999.
Since then, he has been studying human interfaces. He is a member of the Human Interface
Society and the Acoustical Society of Japan.

Senior Research Engineer, Human Interaction
Project, NTT Cyber Solutions Laboratories.
She received the B.E. degree in administrationengineering from Keio University, Yokohama,
Kanagawa in 1988 and joined NTT Human Interface Laboratories the same year. She moved toNTT Cyber Solutions Laboratories in 1999.
Since then, she has been conducting research on
human interfaces. She is a member of the Human
Interface Society, the Japan Ergonomics Society,and the Information Processing Society of Japan.

Aya Okano
Research Engineer, Human Interaction Project, NTT Cyber Solutions Laboratories.
She received the B.E. degree in information
science from the University of Tsukuba, Tsukuba, Ibaraki in 1998 and joined NTT Kanto Corporate Business Department the same year. She
moved to NTT East Leased Circuit Service Center in 1999 and to NTT Cyber Solutions Laboratories in 2002. She is currently researching universal design.

22NTT Technical Review