見出し画像

アクセシビリティやる時に知っておきたかったこと

こんにちは。BX部エンジニアのシノザキです。

先日とあるイベントに登壇し、アクセシビリティの取り組みを話す機会に恵まれました。資料づくりのために取り組みを整理してみたんですが、特に難しいことはやってないな、と気づいたところです。

そうした内容のうち、こういうポイントを最初に知っておいたら楽だったろうな〜という内容をお話ししてみたいと思います。

これからアクセシビリティ対応を考えていこうとしている方の助けになれば幸いです。

専門的な知識が必要?

特別な専門的な知識がなくても、アクセシビリティに取り組むことはできる!と思います。

「HTMLを正しく使ってWebサイトを作る」以上の専門的な知識が必要になる場面は、実はそこまで多くありません。HTMLの意味を考慮して実装する、つまりセマンティックさを心がけるだけで、そのWebサイトのアクセシビリティは格段に向上します。

リンクであれば <a> タグを、ボタンであれば <button> タグをそのまま使えば良いんです。特殊な事情で違ったタグを使わなければならない時に、WAI-ARIAといったもう一歩踏み込んだ知識が必要になってきます。
※WAI-ARIA: アクセシブルな情報をHTMLに追加するための規格

セマンティックなHTMLがアクセシビリティへの最短距離であり、基本的なアクセシビリティを確保するのに極端な専門知識が必要なケースは少ないかな、と考えています(あるに越したことはない)。

クリエイティブと両立は難しい?

そんなことはない、と考えています。

色のユニバーサルデザインを学んでいて知った考え方なんですが、「機能的な役割」と「情緒的な役割」という分類があります。「機能的な役割」はコンテンツや情報を伝えるのに対して、「情緒的な役割」は印象や心理効果を生み出します。

印象や心理効果を目的とした情緒的な役割のデザイン部分までを、必ずしもアクセシブルなコントラスト比に沿わせる必要はないのではないか、と思っています(もちろんやった方が良い)。

見出しテキストをハッキリ見せて機能的な役割を持っていれば、見出しを装飾する要素でコントラスト比を担保していなくても、情報としてはアクセシブルでいられます。

装飾的なテキストのコントラスト比が足りなくても情報は理解できる

「アクセシビリティに配慮したサイト」と聞くと、ほんわかしたテイストで、字が大きくて、くっきりはっきりしてて…。というような、いわゆる「やさしい」デザインを想像されるケースもあります。しかし、アクセシブルでありながらクリエイティブを追求したデザインというのは、設計次第でいくらでも可能だと思います。

出来てないサイトを途中から対応させるのは難しい?

難しくないです。

「HTMLを使用してコンテンツを表示している」というフォーマットさえあれば、いくらでも改善していけると思います。

画像にaltを設定するだけでその画像が何なのかが分かるようになり、コンテンツが伝わるユーザーが増えます。

過剰なCSSリセットを排除するだけで、キーボードコントロールが視覚的にわかる様になり、操作できるユーザーが増えます。

altを1つ書くだけでも伝わるユーザーは増える

アクセシビリティ対応とは特定の規約に準拠するのが目的ではなく、アクセスできるユーザーの裾野を少しでも広げていく努力をすることだと考えています(もちろん規約の準拠を目指したい)。

最初の一歩は小さくても良い

難しくないと書いてきましたが、「そこそこ対応してればそれでオッケー」という意味ではありません。念の為。何かしらの規格の準拠を目指しそれを達成することで、汎用的にアクセシブルな状態を目指すのが正統な対応です。

しかし、そうしたゴールがあまりにも遠いと思ってしまうあまり、最初の一歩を踏み出せないのはもったいないなとも思います。ちょっとした配慮で、仮に100人の人が突然アクセス可能になるとしたら、これはもうやらない手はないですよね。そうしたちょっとした積み重ねを続けることで、最初は難しいと思っていたアクセシビリティ対応が出来ていくんだと思います。

もちろんChatworkのサイトたちもまだまだ対応の道半ばです。少しずつでも対応を進め、多くの人にアクセスしてもらえるサイトにしていきたいと考えています。

なおChatworkでは現在採用に力を入れています。一緒に新しい領域にチャレンジしてみたいという方はぜひ採用サイトをチェックしてみてください。


この記事が気に入ったらサポートをしてみませんか?