Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 51 additions & 11 deletions data/yaml/checks/design/0811.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,58 @@ platform:
- web
check:
ja: |-
そのページへの到達手段が複数ある。ただし、特定のの操作の結果として表示されるページや、何らかの手順(例:ウィザード)の途中で表示されるようなページは除く。
そのページへは、複数の異なるページから到達できる。
en: |-
The target page can be reached from multiple different pages.
conditions:
- platform: web
type: or
conditions:
- type: simple
id: 0811-content-00
tool: misc
procedure:
ja: |-
チェック対象のページは、特定の文脈で表示されなければ意味がないページである。

例:
例:

* ナビゲーション・メニューといわゆるハブ・ページの両方から遷移できる。
* 特定のページ中のリンクから遷移することに加えて、サイト内検索機能からも遷移できる。
* ヘルプ・ページ中のリンクからも遷移できる。
en: |-
There are multiple ways to reach that page. However, this does not apply to pages displayed as a result of specific actions or those shown during a process (e.g., a wizard).
* ウィザードの途中で表示されるページ
* 操作結果の表示など、特定の操作をしたときのみ表示されるページ
en: |-
The target page is a page that only makes sense when displayed in a specific context.

Examples:

* A page displayed during a wizard.
* A page that is only displayed when a specific action is performed, such as displaying the result of an operation.
- type: simple
id: 0811-content-01
tool: misc
procedure:
ja: |-
チェック対象のページには、グローバル・ナビゲーション中のリンクから到達できる。
en: |-
The target page can be reached from a link in the global navigation.
- type: simple
id: 0811-content-02
tool: misc
procedure:
ja: |-
チェック対象のページへは、特定のページ中のリンクから遷移できることに加えて、何らかの別の方法でも到達できる。

例:

* ヘルプページからのリンク
* サイトマップからのリンク
* サイト内検索の結果からのリンク
* 一覧ページからのリンクに加えて、一覧ページのフィルター機能を使って表示されるページからのリンク
en: |-
In addition to being able to navigate to the target page from a link in a specific page, it can also be reached by some other means.

Examples:
Examples:

* It can be accessed from both the navigation menu and so-called hub pages.
* In addition to transitioning from links on a specific page, it can also be accessed through the site's search function.
* It can also be accessed from links within the help page.
* A link from a help page.
* A link from a sitemap.
* A link from the results of an internal search.
* In addtion to a link from a list page, links from pages displayed using the filter function of the list page.
63 changes: 48 additions & 15 deletions en/source/explanations/page-navigation.rst
Original file line number Diff line number Diff line change
@@ -1,24 +1,57 @@
.. _exp-page-navigation:

##################################################################
使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装
##################################################################
##############################################################################
Designing and Implementing Navigation for Improved Usability and Accessibility
##############################################################################

サイト内のナビゲーションの仕組みやサイトの構造は、そのサイトの使い勝手に影響します。
The navigation mechanisms and site structure significantly impact a Web site's usability.
This short article explains the importance of consistent navigation, clearly indicating the page's location, and providing multiple pathways.

画面表示を拡大して利用しているロービジョンのユーザーは、画面の一部分だけを見て操作を行っている場合があります。
このようなユーザーの場合、どのページにおいてもナビゲーションのためのリンクの出現順序やレイアウトが一貫していると、ページの構造などを推測しやすくなり、目的の機能をより早く、容易に見つけることができます。
*********************
Consistent Navigation
*********************

また、スクリーン・リーダーのユーザーの場合、複数のページで共通に出現するナビゲーションなどを毎回すべて読み上げさせるのは時間もかかり非効率的です。
しかし、出現順序やレイアウトが一貫していれば、必ずしも毎回同じ内容を読み上げさせる必要がなくなります。
Users with low vision who use magnification to view a screen may operate by looking at only a portion of it.
For such users, if the order and layout of navigation links are consistent across all pages, it becomes easier to infer the page structure, allowing them to find the desired functions more quickly and easily.

このとき重要なことは、視覚的に出現順序やレイアウトの一貫性があることに加えて、マークアップについても一貫したものを用いるということです。
スクリーン・リーダーは、マークアップが示すセマンティクスを伝えるための情報を付加します。
したがって、視覚的に同じものでもマークアップが異なれば、読み上げられ方も異なってしまいます。
つまり読み上げられ方の一貫性を欠く結果になってしまいます。
Furthermore, for screen reader users, having the screen reader announce all common navigation elements on every page is time-consuming and inefficient.
However, if the order and layout are consistent, it is not always necessary to read out the same content every time.

これに加えて、ページへの動線を複数提供することと、そのページがサイト構造においてどこに位置しているのかを明示することをが推奨されています。
ページへの動線が1つしかないページの場合、サイト構造を正確に理解している、あるいは容易に推測できるユーザーでなければ、到達するのが困難なページになってしまいます。
また、現在閲覧しているページがサイト構造の中のどこに位置しているのかという情報は、サイト構造に対する理解を助け、様々な操作に当たっての推測を容易にします。
What is crucial here is that in addition to visual consistency in the order and layout, consistent markup should also be used.
Screen readers add information to convey the semantics indicated by the markup.
Therefore, even if something appears visually the same, if the markup differs, the way it is read aloud will also differ, leading to a lack of consistency in the spoken output.

**************************************
Clearly Indicating the Page's Location
**************************************

Clearly indicating where a page is located within the site's structure is crucial for users to understand that structure.
Understanding the site structure helps users reach their target page more easily and facilitates assumptions when performing various operations.

For example, displaying a breadcrumb trail that shows the hierarchical structure from the site's top page helps users understand the position of the current page.

Furthermore, indicating which global navigation item the current page belongs to also helps users understand the site structure.
This can be achieved by visually highlighting the global navigation item.
Additionally, by appropriately using the ``aria-current`` attribute, screen reader users can also be informed of which item the current page belongs to.

***************************
Providing Multiple Pathways
***************************

If a page has only one pathway, it becomes difficult to reach for users who don't accurately understand or can't easily infer the site structure.
To mitigate this issue, providing multiple pathways is recommended.

Specifically, pages reachable from the global navigation fulfill this condition, as they can be accessed from anywhere within the site.
Also, if a page can be reached via a link within a specific page as well as by some other means, this condition is met.
Here are some specific examples:

* Links from a help page
* Links from site search results
* Links from a list page in addition to links from results displayed using the list page's filter function

However, there is no need to provide multiple pathways for pages that only make sense when displayed in a specific context, such as the following examples:

* Pages displayed in the middle of a wizard
* Pages displayed only when a specific operation is performed, such as showing operation results

.. include:: /inc/info2gl/exp-page-navigation.rst
41 changes: 39 additions & 2 deletions ja/source/explanations/page-navigation.rst
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
##################################################################

サイト内のナビゲーションの仕組みやサイトの構造は、そのサイトの使い勝手に影響します。
ここでは、一貫性のあるナビゲーション、ページの場所の明示、複数の動線の提供の重要性について説明します。

**********************
ナビゲーションの一貫性
**********************

画面表示を拡大して利用しているロービジョンのユーザーは、画面の一部分だけを見て操作を行っている場合があります。
このようなユーザーの場合、どのページにおいてもナビゲーションのためのリンクの出現順序やレイアウトが一貫していると、ページの構造などを推測しやすくなり、目的の機能をより早く、容易に見つけることができます。
Expand All @@ -17,8 +22,40 @@
したがって、視覚的に同じものでもマークアップが異なれば、読み上げられ方も異なってしまいます。
つまり読み上げられ方の一貫性を欠く結果になってしまいます。

これに加えて、ページへの動線を複数提供することと、そのページがサイト構造においてどこに位置しているのかを明示することをが推奨されています。
******************
ページの場所の明示
******************

そのページが、サイト構造の中のどこに位置しているのかを明示することは、ユーザーがサイト構造を理解するために重要です。
サイト構造を理解することで、ユーザーは目的のページに到達しやすくなります。
また、サイト構造を理解することで、様々な操作に当たっての推測を容易にします。

例えば、サイトのトップページからの階層構造を示すパンくずリストを表示することは、ユーザーが現在のページの位置を把握するのに役立ちます。

また、現在のページが、グローバル・ナビゲーションのどの項目に属しているのかを示すことも、ユーザーがサイト構造を理解するために役立ちます。
これには、視覚的にグローバル・ナビゲーションの項目を強調表示する方法が考えられます。
加えて、 ``aria-current`` 属性を適切に用いることで、スクリーン・リーダーのユーザーにも、現在のページがどの項目に属しているのかを伝えることができます。

****************
複数の動線の提供
****************

ページへの動線が1つしかないページの場合、サイト構造を正確に理解している、あるいは容易に推測できるユーザーでなければ、到達するのが困難なページになってしまいます。
また、現在閲覧しているページがサイト構造の中のどこに位置しているのかという情報は、サイト構造に対する理解を助け、様々な操作に当たっての推測を容易にします。
この問題を軽減するために、複数の動線を提供することが推奨されています。

具体的には、グローバル・ナビゲーションから到達できるページの場合、サイト内のどこからでも到達できることになりますので、この条件を満たします。
また、特定のページ中のリンクから到達できることに加えて、他の何らかの手段で到達できれば、この条件を満たします。
具体的には、以下のような例を挙げることができます。

* ヘルプ・ツールが利用ページからのリンク
* サイト内検索の結果からのリンク
* 一覧ページからのリンクに加えて、一覧ページのフィルター機能を使って表示した結果からのリンク

しかし、以下の例に挙げるような、特定の文脈で表示されなければ意味が無いようなページに複数の動線を提供する必要はありません。

* ウィザードの途中で表示されるページ
* 操作結果の表示など、特定の操作をしたときのみ表示されるページ

.. include:: /inc/info2gl/exp-page-navigation.rst

.. translated:: true