Ver.2.7.0に向けた管理画面とテーマのWebアクセシビリティ対応

a-blog cms の管理画面、テーマ類のマークアップを担当しているアップルップルの森田です。現在、Ver.2.7.0のリリースに向けて管理画面のWebアクセシビリティ対応とテーマのWebアクセシビリティ対応を行っているので、今回は報告も兼ねてどのような対応をしているのか、一部抜粋してお伝えしたいと思います。

管理画面のWebアクセシビリティ対応については、まずはエントリー編集画面（ユニット）と動的フォーム編集画面の更新画面から対応していく方針です。Ver.2.7.0のβ版では未対応部分が多いですが、正式版リリースまでに対応を予定しています。

そして、テーマについては主にSite2016テーマ、Blog2016テーマをWebアクセシビリティに対応しています。Site2016テーマでは、サードパーティのWebサービスを除いたレベルAAの一部準拠の達成を目標としました。Simple2016、Bootstrap2016 については、Webアクセシビリティ対応をするとコードが複雑になってしまう可能性があるため、それぞれ a-blog cms の学習、 Bootstrap のコードの使いやすさに趣を置いてコードが複雑にならない程度に一部のマークアップの見直しを行いました。

Webアクセシビリティ対応とは？

Webアクセシビリティ対応とは、Webコンテンツをどんな環境でも情報にアクセス可能にする対応のことです。

急にマウスが使えなくなってしまったけれど、なんとか操作したいときにキーボード操作できるような代替の機能を用意しておく、というのがWebアクセシビリティ対応です。ほかにも、数年前まではPC専用サイトが多かったことに対して、最近ではスマートフォンでもWebサイトを閲覧しやすくなりました。Webコンテンツにアクセスしやすくなったので、これもWebアクセシビリティ対応の１つと言えるではないでしょうか。

たとえば、a-blog cms ではおなじみのユニット。こちらの削除ボタンは、以前まで全くアクセシビリティの確保ができていませんでした。

画像をアップロードする

画像をアップロードするカスタムフィールドついて詳しく説明します。
以下で説明しているファイルのカスタムフィールドは、ソースコードの生成はカスタムフィールドメーカーで簡単に作成できます。

画像をアップロードするカスタムフィールドの作成

例）PNGファイルをアップロードするカスタムフィールド（フィールド名：topVisual）

<!-- アップロード済みのファイルのプレビューエリア -->
<!-- BEGIN topVisual@path:veil -->
<img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" /><br />
<input type="hidden" name="topVisual@old" value="{topVisual@path}" />
<input type="hidden" name="topVisual@secret" value="{topVisual@secret}" />
<label for="input-checkbox-topVisual@edit">
<input type="checkbox" name="topVisual@edit" value="delete" id="input-checkbox-topVisual@edit" />
削除
</label><br /><!-- END topVisual@path:veil -->
<!-- イメージファイルをアップロードするフィールド -->
<input type="file" name="topVisual" size="20" />
<input type="hidden" name="field[]" value="topVisual" />
<input type="hidden" name="topVisual:extension" value="image" />
<input type="text" name="topVisual@alt" value="{topVisual@alt}" />
<input type="hidden" name="topVisual@extension" value="png" />
<input type="hidden" name="topVisual@filename" value="topVisual.png" />
<input type="hidden" name="topVisual@width" value="820" />