デジタル庁デザインシステムβ版
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
マルスと「熟練が必要なUI」についての議論
JRの職員がマルスを操作する動画が話題になった。 この動画について、職人性を賞賛する立場と、UIとして問題があるという立場が対立していた。 nobkzさんのこの記事は、「熟練が必要なのはUIとして問題がある」という立場での記述だとおもう。 一連の話題に対して違和感を持ったが、違和感の源泉は明確で、「UIとしてよいかどうか」という立論自体に机上の論理以上のものにならないということもあるが、そもそも「マルスとはどういうシステムなのか」が議論されていないことがおおきい。 わたしもマルスについて名前は知ってはいたものの、具体的にはどういうシステムであるかは知らなかったので、少し調べてみることにした。 マルスについて Twitter(X)で話題になっていたもとの動画はこちらである。 ここだけ取り上げてみて、マルスの良し悪しを論じるのは鉛筆を取り上げて絵の良し悪しを論じるようなものだとおもう。 次の動
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
タブUIをアクセシブルにする
どうも、nano72mknです。 アクセシビリティを意識してタブUIを作ったので、実装時に調べたことやポイントをまとめます。 タブUIについて まず、初めにタブUIと言われて思い浮かべるのは、この形だと思います。 このUIは、２つのパーツに分けることができます。 １つ目は、「タブ」と呼ばれるパーツ ２つ目は、「タブパネル」と呼ばれるパーツ この２つのパーツをがっちゃんこして、タブUIは出来ています。 タブUIをアクセシブルにする roleとaria属性を付与してアクセシビリティ対応をする。 roleを付与する 付与する必要があるものは下記の３つ tab tablist tabpanel tabとtablist タブにはtab、複数のタブを囲っている要素にはtablistのroleを付与する <div id="tab"> <div role="tablist"> <button role="
Apple Vision ProはApple初のゴーグル型ARデバイスで、目線と手の動きで基本操作が可能な一方で、そのほかの操作も可能にするアクセシビリティ機能も充実しています。自身も極度の弱視という視覚障害を抱えているライターのアンドリュー・リーランド氏が、実際にApple Vision Proのアクセシビリティ機能を使っているユーザーや、Apple本社でアクセシビリティ機能の開発に関わったエンジニアに取材しています。 What Is the Apple Vision Pro? A Lifesaver for Disabled Users https://nymag.com/intelligencer/article/apple-vision-pro-disabled-users.html マキシン・コラードさんはカリフォルニア大学サンフランシスコ校で神経科学と医学の博士号課程に在籍する
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
「改正障害者差別解消法」により、2024年4月からウェブアクセシビリティの合理的配慮の提供が義務付けられることになりました。 しかし、企業のサイト担当者の中には「ウェブアクセシビリティとは？」「具体的にどう対応すればいいのか？」と頭を悩ませている方も多いと思います。 ウェブアクセシビリティとは、例えば、動画などにおいて聴覚障害を持ったユーザーでも内容がわかること、 あるいはウェブサイトにおいて色覚特性を持ったユーザーでも情報が不足せずに得られることなど、 障がいの有無にかかわらず、すべての人が等しく同じ情報を得られることです。 インターネットが普及し、様々なユーザーが様々な状況でウェブサイトを閲覧するようになった昨今、 ウェブアクセシビリティを確保することは非常に重要な課題となっています。 そんな中で、今回すべての事業者においてウェブアクセシビリティ対応が必須となります。 このため、未対応
日本企業のアクセシビリティ事例をコツコツと収集している話
日本企業のアクセシビリティ事例を コツコツと収集している話 アクセシビリティやるぞ！LT祭り #5 - 2024-05-20 1
iOS18でCarPlayに新しいアクセシビリティ機能が追加？アイトラッキングなど 2024 6/08 Appleは先月、iOS18でiPhoneとiPadに搭載される多数の新しいアクセシビリティ機能を発表しました。そして今回、同社は視線でiPhoneやiPadを操作する「アイトラッキング」機能の実装や、Vision Proのアップグレードなどに加え、CarPlayにも新しいアクセシビリティ機能を追加する予定であることが明らかとなりました。 iOS18では、音声コントロール、カラーフィルタ、サウンド認識などのアクセシビリティ機能がCarPlayに搭載されるということです。 CarPlayに搭載される予定のアクセシビリティ機能 音声コントロール機能が使えるようになると、ユーザーは声だけでCarPlayおよびアプリの操作ができるようになります。サウンド認識は、車のクラクションやサイレン音などを
QRコードがメールで来る
子の保育園からの連絡で、メールがあって詳しくは添付したファイルを見てくれみたいなことが書いてあったので見てみたところQRコードがバーンと貼ってあった。しかもPDFファイル。どうやってスキャンしてくれたものだろう。 まあPCというかラップトップでメールを開いて、それを携帯電話のカメラで撮ればスキャンはできる。けど携帯電話しかなかったら？ これはちょっと面倒ではないか。 これが画像ファイルなら（Androidなら）QRコードスキャナアプリを入れて画像のインテントを飛ばしてやればいいだろうけれど、PDFだとそうはいかない。ちょっと面倒だけどPDFファイルを表示してあげてスクリーンショットを撮り、それをQRコードスキャナアプリに入れるということになる（Androidnの場合、アプリを入れるよりはGoogle Photosでスクリーンショットを開いてGoogle Lensの機能で解析してもらうとQR
ウェブサイトのアクセシビリティ対応を実施する際は、定められた規格に則ってサイトを改善・構築していかなければならないため、ウェブアクセシビリティチェックツールを使って規格に合った改善ができているかを適宜検証しながら対応作業を行うのが最も効率的な取り組み方になります。 ウェブアクセシビリティの合理的配慮の提供が義務化されたことに伴い、自社サイトのアクセシビリティ対応にチェックツールの導入を検討している事業者やWEB担当者の方も多いと思います。 ウェブアクセシビリティチェックツールは、特定のアクセシビリティに特化したツールからウェブサイト全体のアクセシビリティを包括的にチェックするツールまで様々なものが提供されています。 そこで今回は、ウェブアクセシビリティ対応において広く活用されている下記の８つのチェックツールを紹介します。 ツール①（無料） みんなのアクセシビリティ評価ツール「miCheck
デジタル庁は、障害を理由とする差別の解消の推進に関する法律（平成25年法律第65号）第9条第1項の規定に基づき，「デジタル庁における障害を理由とする差別の解消の推進に関する対応要領」を定めました。 デジタル庁における障害を理由とする差別の解消の推進に関する対応要領は、以下のとおりです。 【ルビなし版】デジタル庁における障害を理由とする差別の解消の推進に関する対応要領（PDF／326KB）【ルビあり版】デジタル庁における障害を理由とする差別の解消の推進に関する対応要領（PDF／689KB）【テキスト形式】デジタル庁における障害を理由とする差別の解消の推進に関する対応要領（Text／21KB）
WCAG 2 の達成基準「テキストの間隔」を検証できるブラウザ拡張機能「Text Spacing Editor」 | Accessible & Usable
公開日 : 2024年3月28日 カテゴリー : アクセシビリティ W3C 勧告の WCAG 2 (Web Content Accessibility Guidelines) には「1.4.12 Text Spacing (テキストの間隔)」という達成基準 (レベル AA) があり、ウェブコンテンツに対して、ユーザーが任意で (可読性を高める意図で) 行間や文字間隔を一定程度広げても、問題なく利用可能にしておくことが求められています。 以下のテキストスタイルプロパティをサポートするマークアップ言語を用いて実装されているコンテンツにおいては、以下をすべて設定し、かつ他のスタイルプロパティを変更しないことによって、コンテンツ又は機能の損失が生じない: 行の間隔 (行送り) をフォントサイズの少なくとも 1.5 倍に設定する 段落に続く間隔をフォントサイズの少なくとも 2 倍に設定する 文字の間
日本アクセシビリティ普及ネットワーク［情報バリアフリーポータルサイト］
本日のトピックス 障害を持つ協力者（個人総数） 93 就労施設・教育施設・ ボランティア団体 8 協力 事業者・企業数 5 協力団体数 1 無料コンテンツ 利用数＋ダウンロード数 10402 有料コンテンツ利用会員数 45 インストール不要！ 専門知識がいらないJIS X 8341-3:2010簡易チェックツールを開発 手軽にアクセシビリティのチェックができるツールを開発・無料公開しました。このチェックツールを活用すれば、HTMLを知らなくても「言語属性が違う」「見出し1が無い」等の技術的なチェックを行えます。 ぜひお気軽にお試しください。 簡易チェックツールへ
ウェブアクセシビリティとは：みんなのウェブ
「ウェブアクセシビリティ」という言葉は、あまり聞き慣れない言葉かもしれません。「ウェブアクセシビリティ」とは、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」を意味します。 ウェブは、高齢者や障害者にとっても、重要な情報源になりつつあります。しかし、実際に提供されているウェブページにはバリアがあり、高齢者や障害者にとって使いにくい、あるいは使えない作りになっているために、内容を知ることさえできないことが少なくありません。 例えば、非常に小さい文字でたくさんの情報を提供しているウェブページは、弱視の人や多くの高齢者が判読できない場合があります。このようなウェブページを「アクセシビリティが確保されていないページ」と言います。 ここでは、ウェブアクセシビリティの概要を理解していただけるよう、基本事項の解説や取組
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユニクロ公式サイトが使えません（ついでにレジも）｜ブラインドライターズ
熟練が必要なUIについて、それがよくない理由と、UIの慣性について
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
Apple Vision Proを障害者が使うためのアクセシビリティ機能について使用者やAppleスタッフにインタビュー
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
サイト担当者が必ず実施すべきウェブアクセシビリティ対応とは？ - ユニウェブ
iOS18でCarPlayに新しいアクセシビリティ機能が追加？アイトラッキングなど - iPhone Mania
担当者が活用すべき８つのウェブアクセシビリティチェックツール - ユニウェブ
デジタル庁における障害を理由とする差別の解消の推進に関する対応要領｜デジタル庁