我目前正試圖用lighthouse解決我的頁面速度分數問題。我一直得到一個錯誤& quot表單元素沒有關聯的標簽它特別針對我網站上的一個元素,那就是我主頁上的手機導航菜單。
這是我的網站https://verticalk9.com/
下面是我放在元素中的HTML:
<input class="lytbox-nav_control" id="nav-control" type="checkbox">
<label class="lytbox-button" for="nav-control">
<div class="hamburguer">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</label>
<div class="lytbox-navigation">
[elementor-template id="1434"]
</div>
有人能幫我嗎?謝謝你。
我還沒有嘗試過任何東西,因為我不想破壞我的網站,因為我沒有太多的編碼知識。這段代碼是從一個更具交互性的導航菜單按鈕的建議中復制粘貼而來的。
我懷疑Lighthouse正在尋找輸入#nav-control的標簽,但是標簽中沒有文本,這導致了錯誤。
如果您不想將文本放在標簽內,請嘗試向label元素添加aria-label屬性。如果這不起作用,那么使用屏幕閱讀器文本類來添加不可見的文本。
<input class="lytbox-nav_control" id="nav-control" type="checkbox">
<label class="lytbox-button" for="nav-control" aria-label="Toggle nav">
<span class="screen-reader-text">Toggle nav</span>
<div class="hamburguer">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</label>
<div class="lytbox-navigation">
[elementor-template id="1434"]
</div>