Qiita アクセシビリティ改善プロジェクトの進捗報告 ~ 2024年

## はじめに
2024年の4月にQiitaでは、「[アクセシビリティ改善プロジェクトを立ち上げました](https://blog.qiita.com/accessibility-project/)」というBlogを公開しました。

そのBlogの公開から8ヶ月たち、年末ということで、この1年の進捗報告として、
今までやってきたことを紹介していこうと思います！

やったことを発表する上で、Iharaさんのこちらの画像を参考に、社内啓発・プロダクト改善・社外発信・マーケ/サクセス についてまとめようと思います。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今夜のイベント『企業でのアクセシビリティ向上、「成果」をどう考える？』に向け、「Webサービス提供会社における&quot;アクセシビリティの成果&quot;ってこのあたりなのでは？」っていうのを図示してみました。これをベースに話せればと思ってます。席まだあります！<a href="https://t.co/nAwf48DecA">https://t.co/nAwf48DecA</a> <a href="https://twitter.com/hashtag/a11y_talk?src=hash&amp;ref_src=twsrc%5Etfw">#a11y_talk</a> <a href="https://t.co/Ly60iYOOHl">pic.twitter.com/Ly60iYOOHl</a></p>&mdash; Rikiya Ihara / magi (@magi1125) <a href="https://twitter.com/magi1125/status/1717432812624830706?ref_src=twsrc%5Etfw">October 26, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 2024年の振り返り
### 社内啓発
- 社内勉強会
    - [WCAGのガイドライン](https://waic.jp/translations/WCAG22/)
    - [Webアプリケーションアクセシビリティ](https://www.amazon.co.jp/Web%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E2%94%80%E2%94%80%E4%BB%8A%E6%97%A5%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B%E7%8F%BE%E5%A0%B4%E3%81%8B%E3%82%89%E3%81%AE%E6%94%B9%E5%96%84-WEB-DB-PRESS-plus/dp/4297133660)
    - [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)
- 全社スピーチ
    - Qiitaの親会社 エイチームで毎週月曜日に行われている全社MTGで「アクセシビリティ x Ateam People」というテーマで 2週にわたって行いました
    - 資料は公開していないです 🙏

### プロダクト改善
https://qiita.com/release-notes

こちらのリンクにリリース内容がまとめているので、そちらから抜粋して、進めています。

- [アクセシブルなモーダルをリリースしました](https://qiita.com/release-notes/2024-02-02)
- [Qiitaのカラーパレットを変更しました](https://qiita.com/release-notes/2024-02-15)
- [フォローボタンのコントラスト比を改善しました](https://qiita.com/release-notes/2024-03-25)
- [記事カード・質問カードのアクセシビリティを改善しました](https://qiita.com/release-notes/2024-04-16)
- [トレンドページのタグランキング・ユーザーランキングのアクセシビリティを改善しました](https://qiita.com/release-notes/2024-04-17)
- [いいねボタンの読み上げを改善しました](https://qiita.com/release-notes/2024-04-25)
- [ストックボタンのアクセシビリティを改善しました](https://qiita.com/release-notes/2024-05-10)
- [絵文字パネルが矢印キーで移動できるようになりました](https://qiita.com/release-notes/2024-08-15)
- [スクロールバーの色を見やすいように変更しました](https://qiita.com/release-notes/2024-08-29)
- [エディタページのアクセシビリティ改善をしました](https://qiita.com/release-notes/2024-09-12)
- [アドベントカレンダー詳細ページのアクセシビリティを改善しました](https://qiita.com/release-notes/2024-09-13)
- [アドベントカレンダーのランキング・カレンダー一覧ページのアクセシビリティを改善しました](https://qiita.com/release-notes/2024-09-17)
- [アドベントカレンダーページのドロップダウンメニューのアクセシビリティを一部改善しました](https://qiita.com/release-notes/2024-09-17)
- [ランキングアイコンの表記をアクセシビリティを考慮して改善しました](https://qiita.com/release-notes/2024-09-25)
- [質問フィードのUI・アクセシビリティを改善しました](https://qiita.com/release-notes/2024-10-01)
- [ユーザーページ、タグページ、Qiita 表彰プログラムページのドロップダウンのアクセシビリティを改善しました](https://qiita.com/release-notes/2024-10-07)
- [記事ページのドロップダウンメニューのアクセシビリティを改善しました](https://qiita.com/release-notes/2024-10-08)
- [検索結果ページのアクセシビリティ改善・UI変更をしました](https://qiita.com/release-notes/2024-10-09)
- [アドベントカレンダーのカレンダーフィードとカレンダー作成ページのアクセシビリティを改善しました](https://qiita.com/release-notes/2024-10-11)
- [アドベントカレンダートップページのアクセシビリティを改善しました](https://qiita.com/release-notes/2024-10-15)


### 社外発信

- Qiita としての発信
    - [Qiitaのカラーパレットを変更します](https://blog.qiita.com/release-color-pallet/)
    - [アクセシビリティ改善プロジェクトを立ち上げました](https://blog.qiita.com/accessibility-project/)
    - [Qiitaは 「GAAD Japan 2024」 に協賛します](https://blog.qiita.com/gaad-japan-2024/)
- メンバーによる発信
    - @degudegu2510
        - 記事：[Qiitaアクセシビリティ史 ~ Qiitaの歩んできた道 ~](https://qiita.com/degudegu2510/items/4313f361d46e31a53420)
        - 記事：[【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？](https://qiita.com/degudegu2510/items/319226d98e05a348b204)
        - 記事：[【Figma】Code Connect を使ってアクセシブルなコンポーネントを作成する](https://qiita.com/degudegu2510/items/9506917875aab5862651)
        - 記事：[ダークテーマとアクセシビリティの融合したカラートークンの設計](https://qiita.com/degudegu2510/items/d3095fd83dff9e61f54f)
        - 記事：[【アクセシビリティ】一度は目を通しておきたいアクセシビリティ方針 まとめ](https://qiita.com/degudegu2510/items/7f5df00c0fe26dc375b0)
        - 記事：[【アクセシビリティ】非テキストコンテンツのコントラストについて](https://qiita.com/degudegu2510/items/12312e750a7548be1721)
        - スライド：[Qiitaアクセシビリティ史 ~ Qiitaの歩んできた道 ~](https://speakerdeck.com/degudegu2510/qiitaakusesihiriteishi-qiitanobu-ntekitadao)
        - スライド：[ダークテーマとアクセシビリティの融合したカラートークンの設計](https://speakerdeck.com/degudegu2510/dakutematoakusesibiriteinorong-he-sitakaratokunnoshe-ji)
        - スライド：[社内を動かすアクセシビリティ戦略](https://speakerdeck.com/degudegu2510/she-nei-wodong-kasuakusesibiriteizhan-lue)
    - @gilly
        - 記事：[FirefoxのTabキー操作が思うようにできなかったのでChromeと同じようにした話](https://qiita.com/gilly/items/83c80dcf4a2c8d04e84a)
        - 記事：[iPadのTabキー操作でリンク要素にもフォーカスを当てられるように設定した
](https://qiita.com/gilly/items/18f4f5d26c1e26ca71c8)
        - 記事：[SafariのTabキー操作が思うようにできなかったのでChromeと同じようにした話](https://qiita.com/gilly/items/9f137766738890b314ea)
        - 記事：[aria-labelが使えないタグで読み上げを設定したいときの対処方法](https://qiita.com/gilly/items/18456a7812691c9491ad)
        - 記事：[aria-currentの値はいくつかあるけれど、それぞれどのUIで使うとよいのか整理してみた](https://qiita.com/gilly/items/48116c50e918f7fea196)
        - 記事：[アクセシビリティに対応したTooltipってどんな作り？ ― 【前編】 Tooltipの基本と挙動](https://qiita.com/gilly/items/2d3401eb6e869ae88554)
        - 記事：[アクセシビリティに対応したTooltipってどんな作り？ ― 【後編】 Tooltipの読み上げ](https://qiita.com/gilly/items/70e319165383d4b9221)
    - @kabechiyo13
        - 記事：[【小ネタ】VoiceOverで読み上げをチェックしたい頭痛持ちの人へ](https://qiita.com/kabechiyo13/items/57007542f1da8b734cbf)
        - 記事：[Qiitaでアクセシビリティ改善プロジェクトを進めるためにやったこと](https://qiita.com/kabechiyo13/items/c3ff2c12fa154fb9863f)
    - @makoto-ogata@github
        - 記事：[【書評】見えにくい、読みにくい「困った！」を解決するデザイン](https://qiita.com/makoto-ogata@github/items/09b6538a7e501202a92f)
        - 記事：[React Ariaというアクセシビリティに特化したライブラリ](https://qiita.com/makoto-ogata@github/items/5169e45495dbe5b08a10)
        - 記事：[VoiceOverの読み上げを意識したコンポーネントを作成しました](https://qiita.com/makoto-ogata@github/items/1f29085e9395c41708e4)
        - 記事：[A11Yデザインシステムの紹介](https://qiita.com/makoto-ogata@github/items/772e006289dff2604071)

### マーケ/サクセス
Qiitaは、toC向けのサービスなので、社外発信 = マーケティングになりがちで、あまりマーケ・サクセス部分はできてないみたいです。

強いていうなら、これです。

https://qiita.com/official-events/4d9893df2bfd52211392


## 2025年に向けて

+ **社内啓発**
    + 2024年は、プロダクト開発に関わる方への啓蒙はだいぶ進んだと実感しています
    + そのため、2025年は、ビジネスメンバーも巻き込んで、全体的にアクセシビリティに取り組みたいです
+ **プロダクト開発**
    + 2024年は20リリースしましたが、まだまだ改善するところが多い状況です
    + そのため2025年は、2024年以上に開発を進めたいです
+ **社外発信**
    + 2024年は、メンバーの発信も含めいろいろアウトプットしてきたと思います
    + 2025年も引き続きアウトプットし続け、アクセシビリティ分野への発展に貢献したいです
+ **マーケ/サクセス**
    + 2024年は、あまりできてない分野でした
    + そのため2025年は、Qiitaとしてアクセシビリティ分野への発展に貢献できるようにイベントに注力していきたいです


## まとめ

この記事では、Qiitaがこの1年でやってきたこと・来年やっていきたいこと を紹介しました。

引き続きアクセシビリティを改善していきたいので、気になるところがあれば、フィードバックいただけると嬉しいです。

---

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

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

https://twitter.com/degudegu2510