我正在構建一個 React 應用程式，它采用日歷的形式，用戶應該能夠點擊日歷上的日期。這些天由大正方形表示，以便它們可以包含當天的資訊。出于可訪問性原因，使用<button>s 似乎是最明智的選擇，但我的研究（為什么 <button> 元素不能包含 <div>？） （https://www.w3.org/TR/2012/WD -html5-20120329/the-button-element.html#the-button-element ) 表示將 div 放在按鈕內是不正確的。我能想到的唯一其他選擇是讓日子成為<div>他們自己的日子，但讓它們可點擊并手動提供它們tabIndex和role適合可訪問性目的的功能。
對于其中還應該包含多個<div>s的可點擊區域，正確的 html 標簽或方法是什么？
uj5u.com熱心網友回復：
您可以<span>在 a 中使用元素，<button>并且它是有效的HTML。
<button>
<span>Three Different Spans</span>
<span>But Perfectly Valid</span>
<span>HTML!</span>
</button>
由于您可以以任何您想要的方式設定跨度，這不會給您帶來任何問題。
但是：如果您發現需要一個可點擊區域（您認為它應該是一個按鈕，這對于日歷來說聽起來當然是正確的！）需要多個容器，則很可能是您的設計不正確，可能需要重新考慮設計.
你可以依靠 CSS:before和:after偽選擇器來增加你需要的復雜性（如果沒有看到設計，很難給出任何可靠的建議）。
如果您真的不確定，您可以aria-label向<button>元素添加并且（再次取決于內容）添加aria-hidden="true"到所有內部專案。
<button aria-label="function of the button, this will be read to screen readers and other assistive tech">
<!-- this should be unnecessary, but depending on the content this is a technique to fix any issues caused by the button content -->
<span aria-hidden="true">Three Different Spans</span>
<span aria-hidden="true">But Perfectly Valid</span>
<span aria-hidden="true">HTML!</span>
</button>
uj5u.com熱心網友回復：
您可以將 包裹div在錨點中：
<a href="javascript:void(0)"><div>Hello World!</div></a>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/328451.html
標籤：javascript html css 反应 可达性
上一篇：溢位自動不顯示滾動條
下一篇：為什么這個元素的寬度不是0？