vivit株式会社でhinataというアウトドアメディアの開発を行っている河村と申します。 今回はLighthouseのAccessibilityに関するスコア改善のお話を書こうと思います。
Lighthouseとは
LighthouseとはGoogleが公式に提供しているwebページのための品質監査ツールです。 もともとLighthouseという言葉には「灯台」という意味があり、このツールを使うと以下に記載している5つの項目から特定のWebアプリやWebページをチェックして、その結果を見ながら品質改善をすることができます。
- Performance（ページ読込速度、レスポンスの速さなどの査定）
- Accessibility（ユーザーや検索エンジンのロボットに対して最適な作りになっているか）
- Best Practices（SP向けの品質向上やパフォーマンス低下しない方法の確認）
- SEO（検索結果のランキングに影響する項目の確認）
- Progressive Web App（WebサイトをPWA化するうえで必要な項目の査定）
その中でも今年の6月から改善対策を進めたAccessibilityという項目について話を進めます。
対応前の数値
対応前はこのように36と低い状態でした。 Lighthouseは各項目の問題点も合わせて表示されるので具体的に見ていきます。
警告の項目と具体的な対応
html要素のlang属性に適切な値を設定する
Internationalization and localization - These are opportunities to improve the interpretation of your content by users in different locales. ・<html> element does not have a [lang] attribute
htmlタグにlang属性を追加しました。
<html> → <html lang="ja">
画像要素に適切なalt属性を設定
Names and labels - These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader. ・Image elements do not have [alt] attributes ・Links do not have a discernible name
リンクに十分識別可能な名前（aria-label属性やname属性など）が設定されていないという警告内容でした。 一覧などに配置されるリンクは内容を決めてから対応する方針にしましたので一旦保留として、わかりやすい共通パーツから対応しました。
リストのタグ構成見直し
Tables and lists - These are opportunities to to improve the experience of reading tabular or list data using assistive technology, like a screen reader. ・Lists do not contain only <li> elements and script supporting elements (<script> and <template>). ・List items (<li>) are not contained within <ul> or <ol> parent elements.
「リストの親タグ（olやulタグ）内にliタグ・scriptタグ・templateタグ以外が含まれている」「liタグがulタグもしくはolタグ内に含まれていない」という内容の警告です。 ulタグ直下にdivタグが含まれていたため、タグ構成を見直しました。 またliタグの親がdivタグになっていたため、ulタグに変更しました。
ビューポートやスケーリング設定の見直し
Best practices - These items highlight common accessibility best practices. ・[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5.
<meta name="viewport">タグに関して、user-scalable="no"が設定されているかmaximum-scaleの値が5より小さくなっているという警告内容でしたので、user-scalable="no"を削除しました。
背景色と文字色で十分なコントラスト差をつける（未対応）
Contrast - These are opportunities to improve the legibility of your content. ・Background and foreground colors do not have a sufficient contrast ratio.
デザイナーとの調整が必要だったため今回は一旦見送りましたが、文字が読みやすいようにコントラストをつけてはっきりと見えるようにしてくださいという警告でした。
このような感じでhtmlの書き方について指摘事項が表示されるので、すぐに対応できるものから着手していきました。
対応後の数値
コントラストの調整やリンク要素識別用の名前設定以外を行った結果、90までスコアUPすることができました。
まとめ
Accessibility項目についてはhtmlのコーディングルールに則っていないような指摘項目がほとんどで、実際の対応もタグを書き換えたり属性を追加するだけなので、1つ1つはあまり時間をかけずに対応できました。
ちょっと見直すだけでユーザーにも検索エンジンにもやさしいサイト作りができることがわかりましたので、機会があればlighthouseでスコア計測を行ってみてください。
