やさしいカレンダーその4

１２月１４日はPlone 研究会でした。その１、その2、その3と積み上げてきたものをプレビューしてもらいました。

僕が修正したものは、すべての日付において、西暦と月までよんでしまいます。これは、ユーザビリティとしてはあまり好ましくないことがわかりました。それと、カレンダーの先月、翌月を下に配置しましたが、これも、カレンダーの日付をすべて読み終わってからでないと、先月、翌月に送ることができないのでユーザビリティがよくありません。

では、カレンダーを読み上げブラウザで聞くときに、過不足の無い読み上げ項目はなんだろうか?ということをディスカッションしました。

読み上げ内容と順番(上から読み上げ順)

• テーブルというカレンダーとわかる。
• 何年何月のカレンダーがわかる。
• カレンダーを1カ月戻す
• カレンダーを1カ月送る
• 日日が曜日と対応してわかる
• さらに、カレンダーに登録されたイベントがあることがわかる。
• (当日とわかる)

上記のものを実現するには、以下の改造を施せばよい。

• テーブルタグにサマリーを入れる→Ploneで標準に対応
• 何年何月の項目は、captionタグに変更、左右の先月、翌月リンクは外に出す。
• 先月、翌月のリンクは、tfootタグで囲む。→対応ブラウザは、下に移動する。読み上げブラウザの場合、theadの次に読むようになる。また、タイトルに言葉で先月、翌月と入るようにする。
• 曜日の項目をtdタグからthタグに変更する。また、thタグにabbr属性を追加して、そこに、曜日のフル名称(月曜日など)が入るようにする。

●構造は以下の様になります。

＜TABLE　summary=”カレンダー”＞
　　＜CAPTION＞
　　　　　年　月
　　＜／CAPTION＞
　　＜TFOOT＞
　　　　＜TR＞
　　　　　　＜TD＞《先月＜／TD＞
　　　　　　＜TD＞翌月》＜／TD＞
　　　　＜／TR＞
　　＜／TFOOT＞
　　＜THEAD＞
　　　　＜TR＞
　　　　　　＜TH abbr=”日曜日”＞日＜／TH＞
　　　　　　　　　（日曜～土曜日はいる）
　　　　＜／TR＞
　　＜／THEAD＞
　　＜TBODY＞
　　　　＜TR＞
　　　　　　＜TD＞１＜／TH＞
　　　　　　　　　（日付が入る、1～その月の最終日まで）
　　　　＜／TR＞
　　＜／TBODY＞
<／TABLE>

←イメージ画像

サンプルサイト