「使える」Webアプリにするには、アクセシブルなUI設計を学びたいデザイナー・デベロッパーにお勧めの良書 -Webアプリケーションアクセシビリティ
アクセシビリティに興味があるけど、何から始めればよいのか分からない、勉強するならしっかり学びたい、そんな人にお勧めの解説書を紹介します。 アクセシビリティに取り組むときに大事なのは、できるところから始めること。本書を読んで、アクセシビリティの本質を正しく理解し、自分のWebアプリやサイトにおける課題をひとつずつ改善できます。 本書は、先月発売されたばかり！ 著者の一人伊原氏は、元BAで私の同僚でした。退社後には東京都新型コロナウイルス感染症対策サイトのアクセシビリティ改善をサポートするなどで活躍しています。本書でもそういった経験を元にしたUIデザインの具体的な事例も非常に多く、制作現場の生きた言葉での解説は分かりやすいと思います。 Amazonでもさっそく、オール5の高評価レビューがたくさんついています。
Adobe Color新機能「色覚異常対応」が便利！問題となる色の組み合わせを簡単に修正できるアクセシビリティツール
毎年5月の第3木曜日アクセシビリティへの理解を促進する日(GAAD)に伴い、Adobe Colorに新機能「色覚異常対応」が備わりました。カラーの組み合わせに対するアクセシビリティを色彩学に基づき、簡単に確認、修正できます。 Adobe Color アクセシビリティツール さっそく使用してみました。 まずは、Adobe Colorにアクセスします。 ※無料で利用できますが、Adobe ID（登録無料）でログインするとカラーパレットを保存でき、Photoshopなどで利用できます。
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。 a11y css reset -GitHub a11y css resetの特徴 a11y css resetの中身 a11y css resetの使い方 a11y css resetの特徴 a11y css resetはWebページをアクセシブルにするために、既定のスタイル定義をリセットするための小さなグローバルルールをまとめたCSSファイルです。 CSSにはアクセシビリティに有用なスタイルが定義されています。例えば、.visually-hiddenではコンテンツを視覚的に隠すのみでなく、スクリーンリーダーでもアクセス可能です。 参考: Writing CSS
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
米国の政府関連サイトのデザイン指針として誕生した、UIデザインに最適化されたフリーフォント -Public Sans
UIのデザインに最適化、シンプルで癖の無い、そしてSIL Open Font Licenseで利用できるサンセリフのフォントを紹介します。 米国の政府関連サイトのデザイン指針として誕生したU.S. Web Design Systemのフォントで、モバイルやアクセシビリティの面を特に重視して制作されたものです。 Public Sans -GitHub Public Sansの特徴 Public Sansのダウンロード Public Sansの特徴 U.S. Web Design Systemは米国の政府関連サイトのデザイン指針として誕生したもので、オープンソースのUIコンポーネントのライブラリや米国連邦政府のWebサイト用のビジュアルスタイルガイドが含まれています。 それに含まれているのが、Public Sansです。SIL Open Font LicenseのLibre Franklinを
あまり知られていない、アクセシビリティに効果があるHTML要素のまとめ
「HTMLは簡単だよ」という声をよく聞きます。 確かに、HTMLは他のプログラミング言語よりも習得が容易であると言うことに同意はしますが、軽く考えるべきではありません。 HTMLは強力なマークアップ言語です。Webアプリケーションに構造を与え、強力なアクセシビリティの利点を提供するために使用できますが、それは適切に使用された場合に限られます。中でも、あまり知られていないHTML要素を紹介します。 10 HTML Elements You Didn't Know You Needed by Emma Wedekind 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Audio要素 Blockquote要素 Output要素 Picture要素 Progress要素 Meter要素 Template要素 Time要素 Video要素
Webサイト・スマホアプリの制作者がカラーとアクセシビリティについて知っておくべきこと
アクセシビリティ、カラーのコントラストは日増しに重要性が高まっています。 Webサイトやスマホアプリなどデジタルメディアのデザインで、コントラストが適切なカラーを簡単に見つけることができるオンラインツールを紹介します。 コントラストが確保されたぎりぎりのグレーなど、自分の使用したい色味で最適なコントラストを見つけることができます。 Color.review Webサイトやスマホアプリなど、デジタルメディアのおけるカラーコントラストの指針はWCAG規格にまとめられており、現在の最新は2.1です。 2.1には、AAとより厳格なAAAの2つのレベルがあります。 AA テキストに必要なコントラストは4.5。見出しと大きなテキストの場合、最小値は3です。 AAA テキストに必要なコントラストは7。見出しと大きなテキストの場合、最小値は4.5です。 ※大きなテキストとは14pt（18.66px）以上の
保存版！デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで
Webサイト、スマホアプリの制作・開発に携わるすべての人に役立つ、200種類以上の有料・無料のデザインツールを紹介します。 定番ツールから最近リリースされた注目のツールまで、便利なツールが揃っています。 Awesome Design Tools -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アクセシビリティのツール アニメーションのツール AR（拡張現実）のツール コラボレーションのツール カラーピッカーのツール デザインのフィードバックツール デザインのハンドオフツール デザインパターンとインスピレーションのツール デザインシステムのツール デザインをコードにするツール エクスペリエンスのモニタリングツール フォントのツール スクリーンショットのツール アイコンのツール イラストのツール 情報アーキテクチャの
色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス
色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。
)
Script Junkie
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. HTML5 and Accessibility Bruce Lawson, Steve Faulkner | May 25, 2011 Accessibility for people with disabilities is a legal responsibility in many countries. It's also the right thing to do, and one of the characteristics distinguishing professional develo
Free Web Accessibility Checklist Desktop Wallpaper (2560x1600)
Free Web Accessibility Checklist Desktop Wallpaper (2560×1600) We’re excited to offer a new freebie today – a Web Accessibility Checklist desktop wallpaper designed by Giovanni Scala from QuicklyCode.com. This wallpaper has a grungy feel and features simple but often forgotten reminders for the accessibility of your website. This wallpaper serves as a helpful tool so that your website is accessibl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
面倒な配色もこれなら簡単に！多くの人に見やすいUI用のカラースケールを生成する無料ツール -Geenes