【入門編】role=’presentation’と’none’の使い分け – HTML実践ガイド

実は、Web制作の現場で意外と見落とされがちなのが、この「意味のない装飾」の扱いなんです。今回は、HTMLに魔法をかけて、スクリーンリーダーに「ここは無視していいよ！」と伝えるための`role=”presentation”`と`role=”none”`について、一緒に紐解いていきましょう。

—

なぜ「無視」させる必要があるの？

想像してみてください。あなたは、すごく親切なガイドさんと一緒に、美術館を歩いています。

ガイドさんは展示品の説明をしてくれますが、もしそのガイドさんが、「壁の模様」や「単なる飾り用のリボン」まで、いちいち丁寧に読み上げてくれたらどうでしょう？
「今、壁に赤い線がありました」「今、装飾用のリボンが結ばれています」……。これだと、本当に大切な「絵画の説明」に集中できませんよね。

そこで登場するのが、「これ、ただの飾りだから無視してね！」と伝えるための「role（役割）」属性なんです。

—

`role=”presentation”` と `role=”none”` の使い分け

結論から言うと、この2つは「ほぼ同じ役割」です。

• `role=”presentation”`: 古くからある書き方。多くのブラウザで「これはただの飾りです」と認識されます。
• `role=”none”`: 新しい規格で追加されたもの。「presentation」と同じ意味ですが、言葉の響きがより直感的ですよね。

「どっちを使えばいいの？」と迷うかもしれませんが、基本的にはどちらを使っても大丈夫です。ただ、歴史的な背景から`role=”presentation”`の方が少しだけ広く知られているので、迷ったらこちらを使っておくのが無難かもしれませんね。

こんな時に使ってみよう

たとえば、アイコン付きのボタンを作るとき、アイコン自体に意味を持たせたくない（テキストで十分に説明できている）場合です。