レベルのサイト制作を行ったとき、専門の方から色々と指摘をいただいて、その対応に苦労したり、そんなことしないといけないのか!と思った内容のいくつかを忘れないようにメモしておこうと思います。・・・とその前に、アクセシビリティって何?「アクセシビリティ」の意味と混同しがちな言葉が「ユーザビリティ」です。ユーザビリティとは、W3Cでは次の内容で定義されています。use.特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合いLearnability(学習のしやすさ)、Efficiency(効率の良さ)、Memorability(記憶のしやすさ)、Errors(エラー:誤りの起こしにくさ)、Satisfaction(主観的満足度)の5つの特性を持っていて、この観点から良し悪しを図るものになります。アクセシビリティとは、W3Cで次の内容のとおり説明されています。Web.Webアクセシビリティとは、障害を持つ人々がWebを使用できるということです。このように、アクセシビリティとユーザビリティは全く違うものなのです。アクセシビリティのガイドライン上、ウェブコンテンツを作る上でいくつか守らなければいけない原則があります。その原則を元に、準拠しているかしてないかを判断されるわけです。※ページ下部に参考URLを貼りましたので、アクセシビリティに関する詳細についてはそちらをご確認ください。いうことで、指摘いただいた中で「これは!」と思った内容の幾つかをこれからご紹介します。HTMLの構造は、見出し→内容の順番にしてね例えば、デザインで以下のようなものが上がってきたとします。これをどのようにいつもマークアップしますか?普通に考えると、縦積みのブロック型なので、ざっくりと簡単に書くと以下のような感じになると思います。alt=""><h2>見出し</h2><p>テキストテキスト・・・・</p></div>ところが、アクセシビリティの観点から見るとこれはNGです。次のような指摘を受けます。見出しに関連している画像が見出しより前に記述されています。現在の状態ですと、適切な構造がユーザーに伝わりません。見出しに関連しているコンテンツは見出しよりあとに記述します。よって、HTMLは以下の様に書かないといけません。alt=""><p>テキストテキスト・・・・</p></div>「これでは見出しが画像の上になっちゃう!」と思われるかもしれませんが、そこはCSSでflex等を用いて順番を入れ替えればOKです。アコーディオンの開閉ボタンは、「メニューを開く」、「メニューを閉じる」のテキストを追加してね指摘内容はこうです。スマホの幅の時、メニュー開閉ボタンにaria-label属性を用いて代替情報を提供していますが、CSS無効時などにはその情報を視認できません。「メニューを開く」「メニューを閉じる」といったテキストをbutton要素内に記載してください。各テキストは、メニューの開閉状況に応じて切り替わるようにします。その際、代替情報が冗長になるためaria-label属性は削除します。ん・・・これはどういうことだ?これはつまり、下図のことを言ってます。aria-label属性を使って、そこに「メニューを開く」、「メニューを閉じる」を入れていたのですが、aria-label属性は視認できない情報だからNG、ちゃんとテキストを埋め込むように、ということでした。メニューの開閉状況に応じてテキストを変更するように・・・とのことですので、これはJSを使ってテキストを差し替える処理を入れて対応しました。ちなみに、このアコーディオンで使われる「+」、「ー」アイコンは背景画像を使ってはいけません。次に紹介するその3に該当するため、ちゃんと意味がある様に、ということでimg要素を使う必要があります。新規ウィンドウアイコンは背景画像にしないでimg要素を使ってねアイコンって、背景に敷いたり、:beforeや:afterといった疑似要素を使って付けたりしますよね。意味のあるものにはちゃんと代替テキストを入れないとだめなんですね。これは、img要素によってアイコンを付けました。※ページャーの「前へ」、「次へ」をアイコンにしている場合等も同様です。リストのマークとして使用しているアイコンはCSSを使って出力してねolとか数字になるとまた違うのかもしれませんが、リストアイコンは基本すべてCSSで書き出す必要があります。テキストで「・」とか画像アイコンを使ってはNGだそうです。若干その3との線引が難しい気もしますが・・・とりあえず、読み上げたときに不要なものは書かない!ということなんですね。指定してねはぁ・・・なるほど、と思いました。lang設定をしなさい、ということなんですね。まとめ他にもいっぱい来ていたのですが(パンくずを見出しにするな、とか、ここはolは不適切です、とか・・・)、今回はここまでとします。slickを使ったカルーセルへの指摘対応等について、メモ書きを残したいと思います。試すブラウザfujihara2019.06.13はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。