すべての利用者にとって入力しやすいウェブフォームの設計原則を、イギリス手話で解説するTetraLogicalのシリーズ動画。
シェアックリップ
シェアされたアックリップです。
そのほかの #フォーム ピックアップ
HTMLフォーム設計の基礎講座。textareaとinputの使い分け、labelとの関連付けを解説。入力データの性質に応じた要素選択が、セマンティックHTMLとアクセシビリティの基礎であることを教える。
HTMLの`<input type="email">`がメールアドレス入力欄の意味を持つことや、`type="text"`との違い、labelとの関連付けなどHTMLの意味論を解説する記事。
メール再送信ボタンのアクセシブルなUIパターンを解説。idle・sending・sent・cooldown・error の5つの状態を明確に示し、スクリーンリーダーユーザーにも「待機中」「送信中」「再試行まであと24秒」といった情報が伝わるReactコンポーネントの実装方法を提示する。
セマンティックHTMLの重要性とスクリーンリーダーへの影響を解説。著者のポートフォリオサイト監査で発見した3つの問題——画像のalt属性欠落、フォームラベルの接続不良、見出し階層のスキップ——と修正方法を紹介する。
Lighthouse と axe で頻出するアクセシビリティエラー(代替テキスト・色コントラスト・ボタン名前・フォームラベル)の意味と修正方法を解説する。
RTL(アラビア語など)とLTR(英語など)の双言語サイトに必要な設計・開発・QAチェックリスト。ドキュメント構造、タイポグラフィ、アイコン、フォーム、数値表示、コンテンツ、検索メタデータ、モバイル実機テストまでをカバー。
そのほかの #キーボード操作 ピックアップ
アンチアクセシビリティ
聴衆を交えながら、スクリーンリーダーとキーボード操作でコンピューターを制御する方法を実演。ブラインドタッチ、ディスプレイが壊れたときの対応など、視覚に依存しない操作の実践的な重要性を示す。
Windows アプリの操作を画面上のキーボードラベルで選ぶ Fluent Search の Screen Search 機能を解説。UI Automation と画像認識を使い分け、ブラウザのみでなくデスクトップアプリ全般に対応する実装方法。
ローカルAI(Gemma 3 4B)を用いてWeb要素のアクセシブル名を自動提案し、キーボード操作を補完するChrome拡張機能。スクリーンリーダー対応で、ブラウザ側のみで動作。
トーストノーティフィケーション(操作結果を伝える一時的な画面上メッセージ)をアクセシブルに設計するための実践的な指針。キーボード・スクリーンリーダーでのテスト方法、フォーカス管理、メッセージの文脈、重要アクションのページ内配置など。
MCP Appsはクライアント内にUIをレンダリングする。アクセシビリティ対策を欠くと機能が利用できなくなり、テキスト説明は機能を代替できない。ウェブアプリと異なるテスト上の課題を解説する。
A 3D-printed, miniature keyboard — small enough to use lying in bed — built for one purpose: talking
寝たままコンピュータと対話するために、3D プリント技術で製作された小型キーボードを紹介する。
そのほかの #聴覚障害・聞こえの困りごと ピックアップ
(引用)きこえない親をもつ子ども「コーダ」という言葉は広く知られるようになりましたが、きこえない親を守るいい子、というイメージを抱かれがちです。親との会話や学校での悩み、通訳の負担、進路や恋愛、そして、親の老い。コーダが担うものは置かれた環境によりさまざまです。本書は、自身もコーダである著者が、数十人のコーダの<語り>から見えた「問い」を整理しQ&A形式でまとめた一冊です。正解を示すのではなく、自分の歩み…
ディスレクシア、聴覚障害、認知・知能検査など、多様な学習者を支える英語教育について学べる全国大会。理論と実践を深め、英語教育と特別支援教育の関係者や保護者が対象。
聴覚障害者との共創を通じたインクルーシブデザイン体験ワークショップ。
橋本紗貴×伊藤史人 講演会 ~見えない。聞こえない。それでも、学ぶ。挑む。~
盲ろう・四肢麻痺のある特別支援学校教諭が、支援技術を活用した大学進学から教員採用試験、さらなる夢への挑戦を語る。本人と支援技術研究者による対談で、テクノロジーと人的支援が可能性をどう広げるかを探る。
インクルーシブ経営者サミット2026
身体障害を持ちながら事業を築いてきた経営者たちの挑戦を通じて、多様な視点から生まれる事業や社会への貢献を発信するカンファレンス。
第4回 シアターリーブラ 『ぼくが生きてる、ふたつの世界』
ろう者・難聴者の子(コーダ)が、聴者と聴覚障害者の二つの世界のあいだで生きることの葛藤を描く映画。手話や視線、表情を駆使したコミュニケーションが見どころ。バリアフリー字幕版で上映。
そのほかの #WAI-ARIA ピックアップ
ARIA(aria-label)が不要な場合とネイティブ要素(button)を使うべき理由を、具体的なコード例で説明する。ARIA はセマンティクスを置き換えるのではなく追加するべきという考え方を提示している。
ネイティブ button 要素のセマンティック属性による accessible name の正しい実装と、aria-label が不要な場合について、コード例で解説する。
HTMLのセマンティックタグ(header、nav、mainなど)の使い方を、アクセシビリティの観点から解説。スクリーンリーダーと検索エンジンにとって意味のある構造を実装するための基礎。
HTMLフォーム設計の基礎講座。textareaとinputの使い分け、labelとの関連付けを解説。入力データの性質に応じた要素選択が、セマンティックHTMLとアクセシビリティの基礎であることを教える。
トーストノーティフィケーション(操作結果を伝える一時的な画面上メッセージ)をアクセシブルに設計するための実践的な指針。キーボード・スクリーンリーダーでのテスト方法、フォーカス管理、メッセージの文脈、重要アクションのページ内配置など。
HTML ネイティブ要素が持つアクセシビリティの仕組みを理解せず、ARIA を無分別に追加する慣行の問題を指摘。自動スキャナが同じ解決策を異なる状況に適用する理由と、aria-label が要素内容をオーバーライドすることの危険性を解説。
そのほかの #ガイドライン ピックアップ
企業の複数 Web サイトのガバナンス診断方法論。外形診断とヒアリングの 2 層アプローチ、計測・個人情報・アクセシビリティなど 6 つの診断観点、見えない統制を「なし」と誤報告しない所見の書き方を解説。
Webアクセシビリティ対応の相談を案件として組み立てるフロー。調査・提案・試験から翌年点検まで、実務的に進めるステップを、A11yWorkFlowツールのサンプル資料を交えて解説する。
ウェブアクセシビリティを始める人向けの書籍を、初学者向けから実装・テスト・インクルーシブデザインまで段階別に体系的に紹介。各書籍の特徴・対象読者・媒体情報を解説し、個人での開始にも組織導入にも対応できるリソース紹介。
デジタル庁デザインシステムの活用方法。「見やすくする」がコントラスト比などで具体的に定義でき、入力欄設計やエラーメッセージの扱いまで実装レベルでガイドされる。Figma・HTML・React サンプルも提供される、組織で共有できる設計資料。
ブログに掲載する表の設計方法を解説する。W3C WAIのガイドラインに基づき、行と列の見出しを明確に決めることで、セルの意味が自明になる表を作成する方法を述べる。AIへの依頼文とチェックリスト付き。
日本のウェブアクセシビリティ規格JIS X 8341-3を解説。知覚可能・操作可能・理解可能・堅ろうの4つの原則と12のガイドライン、61の達成基準について、WAIC委員長が詳しく説明。