アクセシビリティ対応したカラー設計でもっとメールを読みやすく！ Yahoo!メールのリニューアル事例
実際に適用している画面はこちらです。 あえてブラウザ用のルールを定義した部分 一方で、ブラウザという媒体の特性による最適化をした箇所もあります。 アプリはメインのナビゲーションやツールバーのボタンはブランドカラーの赤を使うことが多かったのですが、それをブラウザでそのまま適用するとエラーのように見えてしまいました。アプリの場合はその世界の中で完結するので、独自のデザインルールがあっても受け入れられやすいのですが、ブラウザの場合はページを行き来できるため、全く異なるデザインルールと共存していることになります。 そのため、リンクは青、エラーは赤など一般的に認知されているデザインルールと異なる使い方をする場合は、特に注意が必要になることがわかりました。 上記の点をふまえ、スマートフォン版Yahoo!メールではメインのボタンは黒としました。また、黒を使うときにはタップできることがわかるよう、ボタンの
支援技術別動作検証報告： 複雑な画像への代替テキストの提案 | アクセシビリティBlog | ミツエーリンクス
Webサイトのアクセシビリティのチェックを行っているとバランスの悪い代替テキストに出会うことがあります。 例えば、複雑なフロー図に「フロー」という代替テキストのみが記述されているようなケースです。もしその画像以外にフローに関する説明がない場合、「フロー」という文言からだけでは、フローの具体的な内容を理解することは出来ません。本来であれば、alt属性にはフロー図に書かれた内容を記述する必要があるでしょう。 一方、画像に含まれる情報をすべて記載しているにもかかわらず、理解しにくい代替テキストとなるケースも存在します。グラフに対する代替テキストを例に見てみましょう。下記は画像上の情報をすべてalt属性に記述したケースです。 音声読み上げ環境では、alt属性に設定されたテキストは、1行に羅列された状態で読み上げられます。次々読み上げられる情報を頭で記憶しながら聞かねばならないため、代替テキストが長
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
