2024年8月 JavaScript Tech Talk / アクセシビリティ

こんにちは！KEPPLE CREATORS LAB エンジニアの吉田です。
私たちは、月に１度フロントエンドに関連する勉強会をゆるーーく開催しています。

前回に続き、HTMLとCSSを活用して、使いやすさとWebアクセシビリティの向上についてになります。

以前の記事も合わせてご覧いただけますと幸いです！

以前のJavaScript Tech TalkでもCSSの進化が話題になりましたが、2024年6月4日から
ウェブアクセシビリティ義務化により、さらに注目が集まっているようです。

今回も以下の記事を参考に、ウェブアクセシビリティについて議論しました。

ページ内リンクを使用する際、固定ヘッダーがあると見出しやコンテンツがヘッダーと重なることがあります。
この問題は、[id]属性セレクタに固定ヘッダーの高さ分のscroll-margin-blockを指定することで解決できます。これにより、リンク先が見出しから適切な位置に表示されます。

このプロパティは2018年頃から使えるようになり、Safariも2021年に対応したため、現在では幅広く利用可能です。

弊社のプロダクトでこの問題があり、もし以前からこのプロパティを知っていれば、簡単に解決できたかもしれません。
今後、ページ内リンクの実装やデザイン調整を行う際には、scroll-margin-blockを積極的に活用し、ユーザーに快適なナビゲーション体験を提供していきたいと思います。

さらに、scroll-margin-block以外にも、scroll-paddingやscroll-behaviorなど、他にも便利なscroll-*プロパティが多数存在します。これらのプロパティも併せて確認し、必要に応じて活用してみましょう。

タブメニューやアコーディオンの非活性コンテンツを隠す際には、従来のdisplay: none;の代わりにhidden="until-found"属性の使用がおすすめです。

この方法のメリットは、ユーザーがブラウザの検索機能を使用した際に、該当コンテンツが自動で表示される点です。
例えば、Ctrl + Fで検索すると、アコーディオン内のコンテンツが自動で展開され、検索対象が見つかりやすくなります。

なお、hidden="until-found"属性は新しいプロパティであり、最新のブラウザでのみサポートされています。したがって、導入前に対象ブラウザの互換性を確認することをおすすめします。

See the Pen Untitled by Ryotaro Yoshida (@Ryotaro-Yoshida) on CodePen.

translate属性を使用して、ブランド名や特定の表現を翻訳から除外することができます。これにより、製品名や重要なテキストが誤って翻訳されるのを防ぐことが可能です。2023年3月からはFirefoxも対応し、主要なブラウザで利用可能となっています。

ただし、すべての要素に対応しようとすると開発効率が低下するため、本当に翻訳を避けたい要素だけに適用するようにしましょう。

フォーム入力時のautocomplete機能については、利便性とリスクの両面から議論されました。
オートコンプリートを有効にすると、ブラウザに保存された情報で入力が自動的に補完され、ユーザーの入力が簡単になるので、情報の入力がスムーズに行えるという利点があります。

その一方で、オートコンプリート機能が誤動作を引き起こすリスクも存在します。
例えば、共有パソコンで他のユーザーの情報が自動補完されてしまうことや住所の入力など複雑な入力の場合は、オートコンプリートを無効にすることが、より良いユーザー体験を提供する可能性があります。

ユーザーの入力状況を考慮しながら設定することが重要です。

▼以下のリンク先で、autocompleteのプロパティは以下を参考にしてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete#%E5%80%A4

画像の上にテキストを表示する際は、ユーザーがテキストを確実に読めるように、文字色と反対の背景色を設定することが重要です。
画像が表示されない場合にも備えるため、背景色を適切に指定しましょう。

ただ、今回のケースに限らず、常にデフォルトの状態を維持しつつ、必要に応じて調整することが大切です。
弊社では、画像が表示されなかった場合を考慮して、必ず No image を表示させるように運用しています。

まとめ

以上、JavaScript Tech Talkからのハイライトでした。使いやすさとアクセシビリティを向上させるためのこれらのテクニックをぜひ実践してみてください。

KEPPLE CREATORS BLOG