デパートアクセシビリティドリルを公開しました！
こんにちは！エンジニアチームの神里です！
突然ですが、アクセシビリティ対応へのアプローチの一環として、デパートアクセシビリティドリル「デパリル」を公開しました！
▼デパートアクセシビリティドリル デパリル
問題の内容はWCAGのシングルAをベースに作成しています。
この一年間、制作物をWebアクセシビリティへ対応していくために、輪読会や情報共有、チェックシートの策定など、エンジニア内でさまざまな取り組みを行ってきました。
ただ、私自身勉強してみて、WCAGにあるテキストは初見の方には少し難しかったり、書籍を購入して勉強するのも少しハードルが高いなと感じていました。
そんな中で、初学者でも気軽にアクセシビリティを勉強できるコンテンツがないか、と思い立ち、デパートアクセシビリティドリルを作成することにしました。
なぜドリルなのか？
わかりやすく情報をまとめているサイトは世の中にたくさん出回っており、読んで勉強するだけならそれで十分です。
ただ、なかなかテキストを読んだだけだと身についていかないことも事実です。
ドリル形式にすれば空いた時間に繰り返し同じ問題を解いていくことで確実に学んだ内容を身につけ、いろんな場面で問題の内容を思い出しながらアクセシビリティに対応していけると思いました。
使用技術
今回Astroというフレームワークを用いて制作を行いました。
なぜAstoroか、というと、単純に流行っていたから、という点と、簡単にSPAの使用感を実現できるView transitionの機能を使ってみたかったから、という点です。
▼Astro ビュートランジションについて
また、pageの公開にはGithub Pagesを利用しました。
Astroで制作したページをGithub Pagesに公開する手順は公式にあるドキュメントを参考にしています。
▼AstroサイトをGitHub Pagesにデプロイする
自分でGithub Pagesを設定するのは初めてだったのですが、パスの設定で少し悩んだものの設定自体は30分もかからず終えることができました。お手軽でいいですね！
その他、Astoroについてのわかりやすい説明は弊社エンジニアの板鼻さんが会社の公式ブログに掲載してくださっています。
▼DEPARTフロントエンドエンジニアの間で話題のAstroをご紹介
今後の展望
ひとまず公開まではしたものの、いくつか元々やりたいと思っていた部分でできていない部分があるため、今後アップデートしていく予定です。
▼アップデート予定
このドリル自体がアクセシビリティ対応できていないので、シングルA準拠のサイトになるように調整
問題数を増やし、トリプルA準拠の問題まで作成
問題がWCAGのどの項目に当てはまるのかなどの参考URLを記載
以上、デパートエンジニアの神里でした！
この記事が気に入ったらサポートをしてみませんか？