• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

Webデザインメモ

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。Webデザインメモ

2017年3月17日(金曜日)  (山本 真里奈)

アイコンを使用する方法と注意点【ユーザービリティでの観点】

サイト制作を進める上で、ユーザービリティからの観点で作成することで、より多くのユーザーに使っていただきやすくなります。

ユーザービリティとは、以下のように定義されます。
「年齢や身体的条件、利用環境に関わらず、全ての人がウェブで提供されている情報にアクセスし、利用できること」
どんな人でも、障壁のないサイト制作を心がけたいものです。


今回は、サイトのユーザービリティを向上させる一つとして、
アイコンの表記をどうすれば良いか、2点簡単にまとめてみました。

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

1)CSSスプライトで表記する場合
CSSスプライトとは、複数の画像をひとつにまとめて、CSSのbackground-positionプロパティで位置を指定することにより表示させる、CSSの技のひとつです。
メリットとしては、画像の数を減らすことによって、サイトの表示を速めることができます。

注意点としては、表示されないと使いにくく箇所は避けたほうがいいということです。
例えば、グローバルナビや、テキストの代替画像、重要な矢印など、それが見えていないと成り立たないような要素を指します。

実は、ハイコントラストモード(弱視など視覚障害者の人向けに、背景を黒くさせる配色)をWindowsで設定した場合、スプライトが表示されないようになっているのです。

なので、そのような重要な画像の場合は、スプライトではなく、imgで配置させた方が良いです。また、スクリーンリーダーで読んでもらえるよう、alt属性に画像の説明を入れます。
装飾や特に重要度が高くないアイコンなど、表示されなくても問題ないような箇所にスプライトを使いましょう。


2)フォントアイコンで表記する場合
Font Awesomeなどのフォントアイコンを使用する場合、スクリーンリーダーの観点から、以下のように設定します。

・alt属性で、代替テキストを提供する:「右矢印」など。これによって、altの中のテキストを、スクリーンリーダーが読んでくれます。

・装飾的なアイコン (たとえば、具体的なラベルがアイコンに隣接して表示されている) 場合は、スクリーン
リーダーが無視する (音声読み上げの対象として認識しない)ようにしておきたいです。

アイコンフォントを表わす HTML 要素の中に「aria hidden="true"」と記述することで、スクリーンリーダーがその箇所をスキップしてくれます。また、:beforeなどの擬似要素でフォントアイコンを指定する場合、speak:none;と指定することにより、読み上げをスキップしてくれます

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


Webサイトのコーディングを、意図したデザイン通りに組むだけでなく、スクリーンリーダーなど支援技術を使った場合でも問題なく閲覧できるか、というところまでを考えたサイト制作ができるようになれたら、と思います。