はじめに
この記事は、2024年5月20日 に開催された、アクセシビリティやるぞ！LT祭り #5 で発表したスライドです。
内容
導入
こんにちは、私はQiita株式会社の出口 裕貴です。
普段は、QiitaのPdM 兼 デザイングループのマネージャーをしています。
私は、デザイン, フロントエンドに関連する情報を中心に発信しているので、よかったらXのフォローしていただけると嬉しいです。
早速ですが、先日Qiitaでは、「アクセシビリティ改善プロジェクトを立ち上げました」というBlogを公開しました。
このBlogでは、
- アクセシビリティの改善に取り組む理由
- これまでの取り組み
- 現在の取り組み
について紹介しています。
本日は、このブログの内容を中心にQiitaで取り組んできたことについて紹介しようと思います。
今日の話を聞いて、まだアクセシビリティ改善に踏み切れない方々の後押しになると嬉しいです。
今までの取り組み ①
Qiitaがアクセシビリティの改善を始めたのは、遡ること4年前、2020年のことです。
その頃Qiitaでは、まだ、セマンティックなマークアップになっていなかったり、
このような状態の中で、「今からアクセシビリティ頑張っていきましょう!」といっても、なかなか人は動いてくれません。
そのため、初めに取り組んだことは、「セマンティックなマークアップにすること」です。セマンティックなマークアップにすることは、アクセシビリティに詳しくないメンバーでも容易に実施できます。
Qiitaでは、進行中のプロジェクトに合わせて、新しく作成したページや改善した機能から、セマンティックなマークアップを意識して実装したり、レビュー時にセマンティックなマークアップになっているかチェックすることで、アクセシビリティ改善への第一歩を歩み始めました。
1年ほど経過すると、よく使われているページは、セマンティックなマークアップになり、Tabキーでフォーカスできる要素にフォーカスが当たるようになっていきました。
今までの取り組み ②
次にやったことは、「WCAGの勉強会」です。
これは、デザイナー・エンジニア合同で開催し、毎週持ち回りで、WCAGのガイドラインを読み、内容を発表していくような勉強会を開催しました。
現在では、1度だけではなく、新しく入社者が増えてきた段階で開催し、何周も読み合わせています。
こうすることで、デザイナー・エンジニアがアクセシビリティへのリテラシーが高まり、タスク中の議論や雑談、アウトプットの内容などがアクセシビリティに関連した内容なり、アクセシビリティ改善へのモチベーションが高まってきたと感じました。
今までの取り組み ③
そして、次にやったことは、「QiitaアクセシビリティHandbookを作ること」です。
QiitaアクセシビリティHandBookとは、Qiitaのアクセシビリティ対応方針やアクセシビリティに関する知識や情報をまとめた記事です。
この記事は、作業者の知識やスキルに依存せず、開発する全員でアクセシビリティ改善を進められるように作成しています。
この、QiitaアクセシビリティHandBookでは、
「どうしてQiitaがアクセシビリティを改善するのか」や「Qiitaのアクセシビリティ対応方針」・「アクセシビリティ対応していくためのドキュメント」などが記載されています。
これまでのまとめ
ここまでの「セマンティックなマークアップに改善したこと」「WCAGの勉強会を開催した頃」「Qiitaアクセシビリティハンドブックを作成したこと」が、アクセシビリティ改善プロジェクトを立ち上げる前にやったことです。
現在やっていること
そして、現在進行中のアクセシビリティ改善プロジェクトでは、「デザインシステムの改修」・「アクセシビリティチェック」・「未達成項目の修正」を中心に行なっています。
「アクセシブルなモーダルの実装」・「カラーパレット・カラートークンの変更」
「記事カードのアクセシビリティ改善」・「タグユーザーランキングのアクセシビリティ改善」
まとめ
このようにQiitaは、まだまだ胸を張って「アクセシビリティできています！」と言えるような段階にはないですが、アクセシビリティの改善に向けて、確実に歩み始めました。
また、今日の発表を聞いて、アクセシビリティ改善に踏み切れない方々の後押しになることを願っています。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。