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.

Pages in General

These guidelines pertain to the entire page and are applicable to all pages.

Indicate Regions That Compose a Page

Mark up regions that compose a page.

Target Platforms

Web

Intent

Ensure that assistive technologies such as screen readers can appropriately present the page structure to users.

  • Many screen readers have the ability to move between regions indicated by ARIA landmarks.

  • Screen reader users can easily move to the desired part of the page.

Corresponding Success Criteria of WCAG 2.1
Supplementary Information

Checklist Items

Check ID: 0661

The design documentation explicitly states in a consistent manner across multiple pages which parts of the page should be marked up with the header, nav, main, and footer elements.

Applicable Stages

Design

Target Platforms

Web

Severity

[NORMAL]

Check ID: 0671

  • The header, main, nav, and footer elements are used appropriately, or

  • they are explicitly indicated by the role attribute.

Applicable Stages

Code

Target Platforms

Web

Severity

[NORMAL]

Check ID: 0682

All content on the page is placed in the appropriate area indicated by ARIA landmarks.

Applicable Stages

Product

Target Platforms

Web

Severity

[NORMAL]

Check Procedure: Web

Confirm 0682-axe-01 and 0682-misc-01 pass below.

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

Confirm that none of the following issues is reported by axe DevTools against visible content. (THere usually is no problem if these issues are reported against hidden content.)

0682-misc-01: An Example of Performin the Check with Landmark Navigation via Keyboard or Pop-up

Confirm that every part of the page content is contained in an appropriate ARIA landmark region when viewed using a browser with the Landmark Navigation via Keyboard or Pop-up extention installed.

Indicate the Beginning of the Main Content

Mark up the beginning of the main content.

Target Platforms

Web

Intent

Ensure that visually impaired individuals can easily find the beginning of the main text.

  • Many screen readers have the capability to navigate between areas indicated by ARIA landmarks and between headings.

  • Users of screen readers can quickly start reading the main text by moving to the beginning of the main element using the region navigation feature, or to just before the main text using the heading navigation feature.

Corresponding Success Criteria of WCAG 2.1
Supplementary Information

Checklist Items

Check ID: 0672

  • The main element reflects the start of the main content, or

  • there is a heading marked up with an h1 or h2 element at the beginning of the main content.

Applicable Stages

Code

Target Platforms

Web

Severity

[NORMAL]

Check ID: 0681

The start of the main text can be found by using the heading jump function of the screen reader or the jump function between areas indicated by ARIA landmarks.

Applicable Stages

Product

Target Platforms

Web

Severity

[NORMAL]

Check Procedure: Web

Confirm 0681-axe-01 passes, and (0681-nvda-01 or 0681-nvda-02 or 0681-macosvo-01 or 0681-macosvo-02 passes) below.

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

Confirm that none of the following issues are reported by axe DevTools.

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

Confirm that users can move to the position immediately before the main body using the jump to next/previous heading function ( H / Shift + H key) in NVDA’s browse mode.

Reference Videos: 本文の開始位置【NVDAでアクセシビリティー チェック】

0681-nvda-02: An Example of Performin the Check with NVDA

Confirm that users can move to the beginning of the main landmark using the jump to next landmark function ( D` key) in NVDA’s browse mode, and the main body begins immediately after that position.

0681-macosvo-01: An Example of Performin the Check with macOS VoiceOver

Confirm that users can move to the position immediately before the main body using the jump to next/previous heading function of macOS VoiceOver ( VO + Command + H / VO + Command + Shift + H key).

0681-macosvo-02: An Example of Performin the Check with macOS VoiceOver

Confirm that users can move to the beginning of the main landmark by the following steps with macOS VoiceOver enabled, and the main body begins immediately after that position.

  1. Press VO + U to display the rotor menu

  2. Select “Landmarks”

  3. Select “Main” and press Enter