레이블 내에 시맨틱 입력 오류 메시지가 있습니다.

Question

<label>을 사용하여 성공 및 오류 메시지가 연결을 위해 레이블 안에 나타날 수 있도록 입력을 래핑합니다. 이 시나리오에서 가장 의미 론적 마크 업이 무엇이라고 생각하십니까?

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

오류의 경우 strong이 적절합니까? 또는 span이 더 낫습니까? role=status이 적절한가요?

Answer 1

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에 적용하는 것이 더 적절합니다.

Answer 2

강력한 태그를 사용하는 것이 적합합니다.

강력한 태그는 사용자가 계속 진행하지 못하도록 차단하는 중요한 요소입니다.

Answer 3

기술적으로 두 요소 모두 적절한 CSS를 사용하여 찾고있는 적절한 오류 메시지를 만드는 데 사용할 수 있습니다. 가장 의미 론적으로 생각해 보면, CWS에서 font-weight:bold;을 사용할 필요없이 비밀번호의 중요성을 강조하고 싶기 때문에 Strong 태그를 사용하는 것이 가장 좋습니다.

액세스 가능성 문제가 관련되어 있기 때문에 Strong 태그는 화면 판독기에 더 좋으며 더 쉽게 액세스 할 수 있습니다.

전반적으로이 시나리오에서는 <strong>을 <span> 이상으로 사용하는 것이 더 빠르고 쉽습니다.

Answer 4

"Username is already taken"이 강하기 때문에 캐주얼 한 것이 아니라 심각한 경고입니다.

Answer 5

강한 태그 을 유지하고 오류로 표시하려면 CSS 빨강을 사용하는 것이 좋습니다.