アクセシビリティを推進する 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">コンテンツまでスキップ</a>
</header>

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

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