Help us understand the problem. What is going on with this article?

「はじめまして!Webアクセシビリティ」を社内で宣伝してみた

More than 1 year has passed since last update.

新卒2年目、エキサイト婚活エキサイトフレンズの開発を主に担当しているこがです。

はじめに

ちょうど1年前に下記のアドベントカレンダーをエキサイト Advent Calendar 2017で書きました。
前年Qiita : はじめまして!Webアクセシビリティ

今年は、

をメインに書いていきたいと思います。

どうやって取り組んでいけばいいか

誰がどの段階からWebアクセシビリティを考慮していくのか

まずは私の所属するチームでの通常のサービスの開発手順を考えてみます。

  1. プロデューサーが新機能・改修内容をまとめた仕様をエンジニアに渡して一緒に相談をしながら仕様を詰める。
  2. エンジニアが仕様をもとに開発を行う。
  3. ある程度の開発が形になってきた段階でデザイナーさんとデザインを検討しながら調整する。

普段は上記のように開発を行っています。

この流れではWebアクセシビリティについてはどの段階で取り組めばいいのでしょうか?

私が思うには、1.の仕様を詰めるもっとその前段階でやるべきだと考えています。
参考書籍にも書いていますが、方針がないとそもそも取り組みようがありません。しかし未知の知識であると「=導入に手間がかかるものと」エンジニアだけでなくプロデューサーでも感じてしまいとっつきにくいです。1

上記を解決するために、チーム内での最低限の方針を固めるのは1つの良い方法かと思います。
しかし、このこと自体が厳かにされてしまい後回しにされてしまうかと思います。

WebアクセシビリティはWCAG2.0等の規格で達成基準が詳細に決められているのでまずはそれについて詳しく記述します。

WCAG2.0 達成基準

WCAG2.0(Web Content Accessibility Guidelines 2.0) はW3Cで勧告されているものであり、その内容が日本語に翻訳されたサイトがあります。2

WCAG2.0では下記のように3つの達成基準が設けられています。

  • レベルA: 最低限の基準
  • レベルAA: 望ましい基準
  • レベルAAA: 発展的な基準

3段階の基準がありますが、まずチームでの最低限の方針としてガイドラインに落とし込むにはレベルAで十分かと思います。
レベルAは最低限の基準であり、これを満たせていないコンテンツは、環境によっては全くアクセスできなくなることがあります。どんなサイトでもこの基準を満たすべきです。

気をつけたい点

ただ、Webアクセシビリティに取り組んでいく上で1つだけどうしても避けたいことがあります。
それは「手段が目的になってしまうこと」です。

よりアクセシブルにするために、目に見えやすい項目ばかりに力を入れたり、逆に基準を満たさないコンテンツ自体を削除したりすることも可能です。
しかし、これらが本当にやりたいことでしょうか?これはしっかりと目的が定まっていないことも一因となります。そうならないためにも、Webアクセシビリティに取り組むことだけがメインにならないように気をつけなければなりません。

私たちが提供し続けるものはユーザーに満足にサービスを使ってもらうことです。

弊社で「はじめまして!Webアクセシビリティ」

先日エキサイトで行われたexcite open beerbash & LT会 #05で発表しました!

(資料 : はじめまして!Webアクセシビリティ

感想

前年のアドベントカレンダーだけでは、私の思いの丈は伝えきれず、、😢
今回発表が終わったあとにもたくさんの意見を頂いて少しはエンジニアのみなさんにも興味を持ってもらえたかなと思います。
今回はエンジニア向けのイベントでの発表だけだったので、次は実際に取り組んでいけたらなと感じました。

発表の準備をするにあたってデザイニングWebアクセシビリティ1を読了して、Webアクセシビリティに取り組むことでWebサービス自体の質を向上させることにもつなげることができる内容ばかりでした。

Q&A

発表が終わったあとにたくさんの方にFBいただきましたので、覚えている限りピックアップしてみたいと思います。

Webアクセシビリティは日本語で言ったらどういう言い回しになるの?

私もはっきりは分かりませんが、素直に「Webアクセス可能性」とかになるかと思います。
アクセシビリティという言葉自体、 access + able = accessibility であるので、アクセスできること=可能性に近いニュアンスだと思います。

エンジニアのLTでこういう内容やったことないからとっても楽しいね

純粋に嬉しかったです!それと同時にエンジニアでも新しい技術を学び続けることも大事ですが、ユーザーを増やすこと、ユーザーに快適にサービスを使ってもらうことなどもっと他の観点でも勉強し続けていきたいと思いました。

他のサイトで、このサイトはWebアクセシビリティに取り組んでいるサイトとかってありますか?

たくさんあると思いますが、実際にサイトを見ながら「このサイトめっちゃWebアクセシビリティに取り組んでいる!」という感覚にはあまりなったことがないです。
よくよく考えてみたら、「このサイトタップしにくいなぁ」とか「ナビゲーションが曖昧だなぁ」と思うことは多々あります。逆に考えてみたらそうならないためのWebサイトを作っていくことが大事なんじゃないかなぁと考えさせられた質問でした。

label要素は、単にラベルもクリックできるようにするだけかと思っていました。

もちろんラベルとチェックボックスの紐づけをするという意味では間違っていません。
ですが、それ以上にスクリーンリーダーで読み上げる際にどのチェックボックスに紐付いているかなどWebアクセシビリティにも関わるような側面もあるので覚えておくと違う観点でも実装できるのではないかと思います。

おわりに

去年から対して進歩はしていないですが、今回の発表でもっともっと取り組んでいきたいと思いました。
来年の目標は社内のサービスで何かしらガイドラインを策定することです。
これからもずっと続けていきます、続けていきましょう!

ありがとうございました!


  1. デザイニングWebアクセシビリティ -アクセシブルな設計やコンテンツ制作のアプローチ- 太田良典、伊原力也 著 

  2. Web Content Accessibility Guidelines (WCAG) 2.0 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした