表にはsummary属性を追加しましょう|ホームページ作成ソフトシリウス

表を作ったらsummary属性を追加しましょう

こんにちは、たけぞーです。

今日はテーブル、というより表を作った時の注意事項です。

ホームページ作成ソフトシリウスにはテーブル作成ツールが用意されており、直感的に表を作る事が可能です。

しかし、たけぞーのように細かい人間には一つ、気になってしまう点があります。

それは、シリウスで生成される表のhtmlにはその表が何の表であるかを示す、summary属性という一文が入っていないことです。

そこでたけぞーは表を作った時は必ずsummary属性を付け足すようにしています。

クローラーに理解しやすいように、そして視覚障害の方等が音声読み上げソフトを利用するときに理解しやすいようにしておくのも、ユーザビリティーの向上、ひいてはSEO対策にもなってくるのではないでしょうか。

summary属性の設置例

それでは適当に表を作ってみましょう。

シリウスの価格と購入特典の有無

シリウス通常版

シリウス上位版

価格

18800円

24800円

購入特典の有無

シリウスが生成するコード

<table class="dsc2item col3" cellspacing="1">

<tbody>
<tr>
<th><p style="text-align:center">シリウスの価格と購入特典の有無</p></th>
<th><p style="text-align:center">シリウス通常版</p></th>
<th><p style="text-align:center">シリウス上位版</p></th>
</tr>
<tr>
<td><p style="text-align:center">価格</p></td>
<td><p style="text-align:center">18800円</p></td>
<td><p style="text-align:center">24800円</p></td>
</tr>
<tr>
<td><p style="text-align:center">購入特典の有無</p></td>
<td><p style="text-align:center">〇</p></td>
<td><p style="text-align:center">〇</p></td>
</tr>
<!-- ★insertRow(<tr><td>項目1</td><td>項目2</td><td>項目3</td></tr>)★ -->
</tbody>
</table>

それではこれにsummary属性を付け加えてみましょう。
summary属性はtable classで始まるタグの一番後ろに書き込みます。

<table class="dsc2item col3" cellspacing="1" summary="シリウス価格表">

<tbody>
<tr>
<th><p style="text-align:center">シリウスの価格と購入特典の有無</p></th>
<th><p style="text-align:center">シリウス通常版</p></th>
<th><p style="text-align:center">シリウス上位版</p></th>
</tr>
<tr>
<td><p style="text-align:center">価格</p></td>
<td><p style="text-align:center">18800円</p></td>
<td><p style="text-align:center">24800円</p></td>
</tr>
<tr>
<td><p style="text-align:center">購入特典の有無</p></td>
<td><p style="text-align:center">〇</p></td>
<td><p style="text-align:center">〇</p></td>
</tr>
<!-- ★insertRow(<tr><td>項目1</td><td>項目2</td><td>項目3</td></tr>)★ -->
</tbody>
</table>

とこんな感じになります。
summary属性はシリウスの記事編集画面の左下に「定型文」という項目があるので登録しておくと使いやすいと思います。

summary属性・下の一文を登録しておくと便利ですよ(^_^)v

summary="ここに説明文"