画像:#16 Try WordPress

2018年9月24日に開催した「クロコラボ #16 WordPress もくもく会」のレポートです。前回にひきつづき、WordPressに関することを、もくもく試してみました。今回はなんと、四国を超えて関西からの参加者がっ!遠いところからご参加いただき、レポートまで書いてくださり、ありがとうございました。

さて、もくもくした内容をまとめていきます。先日行われたWordCamp Tokyo 2018に参加したので、その振り返りや学んだことを試してみることにしました。参加したセッションのスライドをリストアップしていたのですが、このイベントの直後に、各セッションのスライドがリストアップされていたので、そちらをリンクさせてもらいます。

アクセシビリティのチェックをしてみた

WordCamp Tokyo 2018のセッションのうち、一番印象に残っているのは柴田宣史さんの「事例から見る、アクセシブルな WordPress サイトの運用現場の実際 」でした。そこで、全盲の方がWordPressの更新をされているということを知りました。私は今まで、情報を得る側のウェブページをスクリーンリーダーで読み上げてみることはありましたが、情報を発信する側のもの(WordPressでいうダッシュボード)を読み上げてみたことはありませんでした。自分の中で、記事の更新は難しいという偏見があったのだと思います。柴田さんは、実例から動画を使ってわかりやすく説明してくださいました。

「自分のサイトはどうだろう……」ということで、教えていただいたA11yc アクセシビリティ バリデーションサービスでサイトをチェックしてみました。

大きくは次の3つのErrorやNoticeがありました。

  1. 1. alt属性の値がない(特に古い記事)
  2. 2.「○○ 様」という記述のときに「○○」と「様」の間にスペースいれている場合などの、空白による整形
  3. 3. リンク先があるのにリンク文字列のない要素

1. alt属性の値がない(特に古い記事)

現在ぼちぼち対応中。最近の記事は意識して入れるようにしてたのですが、古い記事は空のものもありました。また、最近の記事でも横に並ぶタイトルと同じものを入れていたり、画像の説明になっていないものもあるので、全体的に見直したいです。

ただ、altに入れる言葉に結構悩む……。確か3年ほど前の岡山WEBクリエイターズさんのセミナーで、澤田望さん(SAWADA STANDARD DESIGN)のセッションを聞いてから、コーディングするときは「写真:○○」「イラスト:〇〇」「図:○○」といった書き方にするようにしたのですが、自分のサイトしてないやないかいっ!!とりあえずそれを統一したとして、どこまでの説明をするのがいいのかが難しいですね。

2. 空白による整形

制作実績の箇所に「○○」と「様」の間に空白を入れていました。そのほうが見やすいかなと思っていたんです。次の説明書きがありました。

「○○」と「様」という使い方ではちゃんと「〇〇さま」と読み上げてくれましたが、空白で整形することで意味が変わってしまい、違う読み方になってしまうこともあるので注意が必要なのですね。気をつけよう。

3. リンク先があるのにリンク文字列のない要素

アイコンフォントを使用している箇所で、次のようなエラーがいくつかありました。

Error:リンク先があるのにリンク文字列のない要素があります
A11yc アクセシビリティ バリデーションサービスで「http://kurokoroll.com」をチェックした結果

 これはもくもく会の少し前にチェックしてて、テキスト入れてCSSで飛ばすのもあかんよなと思ってツイートすると……

そうか!WAI-ARIAだ!「aria-label」でラベルを付けるのか。さすがです。澤田さん、ありがとうございました。

「aria-label=”ページ最上部へ”」を追加して、無事スクリーンリーダーで読み上げられました。

<a class="btn-pagetop" href="#"><i class="fas fa-arrow-circle-up" aria-label="ページ最上部へ"></i></a>

※スクリーンリーダーは、Voice Overを使いました

その他

その他にも次のような内容を話していました。

  • WordCamp Tokyo 2018のお話
  • GDPRについて
  • WordPress.comについて(プラグインやブロガーさんのお話など)
  • 松山駅と松山市駅は違うという話

GDPRについては、先日までIP Geo Blockを使ってアクセスを制限していたのですが、現在はIPアドレスで完全に国がわかるわけじゃないらしいというのと、設定を見てもらうと「それ、サイト重くなってそう……」っていうのを聞いて、Cookie Consentを使って承認をつけることにしました。合わせてプライバシーポリシーも設置しました。

おわりに

WordCamp Tokyo 2018で参加できなかったセッションなどは、また動画が公開されたら順jい見ていきたいと思います。遠方から来ていただいたのに少人数で申し訳なかったですが、逆に話しやすいこともあったり濃い話もできてよかったです。また観光がてらお越しをお待ちしております!

次回は10月24日(水)13:30〜16:30を予定しています。会場の申請完了したら告知いたしますので、よろしくお願いいたします。