タグ

アクセシビリティに関するelm_arataのブックマーク (5)

  • Accessible Rich Internet Applications - MDN

    Accessible Rich Internet Applications (ARIA) はロールや属性の集合で、ウェブコンテンツやウェブアプリケーション(特に JavaScript で開発するもの)を、ハンディキャップを持つ人々にとってよりアクセシブルにする方法を定義します。 ARIA は、アプリケーションで一般的に使用されている対話操作やウィジェットを、他のメカニズムがない場合に支援技術に渡すことができるように HTML を補完します。例えば ARIA は、アクセシビリティのある JavaScript ウィジェット、フォームのヒント、エラーメッセージ、ライブコンテンツ更新などを可能にします。 警告: これらのウィジェットの多くは、現代のブラウザーで完全に対応しています。意味的に正しい HTML 要素が存在するのであれば、 ARIA を使用するよりも、その要素を使用したほうがいいでしょう

    Accessible Rich Internet Applications - MDN
  • プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】

    なにかデザインをはじめるとき、無数にある色から配色を決定するのに頭を悩ませることもあるでしょう。この記事では、適切な配色カラーパレットを決めるのに役立つ8つの基ルールを詳しく紹介します。 コンテンツ目次 1. 色数を制限しよう。 2. 自然からインスピレーションをもらおう。 3. 60−30−10ルールを試してみよう。 4. まずはグレースケールでデザインしよう。 5. 黒色を利用するのは避けよう。 6. 重要性を色のコントラストで表現しよう 7. 色を使ってユーザーの感情を引き出そう。 8. デザインを理解しやすくしよう。 9. ボーナス: デザイナー向け配色ツールまとめ 配色基ルール1 色数を制限しよう。 デザインプロジェクトに配色を適用するには、バランスが重要になります。色数が増えるほどバランスを取るのは難しくなります。配色は最高でも3色までに制限することで、よりよい結果となるで

    プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】
  • WebAIM: Contrast Checker

    Explanation Enter a foreground and background color in RGB hexadecimal format or choose a color using the Color Picker. Enter an Alpha value to adjust the transparency of the foreground color. Use the Lightness slider to adjust the perceived lightness of the color. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast rat

  • 目が不自由な人のネット利用に関する8つの迷信

    目が不自由な人のネット利用に関する8つの迷信最近Webアクセシビリティの記事を読む機会が増えています。その中で、Webページを音声で読み上げるスクリーンリーダー(音声リーダー)についての興味深い記事があったので翻訳してみます。誰もが聞いたことがあるような、アクセシビリティに関するものですが、いくつかは間違った情報として流れているものも多いようです。また、元記事のコメント欄も賑わっていたので、そこにコメントされていたものも抜粋して紹介します。 私はフロントエンドデベロッパーとして、アクセシビリティについてはもちろん聞いた事があり、スクリーンリーダーで読みあげるのに何の問題もない Web コンテンツを作るよう、最善を尽くしてきました。しかし、多くのデベロッパーと同様、実際にスクリーンリーダーを自分で試したことはありませんでした。なんだか難しそうですし、高価だと聞いたこともあったからです。 数ヶ

    目が不自由な人のネット利用に関する8つの迷信
  • 既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針

    アクセシビリティ向上メモ 最初から考慮されているのが一番ですが、そうでもなかったプロダクトに手を入れるときのあるあるを記録します。既存プロダクトはモノが出来上がってしまっているため根治的なリファクタリングよりも基的には省力で済ませたいので、今回書いた対応方法も完璧よりは省力路線です。 HTML やらセマンティクスに関する知識はそれなりにあるつもりでしたが、AT やマシンリーダビリティを念頭に勉強し直すと自分で作ったものも至らなかったなと振り返らざるを得ない今日この頃。初期設計のときの考慮範囲が拡がったように思うので善きかなです。 各項目について、もっと良い解法や誤り等あれば twitter とかでご指摘ください。 1. 画像に alt 属性がない場合 付けましょう。付けます。はい。 昔から基とも言うべき、HTML/CSS 書きとしては耳にたこができるほど言われてきたことなので今更感もあ

    既存 Web アプリケーションのアクセシビリティを向上させるときによくあるヤツと対応方針
  • 1