![「[Lighthouse満点へ]フォーム要素へのラベル関連付けはplaceholderでも良い」のアイキャッチ画像](/images/tmb/lighthouse-placeholder.jpg)
このブログを作るに当たって初めてHugoを触り、[1から](https://2001y.me/blog/other/hello/)ブログをデザインするということで、かなりパフォーマンスを意識して作成してきてたつもりでした。
そして先日、Chrome89にLighthouse7.0.0が搭載され、[UIも日本語化された](https://www.suzukikenichi.com/blog/lighthouse-will-be-available-in-japanese/)ということで、ChromeDevを使って久しぶりにLighthouseを計測してみました。
ほ…あとちょっとでオール100点！！！
ということで、オール100点になるために微調整してみました。
## フォームの要素にラベルが関連付けられていません
アクセシビリティ（ユーザー補助）の項目で、一つはidが複数使われていますみたいなミスだったので修正。
あと一つが、フォームの要素にラベルが関連付けられていません`Form elements do not have associated labels`。
## labelで囲みたくない…
ただ、このフォーム部分は検索欄なので`type=search`です。
“`html
“`
そして、デザイン的に`label`で囲みたくない…
“`html
“`
***
## placeholderを追加したら一発解決だった
`label`をplaceholder風に表示させようかと考えましたが、普通に`placeholder`を指定してあげるだけで解決でした。
“`html
“`
## aria-labelでもいいみたい
`aria-label`でも[解決するみたい](https://dequeuniversity.com/rules/axe/3.3/label)。
“`html
“`
`aria-label`だとサイト上にテキストが表示されないので、`label`も`placeholder`も使いたくない時に便利そう。
## 無事、オール100点！！
そして、無事オール100点にすることができました！！
Safari14でやっとWebPに対応して、かなり体感スピードが上がった気がします。WebP対応しておいてよかった。
