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.
Links
These guidelines are for links.
Here, links refer to elements that users can click (or touch) to navigate to another page or perform some action. Links can be text-only, icon-only, or a combination of text and image.
In addition to those implemented with the a element, this also includes those implemented with the button element or implemented with the appropriate role attribute attached.
Expression Using Multiple Visual Elements
Do not express that something is clickable using color alone.
- Target Platforms
Web, Mobile
- Intent
Ensure that users with visual impairments or color vision deficiencies can perceive links.
- Corresponding Success Criteria of WCAG 2.1
Success Criterion 1.4.1 (Level A): Use of Color
- Supplementary Information
- Related FAQs
Checklist Items
Check ID: 0031
The color scheme is designed to not hinder usability even in grayscale display:
Links can be distinguished
The intent of images and text is conveyed
Required items and errors in input forms can be recognized
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
Check ID: 0051
The content is usable when displayed in grayscale, meeting the following:
Links can be identified
The intent of images and text is clear
Required fields and errors in ininput forms can be recognized
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MAJOR]
Appropriate Link Text
Make the link text (such as the content of an a element, labels for icons) such that the purpose of the link can be determined.
- Target Platforms
Web, Mobile
- Intent
Facilitate the decision-making process of whether to visit a link destination, thereby reducing unnecessary operations for individuals with physical disabilities.
Ensure that visually impaired individuals using screen readers’ link listing functions can easily determine the link destination
- Corresponding Success Criteria of WCAG 2.1
Success Criterion 2.4.4 (Level A): Link Purpose (In Context)
- Supplementary Information
Checklist Items
Check ID: 0241
Link text is not merely ‘click here’ or similar phrases, and is designed so that the destination can be somewhat inferred from the wording of the link text.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[MINOR]
Check ID: 0261
Only the “here” part of “click here for *” is not a link. (In this case, the entire “click here for *” should be a link.) or
The intent of the link text is clear from its markup
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[MINOR]
Consistent Link Text
Provide consistent link text for links that perform the same function within a site.
- Target Platforms
Web, Mobile
- Intent
Increase predictability and prevent confusion.
- Corresponding Success Criteria of WCAG 2.1
Success Criterion 3.2.4 (Level AA): Consistent Identification
Checklist Items
Check ID: 0242
Consistent text and icons are used for links and buttons with the same destination or purpose in the same context.
- Applicable Stages
Design
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
Check ID: 0262
In the same context, consistent text and icons are used for links that have the same transition destination and buttons that have the same purpose.
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
Appropriate Focus Order
When moving focus using Tab/Shift+Tab keys, ensure that focus moves in an appropriate sequence that aligns with the content’s meaning.
- Target Platforms
Web
- Intent
Ensure that assistive technologies such as screen readers can correctly recognize content and present it to users appropriately.
- Corresponding Success Criteria of WCAG 2.1
Success Criterion 2.4.3 (Level A): Focus Order
- Supplementary Information
Checklist Items
Check ID: 0172
When moving the focus, the focus moves in a natural order that is consistent with the context, layout, and operating procedures among the following components.
Links and Buttons
Form controls
Everything else that accepts mouse, keyboard, or touch operation
- Applicable Stages
Product
- Target Platforms
Web, Mobile
- Severity
[NORMAL]
Check Procedure: Web
Confirm 0172-keyboard-01 passes below.
0172-keyboard-01: An Example of Performin the Check with Keyboard
Confirm the following by moving the focus using Tab key, or Shift+Tab key:
The focus moves to all the links, buttons, form controls, and components that accepts operation.
The focus moves in a natural order that is consistent with the context, layout, and operating procedures.