PowerCMS ブログ

今回はデザインする上でどのようにしてアクセシビリティを確保するのか、というお話をしたいと思います。

アクセシビリティに配慮する、というとどうしても、デザインのトレンドをまったく取り入れられない、そんなイメージがあります。実際はそんなことはありません!
どのような対応をしていけばいいか、ご説明いたします。

全体を把握しやすいデザイン

見えやすく、読みやすい

ページ全体を見えやすくする場合、何に気を付けたらよいのでしょうか?
全体の色や写真、それ以外にそのサイトのイメージを決めるのはフォントです。最近はWebフォントを利用するサイトも増えていますね。
サイトの用途によって使用するフォントは変わってきますが、テキストが多い場合は字が詰まって見えたり漢字が読みにくいフォントは避けたいところです。
それぞれの内容に沿って、文節ごとにマージンをとったり、行間をしっかりとって読みやすいようにしましょう。

見出しの役目

見栄えのいいデザインが良いデザインではありません。デザインには設計する、という意味もあります。
見た目だけではなく構造もしっかりしていることが大事です。建物と一緒ですね。
わかりやすい項目が見出しになっているか、そのページの内容に沿った見出しの内容になっているか、ということも情報取得するには重要になってきます。
見た目や文言が見出しだと一目瞭然にわかれば、ぱっとページを見ただけで情報が入ってきます。文言に限っては、音声で情報取得しているスクリーンリーダー利用時でも同様です。

使う人にやさしいデザイン

読む速度、見たい箇所は人ぞれぞれ

カルーセルを使用しているサイトは多く、クルクルと動いているのを見かけますね。しかし...見たい箇所が過ぎてしまう!ちゃんとみたいのに!人によって読み取れる時間は異なります。
そんな時のために一時停止ボタンをつけます。
トグルで再生ボタンにしておけば、必要に応じて動きやスクロールを再開することもできます。

リンクがリンク、とわかるように

そんなの当たり前!とお思いになるかもしれませんが、意外とリンクとわかるものって少なくないですか?また、見たいキーワードのリンクから来たのに、内容の異なるリンク先に着いたことありませんか?

何も装飾のないテキストの中に下線のリンクテキストがあれば、それがリンクということがわかりますね。しかし、装飾のないテキスト中で下線なしのリンクテキストをマウスオーバーした時に色が赤や青に変化したとします。この場合、テキストとリンクテキストのコントラスト比が不足していたり、似ている色の場合は色の変化はわかりません。
リンクテキスト以外にもバナー画像など、フォーカスインジゲーターやフォーカス移動にともなう形の変化で見た目が変わることで、拡大鏡での使用やキーボード操作で閲覧している人もリンクがどこに移動したのかわかるようになります。マウスオーバーやフォーカス移動の際の視覚的変化を表現した図

まとめ

  • テキストが多いページでは、文節や行間を調整し、読みやすくする。
  • コントラストを保って文字を見えやすくする。
  • 構造をしっかり作ることでページの内容を把握してもらいやすくなる。

これだけでも誰でもページにアクセスしやすくなります。
たくさん情報があってもアクセスして情報を読み取れなければ、意味がありません。
伝えたい情報は確実に届けるようにしましょう!

関連するJIS X 8341-3:2016の達成基準

上で述べてきた中で関連する達成基準をご紹介します。クリックするとW3CのWCAG 2.0解説書の各ページに飛びます。

全体を把握しやすいデザイン
関連するJIS X 8341-3の達成基準

アルファサードのWebアクセシビリティの取り組み

弊社ではWebアクセシビリティ向上への取り組みとして、無償ツールの提供の他、Movable TypeやPowerCMSのプラグインとしてJIS X 8341-3への適合を支援する PowerCMS 8341 の開発や提供を行なっています。今後もよりよいWeb、誰もが利用できるWebの普及に微力ながら貢献していきたいと思います。

参照URL

カテゴリー
PowerCMS 8341その他

MTCommentBody タグには、コメント内に記述されている URL を自動的にリンクに変換してくれる、便利な autolink モディファイアというものがあります。

ただ、この autolink モディファイアは残念ながらグローバル・モディファイアではないので、他の MT タグでは利用できません。

そこで、今回はその autolink モディファイアの機能をグローバル・モディファイアにして、他の MT タグでも使っちゃおうという記事になります。

_autolink モディファイアを利用してみる

早速ですが、AutolinkModifier というグローバル・モディファイアプラグインを作成しました。

こちらのプラグインを設置すると _autolink モディファイアが利用出来るようになります。
(モディファイア名が重複しない様にアンダースコアを付与しています。)

下記の様に記述したテンプレートを再構築すると、後述の通り URL がリンクに置き換わります。

サンプル MTML

_autolink モディファイアを利用するには、値に '1' を設定してください。

<MTSetVarBlock name="text">
<p>PowerCMS - カスタマイズする CMS。 http://www.powercms.jp</p>
<p><a href="http://www.powercms.jp">PowerCMS - カスタマイズする CMS。</a></p>
</MTSetVarBlock>

<$MTVar name="text" _autolink="1"$>

出力される HTML

<p>PowerCMS - カスタマイズする CMS。 <a href="http://www.powercms.jp">http://www.powercms.jp</a></p>
<p><a href="http://www.powercms.jp">PowerCMS - カスタマイズする CMS。</a></p>
  • ※ 上記では説明の為にわざわざ MT 変数を定義して利用していますが、もちろん MTEntryBody 等の MT タグにも利用できます。
  • ※ 元からある <a href="http://www.powercms.jp"> は置き換わらないのもポイントの一つです。

_autolink モディファイアが利用出来ると嬉しいケース

今回の元ネタになっている MTCommentBody タグの様に、『HTML の入力は想定していないが、URL が記載される可能性がある』フィールドに対して設定すると便利だと思います。

例えばですが、PowerCMS のテンプートを実装する際には、実際に運用するユーザの負担を減らす為にカスタムフィールドを作成すると思います。

その際に作成するカスタムフィールドの種類には、PowerCMS の機能である『カスタムフィールド Pro』を利用する事で選択可能になる『エディタ付きテキスト』もありますが、作成する目的(運用するユーザのリテラシーのレベルに合わせる場合等)によってはあえてプレーンのテキストフィールドを選択する方が良い場面もあると思います。

『プレーンテキストでも URL はリンクにしたい』。。。はい!そこで今回の _autolink モディファイアの出番です!

MTCommentBody タグの autolink モディファイアがグローバル・モディファイアではない理由(を想像する)

そもそも MTCommentBody タグではデフォルトで sanitize モディファイアが有効になっています。
ですので、例えばコメント投稿者が <a> タグを入力しても、そのタグは除去されてリンクを表示することが出来ない仕様になっています(明示的に sanitize モディファイアを設定することや、環境変数 GlobalSanitizeSpec を設定することで変更することは可能です)。

その為、デフォルトで sanitize モディファイアが有効になっていない他の MT タグでは想定外の HTML が出力される可能性がある為、MTCommentBody タグ固有のモディファイアになっているのかもしれません。

今回の AutolinkModifier プラグインを利用される時は、前述の理由も頭の片隅に置きながらご利用いただければと思います。

カテゴリー
プラグイン技術情報
投稿者
たはかし

2/15(水) 「会員制サイトを作ろう!」をテーマにハンズオン形式の勉強会を開催します。

概要

PowerCMSで会員制サイトを作成します。
会員登録(メール認証)、会員情報編集、退会、パスワード忘れ、などハンズオンで行います。
具体的には以下のプラグインを予定しています。

  • Membersプラグイン
  • DynamicMTML

応募方法

  • powercms@alfasado.jp まで参加希望のメールをお願いします。

※開催日前日までにご連絡ください。
※参加多数の場合は先着順とさせて頂きます。

参加費

  • 無料

対象

  • PowerCMSで会員サイトを作りたい方
  • PowerCMSの会員サイト機能を知りたい方(興味があれば、どなたでも参加可能です)

日時

  • 2016年2月15日(水) 15-16時

募集人数

  • 4名(既に2名の応募がありますので実質2名になります)

場所

アルファサード東京オフィス
102-0074 東京都千代田区九段南2-4-4 三和九段ビル4F
TEL: 03-3265-8488

講師

  • アルファサード ウェブディレクター 佐藤 聖(サポートとしてベテラン社員も参加します)

持参するもの

  • ノートパソコン(会場にWi-Fi、電源はございます)

事前準備

  • Gmailでメールが受信できること(PowerCMSから送信されるメールは、Gmailで受信確認が取れております)

タイムテーブル

14:45-15:00 受付
15:00-15:50 ハンズオン
15:50-16:00 質疑応答

その他

  • 会場は禁煙で、喫煙室はありません。
  • 飲食は自由です。
  • 入社歴の浅いアルファサード社員も勉強のため参加する予定です。

皆さまのご参加を心よりお待ちしております。

カテゴリー
イベント・セミナー情報
投稿者
さとうせい

ページの先頭へ