GTM-MDX3HJT
Skip to main content
  1. Home >
  2. General

General

1. On all pages, titles should be used to accurately portray the page content so that page identification is possible

Example and Implementation

  • Page title is specified in the (title) within the (head) tag.
  • Maximum number of characters should be less that 64.
  • Page title should read "page name -site name (e.g. Accessibility Part 1 -Fujitsu)", etc.
the same titles are confusing

GND_ac_badBad example: when the (title) on all pages is the same

identical titles help viewers

GND_ac_goodGood example: when the (title) is different, page identification is easier

Top of Page

2. Clearly display the main language of the page.

When the language is not specified in the HTML, sometimes audio browsers do not correctly pronounce the voiceover. For example, the word voiture in French meaning car would be pronounced "voter" when the initial settings for the audio browser have been set to English.

Example and Implementation

  • Specify language page by page (specify the lang attribute in the (html) tag)
  • In that case, specify the same language specified in the charset attribute in (meta) tag.
  • Specify (span lang="fr")  etc when the language changes within the page. However, it is not necessary to specify it for each individual word.
clarify page language by specifying a lang attribute

GND_ac_goodGood example: when specifying English by page

Top of Page

3. Make a clear distinction (by changing contrast, brightness, etc) between the text and background colors.

The smaller the difference between the contrast and brightness of the text and background colors, the more difficult it is to read. It is particularly important to ensure this distinction for the elderly, and those with weak eyesight.

Example and Implementation

  • Ensure there is adequate difference in brightness.
  • Persons with certain color perception conditions have trouble differentiating red and green or yellow and blue, while the elderly can have problems distinguishing white and yellow, blue and black, or purplish-blue and black.
  • When using a color with high brightness and a background image with a low brightness, choose a background color (bgcolor attribute) with a low brightness.
low contrast between text and its background

GND_ac_badBad example: combination of white and yellow

Good contrast

GND_ac_goodGood example: combination of white (high-brightness) with brown (low-brightness)

Top of Page

4. Go beyond color shading. Use a combination of text and pattern to highlight information

Persons with certain color perception conditions as well as the elderly (those whose vision is affected by changes associated with aging) can have trouble distinguishing colors.

Example and Implementation

  • Ensure information can be identified by utilizing appearance and text rather than just color.
color is better, but

GND_ac_badBad example: displaying segments of a pie chart using color only

using color AND pointer is even better

GND_ac_goodGood example: displaying differences in segments using pointers with color

Top of Page

5. Do not include text that makes the whole screen flicker. Do not include flickering or scrolling text when displaying essential material or large volumes of information. When such styles are used, avoid extreme changes in contrast or speed.

Persons oversensitive to light sometimes experience seizures due to drastic visual effects such as flicker rates above twice per second or strobe lighting. Those with vision disorders and persons with decreased visual acuity brought on by any of a variety of factors such as aging can have difficulty reading flickering or automatic scrolling text.

Example and Implementation

  • Do not use text that makes the screen flicker more than twice per second. Especially avoid revolving screens with high contrast and red flickering, which has a high saturation.
  • Avoid using repeating patterns such as concentric circles, whorls, or stripes over the whole screen. Also avoid color schemes with complementary colors that are found in these patterns.
  • When using flickering or automatic scrolling for screen elements such as text or graphics, reduce the speed or provide the information in a stand-still form (explaining it using text, etc.) to make the content easy to grasp.
  • Do not use the (blink) tag.
  • Do not use the (marquee) tag.

Top of Page

6. Do not display messages in the status bar.

Some audio browsers do not read out text appearing in the status bar. Also, the loading status and URL information originally displayed in the status bar cannot then be displayed (some audio browsers do not read aloud text displayed in JavaScript).

Example and Implementation

  • Display messages in the main body of the page.
the status bar is the bottom of the  browser

GND_ac_badBad example: displaying messages in the browser's status bar

Top of Page

7. Enable all information to be accessed through keyboard manipulation.

Some users with upper limb disabilities or complete blindness, conduct all of their operations using the keyboard due to difficulties in using pointing devices, such as a mouse. (It is generally desirable to enable all operations to be done on the keyboard regardless of the means of data entry.)

Example and Implementation

  • In ordinary browsers it is possible to change focus using the Tab key or scroll the screen using the up and down arrows.
  • Enable the execution and selection of all links and data entry items through the keyboard by using change of focus.
  • Do not make programs such as JavaScript and Java applets dependent on the data entry means.