ゆいのデザイン事務所

千葉を拠点に、サイト制作とコーディングを承っています。デザインの再現と、誰もが使えるサイトづくりを大切にしています。

WCAG 2.2 の解説連載を毎週水曜に更新。ご相談はサイトのフォームから。

中の人 @YujiN991031

[ゆいのデザイン事務所 @yuinodesign]

ポートフォリオサイトをリニューアルしました。

あわせて、事業所名を「結のデザイン事務所」から「ゆいのデザイン事務所」に改めました。

10 月 9 日から、ウェブアクセシビリティの基準「WCAG 2.2」を 1 項目ずつ解説する連載を始めます。

https://t.co/HsLg8NIsZ2
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

入力欄の薄い灰色の枠。#cccccc と白い背景の比は 1.60:1 で、求められる 3:1 の半分ほどです。枠が見えなければ、どこに入力すればよいか分かりません。

枠、チェックの印、フォーカスの輪郭、アイコン。文字以外の色の決め方をまとめました。

https://t.co/KxThYjBqcz
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

「お申し込みは、右のメニューから」。パソコンでは右にあるメニューが、スマートフォンでは下に回ります。読み上げで聞いている人には、はじめから「右」がありません。

位置や形ではなく、名前で案内する書き方をまとめました。

https://t.co/zB8ldtwpJx
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

入力を間違えた欄の枠が赤くなる。その赤（#d32f2f）と、ふつうの枠の灰色（#767676）の明るさの比は 1.10:1 です。色みが分かりにくい人には、同じ枠に見えています。

色のほかに何を足せばよいかをまとめました。

https://t.co/T5fANlth0l
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

画面に「送信する」と書いてあるボタンなのに、声で「送信する をクリック」と言っても押せない。親切のつもりで足した aria-label が、見えている文字を名前から消しています。

名前を補うときにどこへ足せばよいかをまとめました。

https://t.co/dPvzpeHyKM
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

WCAG 2.2 の達成基準を 1 つずつ解説する連載は、明日 10/21 から、毎週水曜の更新が始まります。いまは導入と、達成基準 11 本の解説を公開しています。症状や、扱うコンテンツから引ける索引もあります。

https://t.co/69dOW76OWe
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

Tab で進むときは問題ないのに、Shift + Tab で戻ると、どこにいるのか分からなくなる。フォーカスが固定ヘッダーの裏に入っています。

scroll-padding の 1 行で直る理由を書きました。

https://t.co/PZgNkJuXxV
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

閉じるボタンを押したのに閉じない。押し間違いは利用者の不注意ではなく、的が小さいか、隣と近すぎるかのどちらかです。

いわゆる「24 × 24」が何の寸法なのか、見た目を変えずに押せる範囲を広げる方法も書いています。

https://t.co/cQBBTx6T1V
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

読み上げソフトには、ページ内のリンクだけを一覧にする操作があります。そこに「詳しくはこちら」が 9 本並んだら、どれを選べばよいか分かりません。

リンクの名前が何から決まるのかを書きました。

https://t.co/Io3WFsujRl
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

入力欄の中に薄く書かれた「お名前」は、文字を打ち始めた瞬間に消えます。ラベルは、入力している間こそ必要です。

ラベル・必須・ヒント・エラーの伝え方を、読み上げソフトでの確認結果とあわせてまとめました。

https://t.co/pSSv2gHiTu
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

見た目は左から並んでいるのに、Tab キーは右から止まる。CSS で見た目だけを入れ替えると、こうなります。

順番が食い違う仕組みと、開いたメニューをどこに置けばよいかを書きました。

https://t.co/zPxr7IzOTN
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

outline: none と書くと、キーボードで操作する人は、自分が今どこにいるのか分からなくなります。

フォーカスの枠を消してはいけない理由を画素の数で示し、:focus と :focus-visible の使い分けをまとめます。

https://t.co/3TPHwnl9Ox
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

マウスを片付けて、Tab キーだけでいつものサイトを一周してみてください。最後まで辿りつけないサイトがあるかも知れません。

メニューが開かない、ボタンで止まらない。その原因と直し方を、実測の結果とあわせて書きました。

https://t.co/jZXzOei6BH
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

サイトのトップを一部変更しました。制作会社、デザイン会社の方から、確定したデザインのコーディングと、アクセシビリティの試験のご相談をお受けしています。WCAG 2.2 のレベル AA を目標に実装します。作りの基準は、解説の連載に書いています。

https://t.co/oiFmPSfZJs

[ゆいのデザイン事務所 @yuinodesign]

div にクリックを付ければ、見た目はボタンになります。しかし機械から見ると、名前も役割もない、ただの箱です。

アイコンだけのボタンへの名前の付け方と、標準の要素で済むかどうかの判断をまとめます。

https://t.co/Mze10zYNco
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

太字で大きくした文字は、見た目は見出しでも、機械にとっては見出しではありません。

見出し・リスト・表・フォームの構造を機械に正しく伝える書き方と、デザインから構造を決める手順を書きました。

https://t.co/oFFumIgFnh
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

alt は「画像の説明」を書く場所ではありません。求められているのは、画像の代わりに置いても同じ役目を果たす文です。

画像ごとに何を書くか、空の alt="" をいつ使うかを、迷わず決められるようにまとめました。

https://t.co/XsMQW4hhLf
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

注釈やフッターの「薄いグレーの文字」は、アクセシビリティの検査で最初に見つかる問題です。

文字と背景の色が足りているかを数値で判定する方法と、デザインの印象を変えずに直す方法を書きました。

https://t.co/wM8kY2jHbh
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

「ウェブアクセシビリティが義務化された」と聞いたことはありませんか。

2024 年 4 月に義務になったのは「合理的配慮の提供」で、ウェブサイトの対応は努力義務です。ただし、放置するほど負担は重くなります。何が義務なのかを整理します。

https://t.co/sSODzbeRry
#アクセシビリティ #WCAG

[ゆいのデザイン事務所 @yuinodesign]

ウェブアクセシビリティの基準「WCAG 2.2」を、1 項目ずつ解説する連載を始めました。

「文字が薄い」「Tab キーで押せない」といった症状から、該当する基準を引けます。レベル A・AA の全 55 項目のうち、まず 11 項目を公開しました。

https://t.co/JFRNLdiI3c
#アクセシビリティ #WCAG