こんにちは、Engineering Office Teamアシスタントのちいです。
先日、社内でWCAGの勉強会が開かれました。
今回は、WCAGとは何か？から、ガイドライン作成のメリットや先日行われた勉強会の様子についてもお伝えできたらと思います。
結論
- WCAGとは、アクセシビリティ向上のためのガイドライン
- hacomonoでは、アクセシビリティ向上のためWCAGの勉強会を実施
- 開発側から見たWCAG達成における大切なことは、とにかくHTMLを「正しく」書くこと
そもそもWCAGとは
WCAG(Web Content Accessibility Guidelines)とは、ウェブコンテンツをより使いやすくするためのガイドラインです。
このガイドラインに従うことで、様々な障がいのある人に対してコンテンツを使いやすくすることができます。
ガイドライン作成のメリット
ガイドライン作成のメリットとしては、主に以下が挙げられます。
- 身体的障がいがある方や環境的障がいがある状況でも機能を使うことができる。また、障がいがない方、障がいがない状況においてもより使いやすくなる(品質向上)
- アクセシビリティガイドラインの対応状況を公開することによる会社の認知度向上・ブランディング向上
hacomonoはスポーツクラブなどウェルネス業界でご利用いただいているシステムで高齢者のエンドユーザも多く、アクセシビリティが集客効果に直接影響するため近頃社内での注目度が上がっています。
勉強会の目的
今回の勉強会は、ガイドライン作成やWCAGの情報共有を目的として行われました。
デザインチーム主導でメンバーそれぞれが役割別に担当を決め、WCAGについて勉強したことを１人１人共有していく、というスタイルで勉強会を行いました。
参加者インタビュー
ここからは、開発からWCAG勉強会に参加したみゅーとんさん(@_mew_ton)へのインタビューになります。
Q1. 勉強会を受けての感想を教えてください。
A1. 全体的にモチベーションを高く維持できて良かったです。勉強会として枠をとっていたからこそ、忙しくても時間が確保できたと思います。ただ、開発側はなかなか来れる人が少なかったので、もう少し余裕のある時期に行えたらと思いました。あとは、モチベーション維持のためにアバターを使用するなどの工夫を行いました。
Q2. 開発側のWCAG達成のための課題としては、何がありますか？
A2. 開発の視点でいうと、HTMLのタグを仕様通りに書くこと。もしくは、要件に応じた適切なHTMLタグを選択することです。例えば、見出しには <h1> <h2> などの見出し専用のタグを使うなどです。
そうすることでページに書かれている内容をブラウザが認識しやすくなり、読み上げや画像表示も正しく行われるようになります。
ただ、今の hacomono では HTML のタグを目的通りにつかえておらず、 WCAG 達成目標に程遠い状態かと思われます。これを達成するためには、ほとんど書き直しに近い対応が必要なため、どのようにして改善していくか悩みどころでもあります。
Q3. WCAGに興味を持っている人に伝えておきたいことなどありますか？
A3. WEB開発・制作をはじめる前の段階なら、１から立ち上げる時に考慮しておくのが一番楽です。知らずに進めると後で直すのはとても大変なので…。
Q4. これからWCAGを勉強したい方へ伝えたいことはありますか？
A4. 開発者向けになりますが、WCAG の達成基準のうち「配色」や「ラベル」など、静的に検知可能な要素についてをテストするライブラリが node module に公開されているため、まずはテストの導入を！ということです。(例：axe )
まとめ
いかがでしたでしょうか。
まだまだ駆け出しのフェーズではありますが、hacomonoはこれからもアクセシビリティ向上を目指します。
また、アクセシビリティを重視しているコミュニティも数多く存在するため、今後はそういったコミュニティもターゲットにしていけたらと思います。
次回は、ガイドライン作成についてお話させていただけたらと思います。
最後までお付き合いいただき、ありがとうございました。
株式会社hacomonoでは一緒に働く仲間を募集しています！
採用情報や採用ウィッシュリストも是非ご覧ください！
