マークアップをアクセシビリティの観点から見直してみる。【ver.0.3】

medium.com

  • internationalization → i18n
  • localization → l10n
  • accessibility → a11y [new!]

なんでもありだな、とは思った。

記事の中で便利なツールが紹介されていたので、それについて先に書いておく。

下のtota11yブックマークレットになっているので、ツールバードラッグアンドドロップして欲しい。

tota11y

アクセシビリティのチェックをしたいページを開いてこれを実行すると、下の画像のように画面左下にメガネマークが表示される。

f:id:KazmaArakaki:20170513233500j:plain

メガネマークをクリックするといくつかの項目が表示されるので、チェックしたい項目を選択すると、自動的にアクセシビリティのチェックが行われ、結果が表示される。

f:id:KazmaArakaki:20170513233719j:plain

詳細はこちら。

khan.github.io

それでは冒頭の記事を参考にマークアップを見直していく。

僕のHTMLに関係ない項目についても要点だけメモしておく。

<html>タグにlang属性をつける

Telling the browser which language you are using in your document has many benefits. It’s good for SEO, it helps third-party translation tools and browsers to identify the right language and dictionary.

スクリーンリーダの音声が滑らかになる例もあげている。

Screen reader demo: lang attribute - YouTube

ということで

<!-- BEFORE -->
<html>

<!-- AFTER -->
<html lang="ja">

hidden属性を使って要素を隠す

知らなかった!hidden属性つけるだけで要素が隠れる!CSS記述不要!

<p>これは見える段落</p>

<p hidden>これは見えない段落</p>

<img>タグにはalt属性をつける(空文字でも)

alt=""は無駄な記述ではなく、「情報が無い」ことを明示する役割があるらしい。

ボタンが必要なときは<button>タグを使う

<div>を無理やりCSSでボタン風にするのはよくない。

hタグを正しく使う

<h1>の直後に<h3><h4>を置かない、など。

landmarkを意識したマークアップをする

スクリーンリーダによっては、セクション毎に読み飛ばしていく機能がついている事がある。

その読み飛ばしの目印になるのがlandmarkである。

ざっくりまとめると「セクション意識してマークアップしましょう」という事になりそうだが、さらに付け加えてARIAという標準が存在する。

Web アプリケーションと ARIA の FAQ - Accessibility | MDN

「え、ここまでする必要ある。。。?」

というのが僕のARIAに対する感想なので、ここら辺はアクセシビリティに対する情熱とかターゲットユーザーとかいろんなコストとかとのトレードオフになるのかな。

てかこれ全部マークアップに実装してるページがあったら教えて欲しいくらい。

Formのマークアップを頑張る

正直<form>タグはうっとうしい。勝手に画面遷移させようとするところが超絶うっとうしい。

そろそろみんなAJAXじゃないの?これこそ<div role="form"></div>の出番では?JSで値とるときめんどいのか?

index.html

もともとのコード量が少ないから頑張って読んだけどたいして改善するところも無かった。。。

てかこれlang="ja"でいいのか。。。?

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>My Portfolio</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header class="header">
    <h1 class="header-title">Kazma Arakaki</h1>

    <p class="header-description">Unengaged</p>
  </header>

  <main class="main">
    <h2 class="topic">
      <span class="underlay">I like</span>
    </h2>

    <ul class="list">
      <li>Manga, Anime</li>

      <li>JavaScript</li>
    </ul>

    <h2 class="topic">
      <span class="underlay">Contact</span>
    </h2>

    <ul class="list">
      <li><a href="mailto:twi1ightmessenger1988@gmail.com">Gmail</a></li>

      <li><a href="https://twitter.com/KazmaArakaki" target="_blank">Twitter</a></li>
    </ul>
  </main>

  <footer class="footer">
    <p class="footer-paragraph">
      <small class="footer-copyright">© KAZMA ARAKAKI ALL RIGHTS RESERVED.</small>
    </p>
  </footer>
</body>
</html>