Qiitaアクセシビリティ史 ~ Qiitaの歩んできた道 ~ #CSS

はじめに

この記事は、2024年5月20日に開催された、アクセシビリティやるぞ！LT祭り #5 で発表したスライドです。

こんにちは、私はQiita株式会社の出口裕貴です。

普段は、QiitaのPdM 兼デザイングループのマネージャーをしています。
私は、デザイン, フロントエンドに関連する情報を中心に発信しているので、よかったらXのフォローしていただけると嬉しいです。

早速ですが、先日Qiitaでは、「アクセシビリティ改善プロジェクトを立ち上げました」というBlogを公開しました。

このBlogでは、

について紹介しています。

本日は、このブログの内容を中心にQiitaで取り組んできたことについて紹介しようと思います。

今日の話を聞いて、まだアクセシビリティ改善に踏み切れない方々の後押しになると嬉しいです。

Qiitaがアクセシビリティの改善を始めたのは、遡ること4年前、2020年のことです。

その頃Qiitaでは、まだ、セマンティックなマークアップになっていなかったり、

タグにonClickが設定されていたりと、アクセシブルとはほど遠い状態で、社内にもアクセシビリティに詳しい人はいませんでした。

このような状態の中で、「今からアクセシビリティ頑張っていきましょう!」といっても、なかなか人は動いてくれません。

そのため、初めに取り組んだことは、「セマンティックなマークアップにすること」です。セマンティックなマークアップにすることは、アクセシビリティに詳しくないメンバーでも容易に実施できます。

Qiitaでは、進行中のプロジェクトに合わせて、新しく作成したページや改善した機能から、セマンティックなマークアップを意識して実装したり、レビュー時にセマンティックなマークアップになっているかチェックすることで、アクセシビリティ改善への第一歩を歩み始めました。

1年ほど経過すると、よく使われているページは、セマンティックなマークアップになり、Tabキーでフォーカスできる要素にフォーカスが当たるようになっていきました。

次にやったことは、「WCAGの勉強会」です。

これは、デザイナー・エンジニア合同で開催し、毎週持ち回りで、WCAGのガイドラインを読み、内容を発表していくような勉強会を開催しました。
現在では、1度だけではなく、新しく入社者が増えてきた段階で開催し、何周も読み合わせています。

こうすることで、デザイナー・エンジニアがアクセシビリティへのリテラシーが高まり、タスク中の議論や雑談、アウトプットの内容などがアクセシビリティに関連した内容なり、アクセシビリティ改善へのモチベーションが高まってきたと感じました。

そして、次にやったことは、「QiitaアクセシビリティHandbookを作ること」です。
QiitaアクセシビリティHandBookとは、Qiitaのアクセシビリティ対応方針やアクセシビリティに関する知識や情報をまとめた記事です。

この記事は、作業者の知識やスキルに依存せず、開発する全員でアクセシビリティ改善を進められるように作成しています。

この、QiitaアクセシビリティHandBookでは、
「どうしてQiitaがアクセシビリティを改善するのか」や「Qiitaのアクセシビリティ対応方針」・「アクセシビリティ対応していくためのドキュメント」などが記載されています。

⁨⁩ここまでの「セマンティックなマークアップに改善したこと」「WCAGの勉強会を開催した頃」「Qiitaアクセシビリティハンドブックを作成したこと」が、アクセシビリティ改善プロジェクトを立ち上げる前にやったことです。

そして、現在進行中のアクセシビリティ改善プロジェクト⁨では、「デザインシステムの改修」・「アクセシビリティチェック」・「未達成項目の修正」を中心に行なっています。

「アクセシブルなモーダルの実装」・「カラーパレット・カラートークンの変更」

「記事カードのアクセシビリティ改善」・「タグユーザーランキングのアクセシビリティ改善」

このようにQiitaは、まだまだ胸を張って「アクセシビリティできています！」と言えるような段階にはないですが、アクセシビリティの改善に向けて、確実に歩み始めました。

また、今日の発表を聞いて、アクセシビリティ改善に踏み切れない方々の後押しになることを願っています。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。