【アクセシビリティ】アクセシビリティを意識したリンクの作り方

はじめに

みなさんアクセシビリティを意識して開発できていますか？

必要なところにrole属性を記述したり、tabキーでフォーカスができるようにしたりなど、意識しないといけないことも多いです。
そのため、アクセシビリティを完璧にやろうとするのは一苦労です。

ただ、コンポーネントごとに区切って、アクセシビリティを理解しておけば、実装するタイミングに思い出しやすく、アクセシビリティも意識しやすいと思います。

そのため、この記事では「リンク」に焦点を当てて、アクセシビリティを意識したリンクの実装方法とリンクで意識した方がいいアクセシビリティを解説しようと思います。

アクセシビリティを意識したリンクの仕様

⚪︎ リンクとは？

リンクは、内部のリソース・外部のリソースへのインタラクティブな参照を提供するコンポーネントです。
またリンクは、href属性を持つ <a> 要素を使用することを推奨します。

⚪︎ キーボードインタラクション

• Enterキー
  • リンクを実行し、フォーカスをリンクのターゲットに移動する
• Shiftキー + F10キー（任意）
  • リンクのコンテキストメニューを開く

⚪︎ WAI-ARIA の役割、状態、プロパティ

• リンクのテキストを含む要素には、role="link" を設定する

アクセシビリティを意識したリンクの完成形

See the Pen Button Accessibility by でぐぅー | Qiita (@sp_degu) on CodePen.

アクセシビリティを意識したリンクの作り方

1. HTMLを実装する

sample.html

<div class="link-container">
  <a href="https://qiita.com/">Qiita</a>
</div>

２. CSSを実装する

sample.css

body {
  background-color: #212529;
  color: #fff;
  display: grid;
  height: calc(100vh - 40px);
  margin: 0;
  padding: 20px 0;
  place-items: center;
  width: 100vw;
}

.link-container {
  align-items: center;
  background-color: rgb(128 128 128 / .3);
  border-radius: 24px;
  padding: 16px;
  position: relative;
  display: grid;
  min-height: 200px;
  min-width: 300px;
  background-blend-mode: luminosity;
  backdrop-filter: blur(15px);
  &::before {
    background: linear-gradient(135deg, rgb(255 255 255 / .4) 0, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / .1) 100%);
    border: 1.4px solid transparent;
    border-radius: 24px;
    content: "";
    inset: 0;
    position: absolute;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    mask-composite: exclude;
    z-index: -1;
  }
}

a {
  align-items: center;
  background: none;
  border: none;
  border-radius: 100px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  padding: 8px 16px;
  text-decoration: none;
  &:hover {
    background: radial-gradient(34.12% 136.61% at 50% 100%, rgba(94, 94, 94, 0.14) 0%, rgba(94, 94, 94, 0.00) 73.85%), radial-gradient(50% 164.29% at 50% 100%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.00) 60.33%), linear-gradient(0deg, rgba(94, 94, 94, 0.18) 0%, rgba(94, 94, 94, 0.18) 100%), rgba(255, 255, 255, 0.06);
    background-blend-mode: color-dodge, normal, color-dodge, lighten;
  }
}

まとめ

この記事では、「リンク」に焦点を当てて、アクセシビリティを意識したリンクの実装方法とリンクで意識した方がいいアクセシビリティを解説しました。

ぜひこの記事をストックして、リンクを実装する時にアクセシビリティについて思い出してもらえると嬉しいです。

Advent Calendar 2023では、他のコンポーネントにも焦点を当てて、アクセシビリティについても解説しているので、ぜひ購読していてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。