files/ja/learn/common_questions/html_features_for_accessibility/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

---
title: アクセシビリティをよくする HTML の機能にはどんなものがある？
slug: Learn/Common_questions/HTML_features_for_accessibility
tags:
  - Accessibility
  - Beginner
  - HTML
  - Learn
  - NeedsContent
translation_of: Learn/Common_questions/HTML_features_for_accessibility
---
<p>{{draft}}</p>

<p class="summary">以下のコンテンツは、さまざまな障害を持つ人々にとってウェブページをよりアクセシブルにするために使用できる HTML の特定の機能について説明しています。</p>

<h2 id="Tabbing" name="Tabbing">タブ移動</h2>

<p>ポインティングデバイスを使用しない、または使用できないユーザーは、リンクを <kbd>Tab</kbd> で移動できます。なので、リンクは論理的なタブ移動の順序になっている必要があります。<code>tabindex</code> 属性を使用すると、この順序を定義できます。HTML が線形である場合(そうあるべきなのですが)、論理的なタブ移動の順序は自動的に正しい位置に配置されるはずです。</p>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;&lt;a href="here.html" tabindex="1"&gt;Here&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="there.html" tabindex="3"&gt;There&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="anywhere.html" tabindex="2"&gt;Anywhere&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

<p>この例（これは純粋にデモンストレーションとして使用されています - こうはしないでください）では、タブは "Here" から "Anywhere" 、"There" の順にジャンプします。</p>

<h2 id="Link_Titles" name="Link_Titles">リンクタイトル</h2>

<p>自己記述的ではないリンクがある場合、またはリンク先がより詳細に説明されていることでメリットが得られる場合は、<code>title</code> 属性を使用してリンクに情報を追加できます。</p>

<pre class="brush: html">&lt;p&gt;I'm really bad at writing link text. &lt;a href="inept.html" title="Why I'm rubbish at writing link text: An explanation and an apology."&gt;Click here&lt;/a&gt; to find out more.&lt;/p&gt;</pre>

<h2 id="Access_Keys" name="Access_Keys">アクセスキー</h2>

<p><em>アクセスキー</em>を使用すると、<em>キーボードショートカット</em>をリンクに割り当てることができ、ナビゲーションが簡単になります。通常、ユーザーが <kbd>Alt</kbd> キーまたは <kbd>Ctrl</kbd> キーを押しながらアクセスキーを押すとフォーカスが移動します。正確なキーの組み合わせはプラットフォームによって変わります。</p>

<pre class="brush: html">&lt;a href="somepage.html" accesskey="s"&gt;Some page&lt;/a&gt;</pre>

<h2 id="Skip_Links" name="Skip_Links">スキップリンク</h2>

<p>タブ移動を補助するために、ユーザーがあなたのウェブページの大きな塊を飛び越えることを可能にするリンクを提供することができます。たとえば、ユーザーが多すぎるナビゲーションリンクを飛び越えて、すべてのリンクを巡回するのではなくページのメインコンテンツを読むことができるようにしたい場合があります。</p>

<pre class="brush: html">&lt;header&gt;
  &lt;h1&gt;The Heading&lt;/h1&gt;
  &lt;a href="#content"&gt;Skip to content&lt;/a&gt;
&lt;/header&gt;

&lt;nav&gt;
  &lt;!-- navigation stuff --&gt;
&lt;/nav&gt;

&lt;section id="content"&gt;
  &lt;!--your content --&gt;
&lt;/section&gt;</pre>