UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

いままでは毎週金曜日にある週1回の出社日に勉強会を行っていましたが、参加の手軽さも考えて2025年11月25日のリモートワークの日に社内勉強会を開催しました。

今回はそのときの内容を紹介します。

勉強会の内容

今回の社内勉強会の内容は「ウェブアクセシビリティ」です。
障害者差別解消法の改正が2024年4月1日にあったこともあり、最近はいままで以上にアクセシビリティについて聞く機会が増えました。

しかし、アクセシビリティ対応をしようとすると、かなり広範囲にわたって考える必要があります。

• デザインの話
  • 色やコントラスト比
  • 文章やラベリング
  • コンテンツの在り方
• コーディングの話
  • 適切なマークアップ
  • 画像のalt属性
  • WAI-ARIAの知識

デザイナーが頑張って対応しようとしても、コーダーが対応しなければアクセシビリティ対応はできませんし、その逆も然りです。

そこで、今回は「デザインとコーディング 両方の観点からアクセシビリティについて考える」というタイトルで、ある程度網羅的にアクセシビリティについて共有することを目的にしました。

職域に関係無く「こういうことに気をつけないといけないよね」を共有できれば、会社としてアクセシビリティ対応を進めていく第一歩になるのではないか？と考えたからです。

実際の内容

ここからは、実際のスライドの一部を紹介します。

内容をある程度網羅的にしたのでスライド枚数は139枚になり、いままでの勉強会以上に準備に時間がかかりましたが、私自身の整理にもなりました。

アクセシビリティ重要視の背景

まずは2024年4月1日に改正された障害者差別解消法について話すことから始めました。

障害者差別解消法の下記3つについて、噛み砕いて説明しています。

1. 不当な差別的取扱いの禁止
2. 合理的配慮の提供
3. 環境の整備

行政と事業者での義務と努力義務の違いにも触れながら、できる限り具体例を挟むように意識しました。

アクセシビリティの重要性も話した上で、とはいえ綺麗事ばかりも言ってられないよねという話題にも触れました。

例えば、弊社の場合は初期段階の開発に関わる場合もあります。
予算も限られた状況で「まずはお試しで開発を進めたい」という人に対して、「アクセシビリティが大事なんです！」と伝えても「そうは言ってもねぇ……」となるのは当然です。

予算もスケジュールも限りがありますから、状況に応じてどのレベルまで対応するかは変わると思っています。
ただ、時間や予算をかけずにできることもあります。

最初から意識できることは作るついでにやっておくと、後々ラクになることもたくさんあります。
そのために、今回の勉強会の知識を活用して欲しいと伝えました。

アクセシビリティの深掘り

「そもそもアクセシビリティってなに？」を深掘るために、よく似た概念のユーザビリティとの比較を用意しました。

アクセシビリティが「Access」から来ているのに対して、ユーザビリティは「Use」からきています。
つまり、アクセシビリティはそもそもアクセスできるかどうかなのに対して、ユーザビリティは想定ユーザーが使いやすいかどうかです。

そして、ユーザビリティはアクセシビリティが確保された前提です。
そもそもアクセスできないと使えないため、使いやすいも使いにくいもありません。

ウェブアクセシビリティの定義

次はウェブアクセシビリティについてです。
2015年にW3Cの定義の間違いが指摘され、障害者だけでなく誰もがウェブを使えるようにするのがアクセシビリティだと言われるようになりました。

現代はさまざまな方法でウェブにアクセスします。
私自身、目が疲れたときは音声読み上げ機能を使って記事を聞くこともありますし、マウス操作が面倒な場合はできるかぎりキーボードを使います。

また、一時的障害についても触れました。
障害と聞くと障害者をイメージしてしまいますが、「酔っ払っていて認知機能が落ちる」「眼鏡を忘れてきたので文字がよく見えない」など、一時的障害は誰にでも発生します。

さまざまな方法で、さまざまな状態の人がウェブにアクセスします。
これらを広くカバーして、誰もがウェブを使えるようにするのがウェブアクセシビリティです。

デザインから考える

まずは色の選択について話しました。
色覚多様性の人は日本人男性の場合は約20人に1人いるそうです。思っていたよりも多いと感じました。

色覚多様性シミュレーターを使って、どのように見え方が変わるのかを共有しました。
そして、「色だけで判断させない」対応が必要です。

次はそのままの流れで色のコントラスト比です。
デザイナーの方は見たことある人も多いと思いますが、今回は少し深いところまで知っておくだけでも面白いかもと思い、計算方法にも触れています。

個人的に面白かったのが、途中に出てくる係数です。
人間は緑色は明るく感じて、青は暗く感じる傾向にあるそうで、それに合わせて係数も緑の値は大きく、青は小さくなっています。

ちゃんと人間の特性を考慮している部分が見えて面白かったです。

最近はFigma公式でコントラスト比のチェック機能がついているので、コントラスト比はかなりラクに確認できるようになりました。

次はUD（ユニバーサルデザイン）フォントについてです。
ウェブフォントとして使う場合に使いやすいGoogle Fontsに収録されているBIZ UDゴシックを紹介しました。

次はラベルです。
「詳しくはこちら」や「もっと見る」ではなく、クリックするとどうなるのかが分かるようにラベルをつける必要があります。

次は文章についてです。
「やさしい日本語」という、文法や言葉のレベルに配慮した日本語のことで、現在行政や医療機関で重要視されています。

例えば、「土足厳禁」と言われても、日本語に不慣れな人は分からないかもしれません。
「靴を脱いでください」と言われた方が日常会話に沿っています。

やさしい日本語に限らず、分かりやすい文章を書くのも1つのスキルだと思います。
普段のチャットコミュニケーションもラクになります。

個人的に分かりやすい文章だと思っているPinterestの利用規約も紹介しています。

次は文章構造です。
「デザイナーが考えるの？」「コーダーの仕事では？」と思う人もいるかもしれませんが、コーディング時にはデザインが確定してしまっていることもあるため、手遅れになってしまうパターンがあります。

また、文章構造を考えることはデザインにも役立つはずです。
情報設計という意味で、見出しを考えて何をどのレベルで出すか考えていきます。

コーディングから考える

次はコーディングです。
基本的なところからですが、アクセシビリティ関係なく、まずは正しいマークアップを行うことが大切です。

2025年現在でもたまに「HTML5で……」と聞くことがあります。
しかし、HTML5は2021年1月28日に廃止され、現在はHTML Living Standardに変わっています。

最新情報はここを見るのと、「HTML5」「HTML5.〇」のような概念がなくなり、どんどん更新されていくというのも注意が必要です。

次はalt属性に関してです。
絶対に何か文字を入力しておかないといけないと思う人もいるのですが、装飾用の画像などは「alt=””」のように空文字にしておくことも可能です。

画像には「雰囲気を伝えるための画像」や「説明用の画像」など、目的がいくつか存在します。
個人的には「alt属性内の文章が読まれないことによって、得られる情報に差ができないか？」を考えるのが判断基準として良いんじゃないかと考えています。

WAI-ARIAについても触れていますが、ここまでやり出すと時間がかかりそうなのと、デザイナーがどこまで知っておくべきなのかも悩んだ結果、今回は「こういうものがある」程度にとどめています。

WAI-ARIAに関して深掘った勉強会も今後できると良いかもしれません。

あとはスクリーンリーダーの対応ということで、字間調整をスペースでやったり、アッパーケースはCSSで設定するなども紹介しました。
知っているか知らないかの差ですが、こういった細かい部分も大切です。

最近はAIもあるので、AIで全部やってもらえると考えてしまいがちですが、そもそも知らないとAIの成果物を正しく評価・判断できません。

フォローアップ

いままでの社内勉強会と同様、社内ポータルに勉強会用のページを作り、スライドや撮影した動画を編集してアップするなども行いました。
これで今後新しいメンバーが入ってきたときにも共有がしやすくなります。

また、今回は途中で紹介したリンクが多く、もっと知りたい人向けに他で公開されているアクセシビリティガイドラインも紹介したので、それらもフォローアップとしてまとめました。

---

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！