アクセシビリティを無視してtableのスマホ表示対応

tableのスマホ表示は「ScrollHint」が総合的に良きと思っているのですが、時と場合によっては導入が手間だったり、システムの関係で使えないという事もあると思います。

そんな時に、やむをえず対応したtableのスマホ表示の忘備録と注意喚起。

デモ

表示のデモは以下のボタンからご確認ください。

HTML

<table>
    <thead>
        <tr>
            <th>見出し1</th>
            <th>見出し2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title="見出し1"><span>内容1-1</span></td>
            <td data-title="見出し2"><span>内容2-1</span></td>
        </tr>
        <tr>
            <td data-title="見出し1"><span>内容1-2</span></td>
            <td data-title="見出し2"><span>内容2-2</span></td>
        </tr>
    </tbody>
</table>

普通のtebleに属性を追加してtableの見出しとなるthの内容を入力します。

CSS

@media screen and (max-width: 768px) {
    table tr{
         margin: 0 0 30px;
         display: block;
     }
     table tr:last-of-type{
         margin-bottom: 0;
     }
     table thead{
         display: none;
     }
     table td{
         padding: 0;
         display: flex;
         border-bottom: none;
     }
     table td:last-of-type{
         border-bottom: 1px solid #ccc;
     }
     table td::before{
         content: attr(data-title);
         width: 50%;
         background-color: #eee;
         padding: 10px;
         border-right: 1px solid #ccc;
     }
     table td span{
         width: 50%;
         padding: 10px;
         text-align: center;
     }
}

基本のテーブルのスタイルは省略してます。
横幅768px以下の場合に適用する内容ですが、コンテンツ量によってはもっと細い幅でもいいかもしれないです。

何がいけないか

アクセシビリティ的にアウトになる可能性があります。
どう言う事かと言うと、WEBサイトを読み上げ機能などで閲覧されてる場合、正しく読み上げられない可能性が高いです。

また翻訳機能も使えない可能性があるので、その点でも利便性に欠けます。

表示だけを優先すると、そのページで迷子になっている閲覧者がいるかもしれません。

WEBサイトは見えている状態が全てじゃない

表示的にOKでも、アクセシビリティを考えると全ての人にサイトを閲覧してもらえない可能性があります。
コーディングを外部に依頼している知人からよくこういった内容の話を聞きます。

僕自身、アクセシビリティに関して、まだまだですが、CSSを取ってもサイトの中身がわかるように製作する事を心がけています。

話がそれましたが、今回記載したようなスマホ対応のtableは、ターゲットやリスクを理解した上で、使用してください。