ランドマークと見出しLandmarks and Headings

通常、ユーザー インターフェイスは、目が見えるユーザーがすべてのコンテンツを読む速度を落とさずに、興味があることにざっと目を通すことができるように視覚的に効率的な方法で編成されます。A user interface is typically organized in a visually efficient way, allowing a sighted user to quickly skim for what interests them without having to slow down to read all the content. スクリーン リーダー ユーザーにも、これと同じようにざっと目を通す機能が必要です。A screen reader user needs to have this same skimming ability. ランドマークと見出しは、ユーザー インターフェイスのセクションを定義し、アクセシビリティ対応技術 (AT) のユーザーのさらに効率的なナビゲーションに役立ちます。Landmarks and headings define sections of a user interface that aid in more efficient navigation for users of assistive technology (AT). コンテンツをランドマークと見出しにマークすることで、スクリーン リーダー ユーザーに、目が見えるユーザーと同じようにコンテンツにざっと目を通すオプションが提供されます。Marking up the content into landmarks and headings provides a screen reader user the option to skim content similar to the way a sighted user would.

スクリーン リーダー ユーザーがすばやいナビゲーションを行えるように、Web コンテンツには長年にわたり、ARIA ランドマークARIA 見出し、および HTML 見出しの概念が使用されてきました。The concepts of ARIA landmarks, ARIA headings, and HTML headings have been used in web content for years to allow faster navigation by screen reader users. Web ページでは、ランドマークと見出しを使用して、AT ユーザーが大きい塊 (ランドマーク) と小さい塊 (見出し) にすばやくアクセスできるようにすることで、コンテンツをさらに使いやすくしています。Web pages utilize landmarks and headings to make their content more usable by allowing the AT user to quickly get to the large chunk (landmark) and smaller chunk (heading). 具体的には、スクリーン リーダーに、ランドマーク間で移動したり、見出しの間で移動したりできるコマンドがあります (次へ/前へ、または特定の見出しレベルへ)。Specifically, screen readers have commands allowing users to jump between landmarks and jump between headings (next/previous or specific heading level). 同じ理由で、アプリでランドマークと見出しを検討することが重要です。It is important to consider landmarks and headings in your apps for the same reasons.

ランドマークを使うと、コンテンツを検索、ナビゲーション、メイン コンテンツなど、さまざまなカテゴリにグループ化することができます。Landmarks enable content to be grouped into various categories such as search, navigation, main content, and so on. グループ化すると、AT ユーザーはグループ間をすばやく移動できます。Once grouped, the AT user can quickly navigate between the groups. このすばやいナビゲーションでは、以前に項目ごとに移動する必要があり、不快に感じたかなりの量のコンテンツをスキップすることができます。This quick navigation allows the user to skip potentially substantial amounts of content which previously may have had to be navigated over item by item making for a poor experience.

たとえば、タブ パネルを使用する際は、それをナビゲーション ランドマークと考えてください。For example, when using a tab panel, consider this a navigational landmark. 検索編集ボックスを使用する際は、それを検索ランドマークと考え、メイン コンテンツをメイン コンテンツランドマークとして設定することを検討してください。When using a search edit box, consider this a search landmark and consider setting your main content as a main content landmark. ランドマークの内部でも外部でも、サブ要素を論理見出しレベルがある見出しとして設定することを検討してください。Whether within a landmark or even outside a landmark, consider setting sub elements as headings with logical heading levels.

Windows 設定アプリに、 [簡単操作] ページを含めることを検討してください。Consider the Ease of Access page in the Windows Settings app.

Windows 設定アプリの [簡単操作] ページ

検索ランドマーク内にラップされた検索編集ボックスがあります。There is a search edit box which is wrapped within a search landmark. 左側のナビゲーション要素はナビゲーション ランドマーク内でラップされ、右側のメイン コンテンツはメイン コンテンツ ランドマーク内でラップされています。The navigational elements on the left are wrapped within a navigational landmark and the main content on the right is wrapped within a main content landmark. さらに、ナビゲーション ランドマーク内に、見出しレベル 1 が [簡単操作] であるメイン グループの見出しがあります。Taking this further, within the navigational landmark there is a main group heading called Ease of Access which is a heading level 1. その下に、サブ オプションの [視覚][聴覚] などがあります。Under that are the sub options Vison, Hearing, and so on. これらの下に見出しレベル 2 があります。These have a heading level 2. 見出しの設定はメイン コンテンツ内でも続き、メイン サブジェクトの [表示] を見出しレベル 1 として設定し、 [画面上のすべてのものを大きくする] などのサブ グループを見出しレベル 2 として設定します。Setting headings is continued within the main content again setting the main subject, Display, as heading level 1 and sub groups such as Make everything bigger as heading level 2.

ランドマークや見出しがなくても設定アプリにアクセスできますが、これらがある方がより使いやすくなります。The Settings app would be accessible without landmarks and headings, but it becomes more usable with them. スクリーン リーダー ユーザーは、必要なグループ (ランドマーク) に迅速かつ簡単にアクセスでき、サブ グループ (見出し) にも同様にアクセスできます。A screen reader user can quickly and easily get to the group (landmark) they need and then quickly get to the sub group (heading) as well.

AutomationProperties.LandmarkTypeProperty を使用して、目的のランドマークの種類として UI 要素を設定します。Use AutomationProperties.LandmarkTypeProperty to setup the UI element as the type of landmark you wish. このランドマーク UI 要素は、そのランドマークに応じた他のすべての UI 要素をカプセル化します。This landmark UI element would encapsulate all the other UI elements which make sense for that landmark.

AutomationProperties.LocalizedLandmarkTypeProperty を使用して、ランドマークに具体的に名前を付けます。Use AutomationProperties.LocalizedLandmarkTypeProperty to specifically name the landmark. メインやナビゲーションなど、定義済みのランドマークの種類を選択した場合は、それらの名前がランドマーク名に使用されます。If you select a predefined landmark type such as main or navigational, these names will be used for the landmark name. しかし、ランドマークの種類をカスタムに設定した場合は、このプロパティを使用してランドマークに具体的に名前を付ける必要があります。However, if you set the landmark type to custom you must specifically name the landmark through this property. このプロパティを使用して、カスタムでないランドマークの種類から設定される既定の名前を上書きすることもできます。You can also use this property to override the default names from the non-custom landmark types.

AutomationProperties.HeadingLevel を使用して、UI 要素を Level1Level9 の特定のレベルの見出しとして設定します。Use AutomationProperties.HeadingLevel to set the UI element as a heading of a specific level from Level1 through Level9.