目指せWeb標準コーディングとWAI-ARIAの導入

せっかくいろいろとまとめてアウトプットしてみたので、きちんと成果を見れるようにしたいと考えています。そこでWordPressをベースに試しているのですが現状を整理しておきます。

目標設定

  • W3C勧告に準拠
    • Web標準のコーディングを目指します。 
    • Markup, CSS Validation Serviceで確認する
あとはWAI-ARIAの導入やPageSpeedのハイスコアなどありますが、ぬかりなくを目指すと終わらないため努力目標とします。
チャレンジ目標としては、WordPressへの実装です。
  • プラグインは最小限にとどめたい
  • 配布できるようなテーマをめざす
WAI-ARIA 属性の重要な点は、ブラウザーのアクセシビリティ API（スクリーンリーダーはここから情報を取得する）によって提供される情報を除いて、それらはウェブページに何の影響も与えないという点です。 WAI-ARIA はウェブページの構造や DOM に影響を与えませんが、 CSS の要素選択で利用することが可能です。

開発環境

macOS ローカル：Bitnami WordPress

現状

Bitnamiでインストール済みです。 WordPressをBitnamiでチャレンジしてみる
テーマファイルを作成しています。詳細は設置されるWordPressのサイトに書きますが、課題となっている点などを整理しておきます。

Blogger Importerがあるのは助かる

BloggerユーザーにとってBlogger Importerはデータを移行するのに欠かせないプラグインです。 そもそもいろいろとあるのでどれを使うかが問題です。


しかし問題は「次世代画像フォーマットWebP」
知らなかったことに尽きるのですが、画像フォーマット周りで少し面倒なことになってます。
  • 見た目は問題なくImportされたのですがWebP画像はBloggerのサーバ直リンク
  • WebP画像のアップロードができない
  • タグのつもりがカテゴリに
解決すべくその関数を理解するのがもどかしいことになってます。


CSSの変数は勧告候補
SassやLessを使わなくても変数が使えると言えばわかりやすいでしょか？

:root {--off-white:#F2F2F2;}
color: var(--off-white);

テーマファイルのCSSを直接記述するのに都合が良いと思って試したのですが、
だんだん大きくなってきてSassにしました。

最終的なアウトプットは変数を利用しないほうがバイト数は少なくなるのに...
WAIのサイトでは使用されてますが CSS Validation Serviceではエラーになります。


ブログ移行は諦めるか

いずれにせよ、標準コーディングを目指すと、このサイトの記事は修正しなければいけないので多分別のものになるだろう。

とにかく画像のタグを解決しなければならない。

関連記事