blog

以前作らせていただいた「アトリエ金工やまぐち」様のサイト（ユーザー名：f2303002／pass：tsudatest）を、Webアクセシビリティの観点から改修することにした。
Webアクセシビリティの概念を知る前に作ったサイトなので、解決できる課題が多々存在する。

まずは、Lighthouse・axe DevToolsで機械的に診断してみることにする（miCheckerは動作エラーを起こしたため、一旦パス。解決し次第追記）。

Lighthouseによる評価

• Performance 33%
• Accessibility 96%
• Best Practice 96%
• SEO 100%

Performanceで指摘のあった項目：

• メインスレッド処理の最小化
• 「最大コンテンツの描画」要素
• テキスト圧縮の有効化
• 次世代フォーマットでの画像の配信
• 適切なサイズの画像
• 効率的な画像フォーマット
• 第三者コードの影響を抑えてください
• JavaScript の実行にかかる時間の低減
• 使用していない JavaScript の削減
• CSS の最小化
• 使用していない CSS の削減
• 画像要素で width と height が明示的に指定されていない
• レンダリングを妨げるリソースの除外
• オフスクリーン画像の遅延読み込み
• 最新ブラウザに従来の JavaScript を配信しないようにしてください
• 過大なネットワーク ペイロードの回避

私のレベルではすぐには修正方法を思いつかないものも多々あるため、まず修正内容を以下に絞る。

• アニメーションを減らす
• 画像サイズを見直す

以上2点を修正が終わった時点で再度診断して評価することとする。
（※これを作った当時は、「出来そうな動きはとりあえず軒並み実装練習してみる」が目標だったが、「Webアクセシビリティを考慮する」という現在の目標に合わせ、振る舞いや根本のデザインなども適宜変更する）

Accessibilityで指摘のあった項目：

• リストには、<li> 要素と、スクリプト対応要素（<script> と <template>）以外も含まれています。
• role="" に割り当てられた値は有効な ARIA ロールではありません。

TOPセクションとnewsセクションのswiperが引っかかっているようだが、ulの直下にはliしか無い。「role=group」が問題？
参考に神戸ハーバーランドのトップスライダーを見に行ったところ、Splideというアクセシビリティに配慮したスライダーがあると知ったので、こちらで実装し直して再度診断することにする。
（※エラーの要因が理解できていないという点は別途問題を感じるため、後日再検討することにする）

axe DevToolsによる評価

• Automatic Issues：6
• Guided Issues：0
• Manual Issues：0

指摘のあった項目

• 要素は色のコントラスト比（最低限）の閾値を満たしていなければなりません
• <ul>および<ol>の直下には<li>、<script>または<template>要素のみを含まなければなりません
• スクロール可能な領域はキーボードでアクセスできなければなりません

コントラスト比については目視でもいろいろと気になっている部分なのでデザイン部分から修正する。

二点目についてはLighthouseと同様なので割愛。

三点目についてはnewsセクションが引っかかっているが、こちらもデザイン部分から修正する。

追記（2024/03/25）

「axe DevtoolsもLighthouseも中身はaxe-core」ということを、寡聞にして初めて知る。次回はどちらか一方＋Nu Html Checkerでチェックしていく予定。

→「アトリエ金工やまぐち様アクセシビリティ向上日誌２【目視試験編】」に続きます