# ● ボタンにアクセス可能な名前がありません(Buttons do not have an accessible name)

● ボタンにアクセス可能な名前がありません(Buttons do not have an accessible name)を修正する

Google lighthouse にて「Buttons do not have an accessible name」が出た時の対処

aria-label をつけましょう

<button class="navbar-toggle" type="button" >navigation bar</button>

 ↓

<button class="navbar-toggle" type="button" aria-label="ナビゲーションの切替">navigation bar</button>

● Form elements do not have associated labels を修正する

aria-label をつけましょう

<select name="menu">

 ↓

<select name="menu" aria-label="クイックリンク">
No.1369
11/17 17:20

edit

Aタグなどリンクするタグ に aria-label をつける

WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN

ARIA ラベルと関係性  |  Web  |  Google Developers

ARIA は要素にラベルと説明を加える複数の仕組みを提供します。実際に、ARIA はユーザー補助のサポートや説明テキストを追加できる唯一の方法です。読み取り可能なラベルを作成する際に ARIA が使用するプロパティを見てみましょう。

Aタグに aria-label をつけてみましょう

<a href="article_123.html">続きを読む</a>

 ↓

<a href="article_123.html" aria-label="記事「ホッキョクグマの生態について」の続きを読む">続きを読む</a>

BUTTONタグに aria-label をつけてみましょう

<button type="submit" class="btn btn-default">検索</button>

 ↓

<button type="submit" class="btn btn-default" aria-label="検索する">検索</button>

SELECTタグに aria-label をつけてみましょう

<select onchange="location.href='hoge.html';">

 ↓

<select onchange="location.href='hoge.html';" aria-label="hogeページへ移動します)">
No.1330
10/31 12:15

edit

サイトで rel="noopener" を使用して外部アンカーを開く

● サイトで rel="noopener" を使用して外部アンカーを開く

target="_blank" で開くリンクに rel="noopener" をつけ忘れてはいませんか?

target="_blank" を使用して任意のページから別のページにリンクしている場合、リンク元のページとリンク先のページは同じプロセスで動作します。 そのため、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。

また、target="_blank" にはセキュリティ上の脆弱性もあります。リンク先のページでは window.opener を使用して親ウィンドウのオブジェクトにアクセスしたり、window.opener.location = newURL によって親ページの URL を変更したりできます。

リンクに rel="noopener" を追加する

<a href="link.html" target="_blank">サイトへのリンク</a>

  ↓

<a href="link.html" target="_blank" rel="noopener">サイトへのリンク</a>

https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja

No.1329
10/28 11:56

edit