オーバーレイ ファクトシート
Webアクセシビリティ オーバーレイとは何ですか？オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード（多くはJavaScript）を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
アクセシビリティ | SmartHR Design System
アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取
freeeが挑戦するインクルーシブデザイン UXリサーチとアクセシビリティの交点とは？ - ポップインサイト
本日はfreeeが挑戦するインクルーシブデザインというテーマでお話させていただきます。インクルーシブデザインについて簡単に説明すると、多くのユーザの中でも普段はメインのターゲットにしないような人から示唆を得て、結果的に皆がより使いやすくなるものにしていくという考え方です。 本日はアクセシビリティというところからはじまり、どのようにインクルーシブデザインに取り組むに至ったのかという経緯をお話していきます。 簡単に自己紹介させていただきますと、私は伊原力也と申します。freee株式会社でデザインリサーチチームというチームのマネージャーをやっています。もともとデザイン会社のビジネス・アーキテクツという会社で13年間、フロントエンドやプロジェクトマネージャーや情報設計、インフォメーションアーキテクトなどをしていました。 そして2017年にfreeeに入社した当初はUXデザイナーをしていたのですが、
“アプリUIあるある”な6つのNGアイコン 見積り・経費精算SaaSを例に専門家が解説
連載：徹底解剖！ SaaSのUI／UX 本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジ（東京都世田谷区）が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。 第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。 アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。 今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと
フォーム入力不備の情報提示 (スクリーンリーダーのユーザーにも伝わるように) | Accessible & Usable
公開日 : 2015年4月7日 カテゴリー : アクセシビリティ / ユーザビリティ ウェブサイトのフォームで、入力に不備がある場合、問題となっている箇所および修正方法をユーザーに提示する必要があります。そのような情報は当然ながら、支援技術 (スクリーンリーダーなど) のユーザーにも伝わらなければなりません。 WCAG 2.0 / JIS X8341-3:2010 では、以下の規定があります。 入力エラーが自動的に発見された場合は、エラーとなっている箇所を特定し、そのエラーをテキストで説明しなければならない。 出典 : JIS X8341-3:2010「7.3.1.1 入力エラー箇所の特定に関する達成基準」(等級A) 入力エラーが自動的に発見された場合は、その修正方法が明らかであれば、その方法を利用者に提示しなければならない。ただし、セキュリティ又はコンテンツの目的を損なう場合は除く。 出
prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN
no-preference システムが把握している設定をユーザーが行っていないことを示します。 reduce 前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。 Firefox では、 reduce の要求は以下の場合に尊重されます。 GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。 他にも、 gtk-enable-animations = false を GTK 3 configuration file の [Settings] に追加する方法もあります。 Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメ
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
インクルーシブデザインの原則（「Inclusive Design Principles」日本語訳）
この「インクルーシブデザインの原則」は、利用者を最優先に考えることです。永続的な障害がある利用者、一時的または状況的な困難に直面している利用者、あるいは能力が変化してゆく利用者 (つまり、私たちみんな) のニーズに合わせてデザインすることです。 ここに掲げた原則は、デザイナー、ユーザーエクスペリエンスの専門家、開発者、プロダクトオーナー、プランナー、イノベーター、アーティスト、思想家など、ウェブサイトやアプリケーションの設計と開発に携わるあらゆる人に向けて、インクルーシブデザインに対する幅広いアプローチを提供することを目的としています。 あなたの作ったインターフェースがすべての人に同等の体験を提供できるようにして、利用者がそれぞれのニーズに合った手段を用いても、コンテンツ品質が損われることなくタスクを達成できるようにしましょう。 詳しい説明 置かれている状況、選択する手段、利用する文脈など
アクセシビリティからデザインを学ぼう
福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。 これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。 アクセシビリティとは Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般
英国内務省 (UK Home Office) によるウェブアクセシビリティの「べき/べからず」ポスター | Accessible & Usable
公開日 : 2018年11月19日 (2023年7月19日 更新) カテゴリー : アクセシビリティ 英国政府 (GOV.UK) は、世界的に見てもっとも積極的にアクセシビリティに取り組んでいる中央政府のひとつという印象ですが (たとえば、「Make your public sector website or app accessible」というガイダンスを提供していたり、「Accessibility in government」というブログを展開していたりします)、先日 UK Home Office (英国内務省) が、ウェブアクセシビリティの「べき/べからず (Dos/Don'ts)」をまとめた啓発ポスターを制作していることを知りました。GitHub で公開されているので、ご紹介したいと思います。 ウェブアクセシビリティの「べき/べからず」ポスター (UK Home Office) 障
色に頼らないビジュアル表現を考える | mkasumi.com
実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ
セキュリティとUXの◯◯な関係 - 参加記 - debiruはてなメモ
「セキュリティとUX」のイベント 2017年6月9日(金)に開催されたセキュリティとUXの◯◯な関係に参加してきました。 「セキュリティとUXの◯◯な関係 - すれ違い続けた二人の運命の邂逅（かいこう）～セキュリティとUXは本当にトレードオフなのか」というテーマで、ビジネス・アーキテクツ(BA)の太田さん、徳丸本の徳丸さん、ヤフーの日野さんの3人が講演してくれました。 80人の参加枠に260人ほどが応募され主催側もこの人数は想定外だったとのことでしたが、追加されたレポートするぞ枠で参加したので、ここでレポートしておきます。 （執筆後のコメント）なんだかずいぶんと長くなってしまいました。読みたいところだけを読むと良さそうです。 （6月13日追記：他の方の記事はセキュリティとUXの◯◯な関係 - 資料一覧 - connpass にまとめられています） 「セキュリティとUX」のイベント セッショ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
