(Decided by the Executive (Financial and General Affairs) on November 14, 2017)

1. Attach a brief explanation with the “alt” attribute (alternative text) to images posted on a website.

• In order to enable voice browser users to understand the content of images, attach brief explanations with the “alt” attribute (alternative text) to the images, e.g. alt=“A photo of the main lecture hall”.
• In the case of an image that serves as a link button, attach an “alt” explanation to specify the linked page, e.g. alt=“A link to Hiroshima University”.
• To avoid confusion, do not attach an alt explanation to decorative images with no particular meaning used simply for making the page look good, e.g. alt=“”.

Some people may browse website contents using a software program that reads aloud text information in a synthetic voice (hereinafter “voice browser”). This program reads aloud an “alt” explanation attached as an alternative to an image.

2. Add a text explanation or caption as an alternative to audio or video information.

• Add a text explanation or caption to audio or video information.

Some website visitors may have hearing or vision impairments, or do not understand the language used in the audio or video contents.

3. When using a table, give consideration to the order in which a voice browser will read the table content aloud (from left to right, from top to bottom).

• When using a table, make the logical relationships of the table (table structure and relationship between cells) clear by using child, descendant elements such as tr, th (heading cell), and td elements.
• When using a table, keep in mind to make the table structure and contents comprehensible to the voice browser that reads the contents aloud from left to right and from top to bottom.
• Please do not make a complex table structure for design purposes.

Generally, voice browsers will read the table contents aloud from left to right, from top to bottom.

4. Ensure that information conveyed with color can also be expressed without using color.

• When using different colors for text or categorization, make sure that the content information can be conveyed as the same when printed in black-and-white.
  e.g. Using both colors and patterns to express each section of the pie chart.
  e.g. Using both colors and texts to express each section of the pie chart.

Some users find it difficult to distinguish colors. When using different colors for text, charts and graphs, keep in mind to make the content comprehensible without distinguishing colors.

5. Provide high contrast between the text and background colors.

• Be sure to provide sufficient contrast between the text and background colors (contrast ratio of at least 4.5 to 1) to consider text readability.

Some users find it difficult to identify the content on a webpage where the contrast between the text and background colors is insufficient. It may also be difficult to read text written on patterns or photos.

6. Make it possible for each user to change the font size as they like.

• When using a style sheet, designate the font size and the text container size with a relative value.
  e.g. “font-size:150%”
  e.g. “font-size:1.5em”
  e.g. “width:30em; height:20em”

When size is set by relative value, users can make the text readable by changing the font size setting in the OS or browser.

7. Do not use device-dependent characters such as encircled numbers.

• Do not use Device-dependent characters (e.g. encircled numbers, single-byte katakana characters, double-byte Greek numbers, and special symbols).

Device-dependent characters may not be displayed correctly depending on the OS used.

8. Make it possible to select all items, including links, buttons and menus, by using a keyboard alone.

• Make sure that the movement from item to item and selection of items can be performed using the “TAB” key or “ENTER” key.
• Make sure that all items in a menu or list can be selected by using the arrow keys in combination with the “TAB” key or “ENTER” key.
• If any of the items on the page cannot be accessed using a keyboard alone, think of an alternative method for providing information without using such inaccessible item.

Some users (users with visual impairment, mobility impairment, etc.) may have difficulty using a mouse. Make sure all movements of all pages are accessible by using a keyboard alone.

9. Provide enough time for the user to use the contents.

• When setting a time limit for the contents, consider the users taking time to use the contents.
  e.g. Notify the users with a caution (at least 20 seconds before the timeout) so that the users can adjust (extend) the time limit.

10. Do not use contents that include severe display flashing.

• Do not use contents that flash more than three times in a second.

Exposure to the severe flashing lights may trigger epileptic seizures.

11. Give an appropriate title to each page.

• Give a title specific to each page that is easy to understand and associated with the page content.

Voice browsers read aloud information on a webpage from top to bottom. Giving an appropriate title to each page helps in understanding the structure of the website and makes it easier to search for information.

12. Make it possible for users to skip the contents that appear repeatedly on multiple pages and jump to the main text.

• Provide an internal link that can jump to the main text when some contents that appear repeatedly on multiple pages (e.g. navigations) are placed on prior to the main text.

When some contents (e.g. navigations) that appear repeatedly on multiple pages are placed prior (above or left) to the main text, voice browsers will read these contents every time before reading the main text.

13. Give a link title to a link button to specify the content of the linked page.

• Give a link title to a link button to specify the content of the linked page.
  e.g. <a href=”…”>Hiroshima University Web Accessibility Guideline</a>
• If a linked page is on an external website, give a note to that effect.
• If a linked page is a PDF file or file in any other format, indicate the file format and file size.

14. Add an appropriate navigation aid to make it easier to locate each page within the website.

In order to make it easier to locate each page within the website and to move from one page to another within the same website, keep in mind to add an appropriate navigation aid (breadcrumb list, link to the top page, etc.).

15. Avoid using too many frames and arrange items in order.

• Use frames to the minimum, and when using frames, arrange items in order.

Voice browsers identify and read aloud frames as different pages. Therefore, frames are sometimes difficult to use for voice browser users. Also, if items are arranged at random, the frame for selection goes hither and thither, and users who access the webpage using a keyboard (without using a mouse) might lose sight of the item that they are selecting.

16. Clarify the natural language used in each webpage.

• Clarify the language used in each webpage so that voice browsers can recognize it.
  e.g. <html lang=” ja”>
   
• Clarify the languages used partially in each webpage so that voice browsers can recognize them as need.
  e.g. <html lang=” ja”>
  ・・・
  <span lang=” en”> Accessibility</span>

17. Prevent the website from creating motions without users' choice.

• Prevent the website from reproducing sound automatically without users’ choice.
• Prevent the movement from one page to another from occurring automatically without users’ choice.

Make sure that the website will not create motions against users’ intention.

18. Verify the accessibility of webpages.

• Verify if the webpages are accessible to various users.

e.g. Verify the accessibility using check tools.
 miChecker Ver.2.0 (Japanese page)
 Color Contrast Analyzer 2013J (Japanese page)

e.g. Make sure the conformity of the basis of Web Content Accessibility Guidelines (WCAG) 2.0

e.g. Make sure that the same information can be conveyed when changed into text.

e.g. Make sure that the same information can be conveyed when printed in black-and-white.

e.g. Make sure all movements are available by using a keyboard alone.

​e.g. Ask various people including people with disabilities to use the website and hear their opinions on its accessibility.