標籤內部的語義輸入錯誤消息

我使用<label>來包裝輸入，以使其成功和錯誤消息可以出現在標籤內以進行關聯。你認爲這個場景中語義標記最多的是什麼？標籤內部的語義輸入錯誤消息

<label> 
    <b>Username</b> 
    <input> 
    <strong>Username already taken :(</strong> 
</label>

對於錯誤是strong合適嗎？或者是span更好？是role=status合適嗎？

來源

2017-10-09 ryanve

（不是答案）您可以使用標籤文本的跨度（它已經在標籤中），strong/span/em/i/b不會改變當前屏幕閱讀器的任何內容：它會閱讀（雖然其中一個元素可能比其他元素有更好的語義，但SR必須處理HTML標記的當前狀態，這遠不是語義^^ – FelipeAls

The WCAG provides an example錯誤顯示使用aria-invalid和aria-describedby屬性。

在您的例子中，代碼如下：

<label> 
    <b>Username</b> 
    <input aria-invalid="true" aria-describedby="error"> 
    <strong id="error">Username already taken :(</strong> 
</label>

的strong是合適的，因爲它似乎是一個重要的通知。一個alert角色（而不是status）將更適合應用於#error元素according to the W3C。

來源

2017-10-13 20:10:45 Adam

Thanks =）是否在內部使用了[aria-describedby]' ''破壞正常標籤的語義？根據閱讀材料，我想知道'[唱段無效]'是否足以結合「標籤」內的「強」。 – ryanve

@ryanve'aria-describedby'不影響正常標籤語義，它與使用'aria-labelledby'不同。但它的確如此，'label'內的'strong'可能會將其內容添加到標籤文本中。將'strong'標籤放在'label'標籤之外可能與使用'aria-describedby'時相關，因爲它會區分標籤（'label'或'aria-labelledby'）和描述（'aria-describedby'）。 – Adam

深入挖掘後，我發現還有一個更具體的'aria-errormessage'屬性https://www.w3.org/TR/wai-aria/states_and_properties#aria-errormessage – ryanve

使用強標記是適當的。

強標籤意味着某些東西更重要，並且密碼不正確很重要，因爲它會阻止用戶繼續操作。

來源

2017-10-12 23:34:50 jeffkmeng

從技術上講，這兩個元素都可以用來創建你正在尋找的正確的錯誤信息（使用正確的css）。在我看來，語義最多的是使用Strong標籤，這純粹是因爲我想強調一個密碼不正確的重要性，而不需要在css中使用font-weight:bold;。

此外，由於涉及可訪問性的問題，Strong標籤更適合屏幕閱讀器，從而使其更易於訪問。

總的來說，在這種情況下，我認爲使用<strong>的速度更快，更容易，更好，而且更優於<span>。

來源

2017-10-13 18:01:18 RockiRider

強是好的，因爲「用戶名已被採納」是一個嚴重的通知，而不是一個隨便的。

來源

2017-10-18 20:15:29 ChriChri

我會建議保持它強大的標籤並且還使用CSS紅色將其顯示爲錯誤。

來源

2017-10-19 21:25:07 KimboSlice

標籤內部的語義輸入錯誤消息

回答

相關問題