Caution

This document is an English translation of the “freee Accessibility Guidelines.” The normative version of this document is in Japanese, and the English version is informational. The English translation is incomplete, and any links with their link texts left in Japanese are untranslated. Please be aware that there may be inaccuracies in the translation or parts that are outdated.

Markup and Implementation

These guidelines are about markup and implementation in general, and apply to all content.

Implement or Utilize Markup to Accurately Represent Document Structure

Implement static text content using HTML elements or components that accurately represent semantics such as document structure.

Target Platforms

Web, Mobile

Intent

Ensure that assistive technologies such as screen readers can correctly recognize content and present it to users in an appropriate manner.

• Appropriate markup makes it easier for screen readers to find headings and list items.

• Assistive technologies such as screen readers have functions such as displaying a list of headings and links, which are implemented based on appropriate markup.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 1.3.1 (Level A): Info and Relationships

Supplementary Information

• The Importance of Properly Marking Up Semantics

Related FAQs

• Heading Level Specification

• Should the hr Element Be Read Aloud by Screen Readers, And How Should It Be Read?

Checklist Items

Check ID: 0541

It is explicitly stated in the design documentation what should be expressed as headings.

Applicable Stages

Design

Target Platforms

Web, Mobile

Severity

[NORMAL]

Check ID: 0542

It is explicitly stated in the design documentation what should be expressed as lists, tables, etc., along with the HTML elements or the design system components to be used.

Applicable Stages

Design

Target Platforms

Web

Severity

[MAJOR]

Check ID: 0543

Appropriate heading levels are specified for headings:

• Heading levels reflect the document’s hierarchical structure

• Across the entire page, heading levels start from 1

• Heading levels increase sequentially by one at each level, such as 2 being subordinate to 1, and 3 to 2, ensuring there are no gaps

Applicable Stages

Design

Target Platforms

Web

Severity

[NORMAL]

Check ID: 0551

Headings are implemented appropriately according to the design documentation.

Applicable Stages

Code

Target Platforms

Web, Mobile

Severity

[NORMAL]

Implementation Example: Heading Implementation

Web

Mark up with h1 to h6.

iOS

Set UIAccessibilityTraits.header.

Android

Set android:accessiblityHeading to true for the text in question (Android 9 or later)

Check ID: 0552

The semantics of lists, tables, etc. are implemented appropriately according to the design documentation.

Applicable Stages

Code

Target Platforms

Web

Severity

[MAJOR]

Implementation Example: Implementation According to Semantics

Web

• Use lists (ul, ol, dl), tables (table), etc.

• Use the appropriate components of the design system

Check ID: 0561

Headings are recognized by the screen reader as headings of the heading levels indicated in the design documents.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[NORMAL]

Check Procedure: Web

Confirm 0561-axe-01 passes, and (0561-nvda-01 or 0561-macvo-01 passes) below.

0561-axe-01: An Example of Performin the Check with axe DevTools

Confirm that none of the following issues is reported混地裁.

• Headings should not be empty （見出しは空にしてはなりません）

• Heading levels should only increase by one （見出しのレベルは1つずつ増加させなければなりません）

• Page should contain a level-one heading （ページにはレベル1の見出しが含まれていなければなりません）

0561-nvda-01: An Example of Performin the Check with NVDA

With NVDA, display the heading list by steps below, and confirm that all headings on the page are displayed appropriately.

1. Display the elements list in browse mode (NVDA+F7)

2. Set the “Type” to “Headings” ():kbd:Alt+H)

Reference Videos: 見出し【NVDAでアクセシビリティー チェック】

0561-macvo-01: An Example of Performin the Check with macOS VoiceOver

With macOS VoiceOver, display the heading list by steps below, and confirm that all headings on the page are displayed appropriately.

1. Press VO + U to display the rotor menu

2. Select “Headings”

Check ID: 0562

The screen reader properly recognizes tables and their cells.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[MAJOR]

Check Procedure: Web

Confirm 0562-nvda-01 passes below.

0562-nvda-01: An Example of Performin the Check with NVDA

Confirm that all of the following are met using NVDA.

• The table can be found by the following steps:

  1. Move to the beginning of the page in browse mode ():kbd:Ctrl+Home)

  2. Move to the table using the go to next/previous table functions (T or Shift+T)

• Content of the table cells are announced properly when moving among the cells using the following steps:

  1. Find the beginning of the table in browse mode

  2. Move among the cells using following keys:

     • Ctrl+Alt+←: to the left cell

     • Ctrl+Alt+→: to the right cell

     • Ctrl+Alt+↓: to the cell below

     • Ctrl+Alt+↑: to the cell above

What to be announced when moving among table cells：

The following content is announced when moving among cells using the functions listed above.

• move to left/right: the column header, column number, and the content of the destination cell

• move up/down: the row header, row number, and the content of the destination cell

The following is announced if arrow keys are simply used in browse mode:

• up/down arrows: move to the previous/next cell and announce the cell content; only a part of the cell might be read if there are line-breaks within the cell.

• left/right arrows: move and announce character by character; the behavior on empty cells is as if there is only one space character

Reference Videos: 表【NVDAでアクセシビリティー チェック】

Valid Markup

Use valid markup that conforms to specifications.

Target Platforms

Web

Intent

Ensure that user agents and assistive technologies can accurately parse Web pages.

User agents and assistive technologies behave as expected when HTML elements are properly opened and closed and have appropriate nesting.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 4.1.1 (Level A): Parsing

Supplementary Information

• The Nu Html Checkerを用いたHTMLのバリデーション

Checklist Items

Check ID: 0571

The code passes checks by a validator or linter.

Applicable Stages

Code

Target Platforms

Web

Severity

[MAJOR]

Implementation of Interactive UI Components

UI components that accept user input, such as links, buttons, and form controls, should be implemented using appropriate HTML elements or standard components of the development framework being used.

Target Platforms

Web, Mobile

Intent

• Ensure that assistive technologies such as screen readers can correctly recognize content and present it to users in an appropriate manner.

• Ensure that users of assistive technologies can operate content appropriately.

• Ensure that content can be operated using a keyboard.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 1.3.1 (Level A): Info and Relationships

Supplementary Information

• UIコンポーネントのアクセシビリティー

Checklist Items

Check ID: 0553

Buttons are implemented with the button element, links are implemented with the a element that has an href attribute, and various form controls such as edit boxes, check boxes, and radio buttons are implemented with the appropriate HTML elements.

Applicable Stages

Code

Target Platforms

Web

Severity

[MAJOR]

Check ID: 0554

UI components are implemented using standard components of the OS or development framework.

Applicable Stages

Code

Target Platforms

Web, Mobile

Severity

[MAJOR]

Make Components Accessible

Implement UI components that receive user input in such a way that they meet the following criteria:

• Define AccessibleName and role appropriately so that they can be acquired by user agents, including assistive technologies.

• Ensure that user agents, including assistive technologies, can set and recognize changes in the component’s state, properties, and user-configurable values.

Target Platforms

Web, Mobile

Intent

Ensure that assistive technologies can handle custom components, such as those implemented in JavaScript, without problems.

• Ensure that screen readers can accurately convey to users what kind of component it is and what state it is in, and enable users to operate it, for components that cannot be implemented using only standard HTML, such as menus that can be opened and closed, and tabs.

• Ensure that changes in the component’s state can be recognized when the component’s state changes due to user operations.

Corresponding Success Criteria of WCAG 2.1

• Success Criterion 4.1.2 (Level A): Name, Role, Value

Supplementary Information

• UIコンポーネントのアクセシビリティー

Checklist Items

Check ID: 0581

For UI components that require custom implementation, the behavior when using screen readers and the behavior when operating with a keyboard are explicitly stated in the design documentation.

Applicable Stages

Design

Target Platforms

Web, Mobile

Severity

[CRITICAL]

Check ID: 0586

Custom UI components are implemented so that their roles and states are appropriately conveyed to assistive technologies such as screen readers.

Applicable Stages

Code

Target Platforms

Web, Mobile

Severity

[CRITICAL]

Implementation Example: Conveying Roles to Screen Readers

Web

Specify the role attribute appropriately.

iOS

• Specify the appropriate accessibilityTraits.

Android

• If using jetpack compose: Specify the role attribute appropriately

• If not using jetpack compose: Override the getAccessibilityClassName() method of the view to return an appropriate value.

Check ID: 0587

Components with multiple states are implemented so that their states are understandable both visually and by screen readers. (For example, the currently selected tab in a tab UI, icons that change according to their state, etc.)

Applicable Stages

Code

Target Platforms

Web, Mobile

Severity

[CRITICAL]

Check ID: 0591

Non-static text (e.g., open/close menus, tab panels, date selection UI) can be manipulated by the screen reader without difficulty.

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[CRITICAL]

Check Procedure: Web

Confirm 0591-nvda-01 passes below.

0591-nvda-01: An Example of Performin the Check with NVDA

Confirm that all of the following are met using NVDA:

• Users can recognize that the component accepts some operation when reading the part in browse mode.

• All of the functions provided in the part can be operated at least by keyboard in focus mode.

• If the displayed content changes upon operation, users can recognize it through the announcement.

• If the displayed content changes upon operation, users can read the updated content in browse mode.

Reference Videos: 開閉するボタン【NVDAでアクセシビリティー チェック】

Check ID: 0592

The state of components with multiple states can be determined by the screen reader. (e.g., the currently selected tab in the tabbed UI, icons that change according to state, etc.)

Applicable Stages

Product

Target Platforms

Web, Mobile

Severity

[CRITICAL]