デジタル庁サイトの気になるアクセシビリティ実装


## 導入
デジタル庁サイトを見ていて
気になったアクセシビリティに関する実装をまとめてみました。

__デジタル庁サイト__

https://www.digital.go.jp/
  

  
## ①SVGアイコンには role="img"
リンクの矢印アイコンやフッターのSNSアイコンなどはインラインSVG要素で実装されています。

SVGアイコンのラッパー要素には `role=”img”` をつけ、
アイコン自体に意味がない場合は `aria-hidden=”true”` をつけています。

![スクリーンショット 2024-10-20 15.01.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612989/a3525849-2b99-b99a-f31b-621ed788d896.png)

アイコンに意味があるときは `aria-label` で指定。
![スクリーンショット 2024-10-20 15.02.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612989/cfd3feab-210a-5e71-ae42-8435acd35420.png)

### SVG and role="img"
MDNの `role=”img”` 項目でも
インラインのSVG要素には `role="img"` を指定して全ての子ノードが読み上げられないようにすることが推奨されています。
> [SVG and role="img"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role#svg_and_roleimg)
> 
> 
> If you are using embedded SVG images in your page, it is a good idea to set `role="img"` on the outer [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role#svg_and_roleimg) element and give it a label. This will cause screen readers to just consider it as a single entity and describe it using the label, rather than trying to read out all the child nodes:
> 
> ページ内に SVG 画像を埋め込んで使用する場合、外側の `<svg>` 要素に role=“img” を設定し、ラベルを与えるのがよいでしょう。こうすることで、スクリーン・リーダーは子ノードすべてを読み上げようとするのではなく、それをただ一つの実体とみなし、ラベルを使って記述するようになります

### SVGとtitle要素
デジタル庁のSVGアイコンでは使われていないですが
他にもSVGには代替テキスト用の [`<title>` 要素](https://developer.mozilla.org/ja/docs/Web/SVG/Element/title)があります。

スクリーンリーダーの組み合わせによっては読み上げられないことがあるみたいなので
`aria-labelledby` で紐づけておいた方がいいです。




こちらはホバーした時にツールチップが表示されるので
視覚的に補足が必要な場合はこちらのやり方がいいかも。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="GRVmpWY" data-pen-title="Untitled" data-user="Right-88" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Right-88/pen/GRVmpWY">
  Untitled</a> by rhrh__8 (<a href="https://codepen.io/Right-88">@Right-88</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 
※ホバーするとツールチップが表示されます
![スクリーンショット 2024-10-20 15.20.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612989/37aeb14c-261d-8b12-ff5d-1932ef41ab88.png)


## ②詳細リンクがテキストで不十分な場合は補足
詳細ページへのリンクボタンには`aria-label`属性で補足をして
読み上げでもなんのリンクかが理解できるようにしています。
![スクリーンショット 2024-10-20 15.39.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612989/c59a7b0e-5c1b-981b-ea7d-b2a0ded71c8a.png)
![スクリーンショット 2024-10-20 15.39.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612989/d9cce854-88cb-049b-bf52-6b07dcee3b76.png)
<small>↑「一覧を見る」だけだと何の一覧ページかわからないので補足</small>


### WCAG 「達成基準2.4.4: リンクの目的」
WCAG の [__「達成基準2.4.4: リンクの目的」__](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html) でもこのように言われています。
- リンクテキストは可能な限り意味を持たせ、追加のコンテキストなしでリンクの目的を特定できるようにすべき
- リンクの目的は、リンクテキスト自体か、リンクに関連付けられたテキストで説明されるべき
- 同じ宛先のリンクには一貫したテキストを使用し、異なる目的や宛先を持つリンクには異なるテキストを使用することがベストプラクティス


## ③ヘッダーロゴとh1
ページごとにヘッダーロゴのアウトラインを変更していました。

- トップページ
トップページはヘッダーロゴが `h1` 。
![スクリーンショット 2024-06-30 20.53.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612989/648f425e-1ee2-0bd9-00db-b74a5db99349.png)


- 下層ページ
下層ページではヘッダーロゴはただのリンクになり
ページタイトルが `h1` になっていました。
![スクリーンショット 2024-06-30 21.03.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612989/f59594ed-c5f2-ecc7-2b0a-d703d941e715.png)

またロゴは画像なので読み上げ用の不可視テキスト「ホーム」が追加されています。

`h1` はページの主要なトピックを説明するものなので
会社のロゴに巻きつけるのは良くないですが
トップページに関しては「デジタル庁」のロゴがトップセクションの見出しになるのがたしかに自然ですね..


## ④パンくずリスト
![スクリーンショット 2024-10-20 16.24.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2612989/14c5d1a9-6123-1cf8-96c2-452c8e521f3e.png)
-  親の `nav` 要素に `aria-label=”現在位置”` を設定
-  リストは`ul`ではなく`ol` を使用
-  現在のページには `aria-current=”page”` 
-  項目間の `>` アイコンには `aria-label=”の中の”`

パンくずリストには`aria-label="現在位置"`をつけて
現在位置を示していることをわかりやすくしています。

また`<ol>`タグについて、[MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/ol)ではこのように書いてあります。
>リスト項目の順序を変更してみてください。意味が変わるようであれば `<ol>` 要素を使用してください。そうでない場合は、 `<ul>` 要素を使用することができます。

番号付きリストのイメージですが順序を表しているパンくずにも使えるんですね。


### aria-current=”page”
`aria-current` 属性はコンテナや関連する要素の集合内の現在の項目を表し、
`page` は「現在のページ」を表します。

https://www.w3.org/TR/wai-aria-1.2/#:~:text=ID%20reference%20list-,aria%2Dcurrent%20state,-Indicates%20the%20element


## ⑤アンカーリンクのスムーススクロール
アンカーのスムーススクロールはCSSの `scroll-behavior: smooth` で実装されています。
```scss:CSS
html {
    scroll-behavior: smooth;
}
```

### scroll-behavior: smoothとデメリット
`scroll-behavior` は
CSSだけでアンカーのスムーススクロールが実装できるプロパティです。

ほぼノーコストでスムーススクロールが実装できますが
以下のようなデメリットがあります。

- デバイスのアニメーション軽減設定に関係なくアニメーションしてしまう
- 外部ページからのリンク、ページ内検索も全てスムーススクロールされるので無効化したいときは別途調整が必要
- Tabによるキーボード操作も全てスムーススクロールされ、連打した時にはページが遅れてスクロールするような形になる

個人的には、一度実装したスムーススクロールは
他の案件でも使い回しができてそこまでコストは変わらないので
JSが無効な環境でスムーススクロールを実装したい時などに使用するのがいい気がします。
```scss:CSS
/* スクリプトが無効の時 */
@media (scripting: none) {
  html {
    scroll-behavior: smooth;
  }
}
```


### アニメーションが必要ないユーザーのための設定
またデジタル庁の `scroll-behavior` は
CSSの `prefers-reduced-motion` メディアクエリを使用して
アニメーション軽減の設定をしていないユーザーのみに適用されるようにしています。
```scss:CSS
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
```


[`prefers-reduced-motion`](https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-reduced-motion)は
ユーザーがシステムで設定しているモーション軽減機能を検知します。
MDNにも載っているように基本的にどの機種でもこの設定はついています。
```markdown
Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメーションを表示する
Windows 7: コントロールパネル > コンピューターの簡単操作センター > コンピューターでの作業に集中しやすくします > 必要のないアニメーションは無効にします (可能な場合)
macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制
iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす
Android 9 以上: 設定 > ユーザー補助 > アニメーションの削除
Firefox では about:config: 数値型の設定項目 ui.prefersReducedMotion を追加し、値を 1 とします。この設定の変更は直ちに効果が現れます。
```

### WCAG __「達成基準2.3.3: インタラクションによるアニメーション」
WCAG の [__「達成基準2.3.3: インタラクションによるアニメーション」__](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html) でもモーションのアクセシビリティについてこのように言われています。
> インタラクションによって引き起こされるモーション・アニメーションは、機能性や伝達される情報にとって不可欠なものでない限り、無効にすることができる。



## おわり

https://design.digital.go.jp/webaccessibility/?tab=policy

デジタル庁は「誰一人取り残されない、人に優しいデジタル化を。」の実現を目指し
デザインシステムにおいても __アクセシビリティを最優先事項__ 
にして構築するほどアクセシビリティに力を入れています。


サイトを眺めているだけでも勉強になりますね...
デザインシステムと合わせて今後も注目していきたいです✨
　　

### 参考

https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook

https://www.tak-dcxi.com/article/how-to-handle-alt-text-for-inline-svg/

https://www.conductor.com/academy/headings/faq/h1/

https://qiita.com/k-fuseya/items/5648cd09e26a0ab2c6b3