アクセシビリティをよくする HTML の機能にはどんなものがある?

草案: このページは完成していません。

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

タブ移動

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

<ul>
  <li><a href="here.html" tabindex="1">Here</a></li>
  <li><a href="there.html" tabindex="3">There</a></li>
  <li><a href="anywhere.html" tabindex="2">Anywhere</a></li>
</ul>

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

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

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

アクセスキー

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

<a href="somepage.html" accesskey="s">Some page</a>

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

<header>
  <h1>The Heading</h1>
  <a href="#content">Skip to content</a>
</header>

<nav>
  <!-- navigation stuff -->
</nav>

<section id="content">
  <!--your content -->
</section>