インクルーシブHTML + CSS & JavaScript
概要
インクルーシブ（inclusive）とはexclusiveの反対語を意味している。
あらゆるものを排除せずに受け入れると言った意味をしめしている。
本書に関してはアクセシビリティに配慮したwebの実装方法を示した内容になっている。
また、「コーディングwebアクセシビリティ」の続編にあたるため、実際に使われる機能（メニューボタンや登録フォーム）など実績的な内容なり、実務で役にたてることができる内容が記載されている。
まとめるにあたり
実際に使われる機能（メニューボタンや登録フォーム）などの実用的な内容が細かく書かれているため、全てを書くことができない。
その中で大事だと思う考えなどをまとめています。
レスポンシブデザイン
インクルーシブデザインの重要な要素のひとつ。
環境に応じて適応できるドキュメントをデザインすることにより、さまざまなデバイスに対応することができる。
ブレイクポイント
インクルーシブデザインを作るには、特定のデバイスにおけるビューポートを想定するのは無駄が多い。
それぞれのデバイスに対応数にはバリエーションが多いためである。
最初から柔軟なデザインを作り、コンテンツのレイアウトが切り替わるところへブレイクポイント挿入することが望ましい。
シンプルなインターフェイスは使いやすく、ブレイクポイントの管理の手間が省ける。
要素の幅・高さを固定するのではなく柔軟性を持たせ、さまざまなスペースに対応できるデザインを作り基本的な考えを尊重したほうが良い。
拡大縮小を可能にする
viweportを使用することによりレスポンシブデザインは有効になるが、同時にユーザーによるコンテンツの拡大・縮小を無効にしてしまう。
デザイナーが犯すインクルージョン関連の最大のミスとは？という調査で「携帯端末でのピンチによる拡大縮小を禁止している」という回答が群を抜いて多かった。
例として。
<meta name="viewport" content="width=device-width, initialscale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
上記の指定の仕方では拡大縮小ができない。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
拡大縮小ができる上記を使用するのが望ましい。
エイドリアン・ロセッリがリストアップした拡大縮小を無効化にするとインクルージョンが損なわれる理由として。
- テキストが小さすぎて読めない恐れがある。
- 画像の細部を見たいユーザーがいるかもしれない.
- テキストを大きくすると、コピー&ペーストしたい単語を選択しやすくなる。
- 気が散らないように、動く要素を視界の外に追い出したいユーザーがいる。
- 開発者のレスポンシブデザインの作り方がまずいと、ページを利用するために拡大縮小が必要になる。
- ブラウザのバグや奇妙なふるまいのせいで、デフォルトの表示倍率では正しく表示されないことがる。
- ピンチイン・ピンチアウトの動作が拡大縮小以外の意味に解釈されるユーザーが混乱する。
ブラウザもインターフェイスの為、インクルーシブデザインを実現するためには、提供するコンテンツの表示やインタラクションをユーザーが設定することを許容すべきである。
デザイナーが決めることが少ないほどユーザーが決められることが多くなる。
プログレッシブエンハンスメント
レスポンシブデザインと同じく、インクルーシブデザインの土台になる考え方である。
JavaScriptをオフにしているユーザーでも使えるwebアプリケーションをつくると解釈できるが実際にはもっと広い意味がある。
プログレッシブエンハンスメントの目的は強固な基盤を合理的かつ堅牢な形で構築すること。
JavaScriptやcssが利用できない環境で使用できるコンテンツという話ではなく、利用できなくなった理由や期間どういう順序で利用できるようになったかなど様々な事柄が関係してくる。
本書で取り上げている考えは、整形式のセマンティックHTMLの構造をベースとし、JavaScriptとcssでエンハンスメントしてものである。
一時的または常時利用できないユーザーでもコンテンツを利用できるようになりJavaScriptが利用できるかどうかは関係なくセマンティクHTLMはユーザーにインクルーシブな使用を保証し、インタラクションの動作をより効果的なものにする。
実際使う場合はドキュメントの最後に入れる。
そうすることによってスクリプトが実行される前にDOMをレンダリングできるようになるからである。
<scrpit>//エンハンスメント</script>
</body>
ブログ記事
<main>要素
複雑なグリットシステムを組み込む時に
視覚的な構造をくくるのには役に立つがセマンティックな構造には何も意味を持たない。
<div class="grid">
<div class="grid_inner">
<main id="main">
コンテンツ
</main>
</div>
</div>
上記のような構造はセマンティック的には何も意味を持たずコードを複雑かさせているだけである。
以下のコードと同じ意味。
<main id="main">
コンテンツ
</main>
一般的にグリッドシステムを使うことはおすすめできず、複雑で冗長的なマークアップが増加するだけである。
複雑なグリッドレイアウトを構築するにはグリッドシステムは役に立つが、複雑なレイアウトは構築するべきではない。
シンプルなインターフェイスこそがアクセシブルなインターフェイスであり、メンテナブルかつハイパフォーマンスなインターフェイスである。
見出しの構造
h1要素は、ドキュメントの第1レベルでの見出しを表す。
HTML5のセクショニングアルゴリズムでは、bodyもセクションを構成するため、bodyに対する見出しがない状態でのsection要素を使うと最上位セクションに見出しがつけられない状態になる。
<body>
<section>
<h1>最初の見出し</h1>
</section>
</body>
この時のアウトラインは以下のようになる
1.(untitle section)
1-1.最初の見出し
1-2.次の見出し
以下参照
HTML living Standard - 4.3.11.2 Sample outline
https://html.spec.whatwg.org/multipage/sections.html#sample-outlines
mainとh1は似たような機能を提供しているが両方採用されているのは、スクリーンリーダーユーザーが同じではないからである。
行動及び好みに関する非公式の研究結果では、一部の回答者はランドマークナビゲーションを使いこなしているが大半の回答者は見出しを使って移動していた。
また、回答者の何人かは下矢印キーを使ってドキュメントの戦闘から末尾まで移動していると回答している。
ソースの順序は構造の重要な側面であると言える。
プログレッシブエンハンスメントと相互運用性
セマンティック構造は、スクリーンリーダーユーザーにのみメリットをもたらすわけではなく、ブラウザがスタイルシートの読み込みに失敗しても、デフォルトスタイルシートが適用されインターフェイスの主要な要素を認識することができる。
見出しは太文字でセクションの深さを示すフォントサイズになります。
コンテキストでさまざまなニュ力を介して機能するコンテンツは、相互運用性があると言うことができる。
優れたセマンティック構造は、スクリーンリーダー、フィールドリーダー、サーチエンジンなどコンテンツないの構造的な意味を他のパーサーで適切に扱うことができる。
フローシステムの確率
インクルーシブwebデザインの目的は、ユーザーに硬牢でアクセシブルな体験を提供するだけではなくコンテンツへの貢献を後押しすることでもある。
グリットシステムと同じく、フローシステムはcssでレイアウト管理をする。
グリットシステムとは異なり、フローシステムは見出し、段落、リスト、画像といったフロー要素どうしの関係性を1つのカラムだけで再現する。
優れたフローシステムは、要素の順番や組み合わせがどのようなものであっても、要素の並び方が規則的で、読みやすいようになっている。
防御的なコーディングについての注意
WYSIWYGエディタではほぼ必ず意図しないゴミが残ってしまう。
<p></p>
<p></p>
<p></p>
<!-- 際限なく続く -->
このゴミがコンテンツの間隔やバーティカルリズムに影響することがある。
防御的なコーディングを採用して、空の要素を取り除かなくてはいけない。
main :empty {
display: none;
}
display: none;の宣言はマージン含め要素を削除できる。
一般論として、markdownやTextileのような構文を使用しセマンティクな構造化されたコンテンツを作成できことがベストであるが、これらはシンプルな公文でありながら見出しや項目などのセマンティックなHTML要素に対応していので必要に応じたHTMLを書くことができる。
感想
HTML・CSSのパターン集が多く感じられそれがメインなのかなと感じられましたが、インクルーシブ・アクセリビリティなどの知見を勉強できました。
また、キャッチコピーにあったように「ダメ」ではなく「こうしよう！」と書いてあるように、見出し1つにしてもなぜ良くないのか、どうしたらいいのかなど細かく書かれていたので勉強をしなおす再確認するにはよいと感じました。