Webアクセシビリティは他の要素と比べて後回しにされがちである。
しかし、マルチデバイス化が進みつづける中ではとても重要な機能だろう。
Webサイトをマークアップを通じて構造化する手法として、以下のものがある。
サーチエンジンの導入状況や仕様を鑑みると、現時点ではMircodataを導入するのがよさそうだ。
一方、JSON-LDは将来有望な大型新人なので、段階的な移行は考慮したい。
Microdata、RDFs、Microdataを促進するschema.orgの公式サイトはこちら。
概要や導入方法、ドキュメントがまとめられている。
Googleは既に検索結果へスキーマを反映している。
いくつか導入支援ツールも公開されているので、活用したい。
上記記事は概要や実践例をわかりやすくまとめており、参考になった。
ちょっとFirefox拡張書く欲が出てきているので、ちょっとだけ資料を集めた。
現時点でのモダンな書き方なら上記を参考に行えばよさそう。
しかし近未来のうちにWebExtensionsへの移行が計画されているので、いざ書くとなると下記リポジトリやクローム周りの情報を漁っていくことになりそう。
グーグルに正しくインデックスしてもらうため、作成したNodeアプリケーションへsitemap.xmlを追加したい。
清く正しくsitemap.xmlを理解するなら以下を参照。
普段は以下のオンラインジェネレーターを利用し配備していた。
これを利用すれば静的コンテンツは自動的にクロールをし追加してくれるが、動的に追加されるコンテンツはそのたびに作成しなおさなければならないため難儀である。
そこでsitemap.jsを利用しアプリ内でリクエストがあったさいに動的にxmlを作成し発行する仕組みを作った。
ExapmpeにExpressでの使用例が書かれており、Koaでもほぼそのまま流用できた。
Promiseでラップし、Yiedableにすればほぼ完了である。
あとはDBへアクセスしヒットしたコンテンツをsitemap.xmlへ追加すれば完了である。
cssの@font-faceのフォーマットをアップデートした。
これまではFontspring @Font-Face Syntaxに従い以下のように記述していた。
1@font-face { 2 font-family: 'MyFontFamily'; 3 src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 4 url('myfont-webfont.woff2') format('woff2'), 5 url('myfont-webfont.woff') format('woff'), 6 url('myfont-webfont.ttf') format('truetype'), 7 url('myfont-webfont.svg#svgFontName') format('svg'); 8}
対応ブラウザは以下とされている。
| ブラウザ | バージョン | |----|----| | IE | 6+ | | Firefox | 3.5+ | | Chrome | 3.5+ | | Safari | 3+ | | Opera | 11+ | | iOS | 3.2+ | | Android | 2.2+ |
この書式はは2011年に提唱されたもので、2015年ゲイン材のブラウザ情勢からみるとやや冗長に感じる。
よって下記を参考に今回アップデートを図った。
1@font-face { 2 font-family: 'MyFontFamily'; 3 src: url('myfont-webfont.woff2') format('woff2'), 4 url('myfont-webfont.woff') format('woff'), 5 url('myfont-webfont.ttf') format('truetype'); 6}
eotとsvgを削除した。この変更後の対応ブラウザは以下である。
| ブラウザ | バージョン | |----|----| | IE | 9+ | | Firefox | 3.5+ | | Chrome | 3.5+ | | Safari | 3+ | | Opera | 11+ | | iOS | 4.3+ | | Android | 2.2+ |
IE9からはWoffに対応しているので、もう少し時間がたてばTTFも消せるのでは。
Woff2の普及はまだまだこれからといったところだ。
CSS font-familyの記述をアップデートした。
これまでは以下のように指定していた。
1body { 2 font-family: Verdana, Arial, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; 3}
昔どこかで見た記事やソースを参考にたどり着いたと記憶しているが、Windows10へ移行したこともありフォント回りも同様に更新していこうと思う。
上記記事は非常によく考察されており信頼たる内容だと感じたので、これをベースに以下のように設定した。
1body { 2 font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, sans-serif; 3}
MSPゴシックだけはさすがに不要だと思い外させていただいた。
とりあえずこれで様子を見ていこうと思う。