画像のSEO

コラム 文字の無いボタンには aria-label をつけよう

🐏 この記事はコラムです

ユーザー補助の観点から、文字の無いボタンは、スクリーンリーダーを使用しているユーザーにとっては「ボタン」として読み上げられてしまい、どのような意味なのかわかりません。

Google PageSpeed Insights では上記画像のような警告が出てしまいます。

改善方法として button タグに以下のように aria-label を仕込みましょう。

<button aria-label="ホームーページへ移動">
  <Button
    variant="plain"
    onClick={() => handleNavigate('/')}
    aria-label="ホームページに移動"
  >

coiai.netでは案件受付中です。
Vtuber、建築モデリング、EC構築、ネイティブアプリ制作、制服の制作(実は縫製業もメイン)、Vision Pro向けアプリ etc…
様々な制作開発を行っています。

ご気軽にご相談ください!

コイアイちゃんのアバター

この記事を書いたのは


Comments

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


Home
About
Blog
Works
Contact