テーブルタグでアクセシビリティ的にひっかからないようにするには

Question

前提・実現したいこと

テーブルタグで表を作成しました。
用途別に窓口とお問い合わせの電話番号をのせたものです。
スマホでも１列表示で見やすくできました。
しかし、アクセシビリティ的に列と項目との関連性がないということで保存の段階でひっかかります。

・実現したいことは、
用途別の窓口、電話番号が見やすく伝えられ、かつアクセシビリティ的に問題のないものにすることです。

該当のソースコード

         <table class="table01">
                <caption>お問い合わせ窓口</caption>
    <thead>
      <tr>
        <th></th>
        <th>お問い合わせ窓口</th>
        <th>電話番号</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>外来診察・検査・予約</th>
        <td ><p>外来受付</p></td>
        <td ><p>☎<a href="tel:[phone]">0000-00-0000</a></p></td>
      </tr>
      <tr>
        <th>初診</th>
        <td><p>○○支援室</p></td>
        <td><p>☎<a href="tel:[phone]">0000-00-0000</a></p></td>
      </tr>
      <tr>
        <th>リハビリ</th>
        <td ><p>リバビリテーション部</p></td>
        <td><p>☎<a href="0000-00-0000">0000-00-0000</a></p></td>
 
      </tr>
        <tr>
        <th>学校・園<br>福祉サービス事業所からの<br>お問い合わせ</th>
        <td><p>○○支援室</p></td>
        <td><p>☎<a href="0000-00-0000">0000-00-0000</a></p></td>
 
      </tr> 
         <tr>
        <th>上記以外</th>
        <td><p>事務部<br></p></td>
        <td ><p>☎<a href="0000-00-0000">0000-00-0000</a></p></td>
 
      </tr> 

該当のソースコード

table.table01 {
	width:100%;
	border-right:#3EB1C6 solid 1px;
	border-collapse: collapse;
}
table.table01 thead th {
	background:#3EB1C6;
	color:#FFF;
	padding:5px 10px;
	border-right:#FFF solid 1px;
	border-bottom:#FFF solid 1px;
}
table.table01 thead th:last-child {
	border-right:#3EB1C6 solid 1px;
}
table.table01 tbody th {
	background:#3EB1C6;
	color:#FFF;
	padding:5px 10px;
	border-bottom:#FFF solid 1px;
	vertical-align:top;
}
table.table01 tbody tr:last-child th {
	border-bottom:#3EB1C6 solid 1px;
}
table.table01 tbody td {
	background:#FFF;
	padding:5px 10px;
	border-left:#3EB1C6 solid 1px;
	border-bottom:#3EB1C6 solid 1px;
	vertical-align:top;
}

@media screen and (max-width: 640px) {
table.table01 thead {
	display:none;
}
table.table01 tbody th {
	display:block;
}
table.table01 tbody td {
	display:block;
}
table.table01 tbody td::before {
	content: attr(label);
	float: left;
	clear:both;
	font-weight:bold;
}
table.table01 tbody td p {
	padding-left:0em;
}
}

試したこと

お問い合わせ窓口　と　電話番号という項目をつけたしてみましたが変わりませんでした。

何かいい方法があれば教えてください。

Comments

[new1ro]

> しかし、アクセシビリティ的に列と項目との関連性がないということで保存の段階でひっかかります。

この状況を見たことがないのですが、エラーが表示されているツールは何でしょうか?

・8341 (官公庁でよく使用されるCMSとして聞いたことがあります)
・Adobe Dreamweaver
・Atom
・Google Chromeの開発ツール
・WordPressのプラグイン
など..

(個人情報などの問題がなく、可能であればキャプチャがあると回答者が増えるかもしれません。)

[reiNaka]

官公庁のCMS です…
キャプチャは今ないです。すみません。

[reiNaka]

他のテーブルをさがしてどうなっているか確認してみます。

[reiNaka]

アクセシビリティの問題は、
列のヘッダーにはscope="col"を、行のヘッダーにはscope="row"を入れることで大丈夫になりました！

Answer 1

いくつか原因を想像して回答してみます。

---

[1] 以下の記述が欠けているのでエラーが出てしまっている、ということはないですか?

  </tbody>
</table>

---

[2] <thead>内の<th>について、空欄になっているのがあることが、エラーの原因かもしれません。
何か文字を入力してみて、エラーが消えるか試してみてもいいかもしれません。

---

[3] (私はデザイナーなのですが)デザイン視点でいうと、以下のように思われます。

• thの中央揃えは見づらい
• thだけ上下中央揃えではないので違和感がある。tdにそろえて上下中央揃えにしたい

/* スマホのときは左右中央揃えでいいと思いますが、PCのときは左揃えが読みやすそうです。 */
table.table01 tbody th {
  background: #3eb1c6;
  color: #fff;
  padding: 5px 10px;
  border-bottom: #fff solid 1px;
  
  
  /* vertical-align: top; */
  vertical-align: middle; /* 上下中央揃えにしたほうがよさそうです。 */
  text-align: left; /* 好みの問題かもしれませんが、このシチュエーションで中央揃えは見づらいです。 */
}

Comments

[reiNaka]

そうですね。
上記のようにしたらすっきりしました。
</tbody></table>は、質問への記入もれだったようです。

[reiNaka]

### 該当のソースコード

```html
<table class="table01">
<caption>お問い合わせ窓口</caption>
<thead>
<tr>
<th scope="col">ご用件</th>
<th scope="col">お問い合わせ窓口</th>
<th scope="col">電話番号</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">外来診察・検査・予約</th>
<td ><p>外来受付</p></td>
<td ><p>☎<a href="tel:[phone]">0000-00-0000</a></p></td>
</tr>
<tr>
<th scope="row">初診</th>
<td><p>○○支援室</p></td>
<td><p>☎<a href="tel:[phone]">0000-00-0000</a></p></td>
</tr>
<tr>
<th scope="row">リハビリ</th>
<td ><p>リバビリテーション部</p></td>
<td><p>☎<a href="0000-00-0000">0000-00-0000</a></p></td>

</tr>
<tr>
<th scope="row">学校・園<br>福祉サービス事業所からの<br>お問い合わせ</th>
<td><p>○○支援室</p></td>
<td><p>☎<a href="0000-00-0000">0000-00-0000</a></p></td>

</tr>
<tr>
<th scope="row">上記以外</th>
<td><p>事務部<br></p></td>
<td ><p>☎<a href="0000-00-0000">0000-00-0000</a></p></td>

</tr>

</tbody>
</table>

```

```css
table.table01 {
width:100%;
border-collapse: collapse;
}

table.table01 thead th {
background:#3EB1C6;
color:#FFF;
padding:10px 15px;
border-right:#fff solid 1px;
border-bottom:#fff solid 1px;
}

table.table01 thead th:last-child {
border-right:#3EB1C6 solid 1px;
}
table.table01 tbody th {
background: #3eb1c6;
　　　color: #fff;
　　　 padding: 5px 10px;
　　　 border-bottom: #fff solid 1px;
vertical-align: middle; /* 上下中央揃え。 */;
　　text-align: left;

}
table.table01 tbody tr:last-child th {
border-bottom:#3EB1C6 solid 1px;
}
table.table01 tbody td {border-bottom:#3EB1C6 solid 1px;
border-right:#3EB1C6 solid 1px;
}

@media screen and (max-width: 640px) {
table.table01 thead {
display:none;
}
table.table01 tbody th {
display:block;
}
table.table01 tbody td {
display:block;
}
table.table01 tbody td::before {
content: attr(label);
float: left;
clear:both;
font-weight:bold;
}
table.table01 tbody td p {
padding-left:0em;
}

```

PCでの表は大変みやすくなりました。
スマホ表示での枠線があるところとないところができてしまいました。
どうすればよくなりますか。

それから当初のアクセシビリティの問題は、
列のヘッダーにはscope="col"を、行のヘッダーにはscope="row"を入れることで大丈夫になりました。

Answer 2

列のヘッダーにはscope="col"を、行のヘッダーにはscope="row"を入れることで解決しました。