[TIL] aria-describedby, aria-live
Dec 15, 2023 | Jun 25, 2024
| Ryoon.With.Wisdomtrees
In the code above, you're also adding the following aria labels:
aria-describedby="customer-error": This establishes a relationship between theselectelement and the error message container. It indicates that the container withid="customer-error"describes theselectelement. Screen readers will read this description when the user interacts with theselectbox to notify them of errors. ⇒select요소와 오류 메시지 컨테이너 간의 관계를 설정합니다. 이는id="customer-error"가 포함된 컨테이너가select요소를 설명함을 나타냅니다. 스크린 리더는 사용자가select상자와 상호작용하여 오류를 알릴 때 이 설명을 읽습니다.
id="customer-error": Thisidattribute uniquely identifies the HTML element that holds the error message for theselectinput. This is necessary foraria-describedbyto establish the relationship. ⇒ 이id속성은select입력에 대한 오류 메시지가 포함된 HTML 요소를 고유하게 식별합니다. 이는aria-describedby관계를 확립하는 데 필요합니다.
aria-live="polite": The screen reader should politely notify the user when the error inside thedivis updated. When the content changes (e.g. when a user corrects an error), the screen reader will announce these changes, but only when the user is idle so as not to interrupt them. ⇒스크린 리더는div내부의 오류가 업데이트되면 정중하게 사용자에게 알려야 합니다. 콘텐츠가 변경되면(예: 사용자가 오류를 수정하는 경우) 스크린 리더는 이러한 변경 사항을 알려 주지만, 방해하지 않도록 사용자가 유휴 상태인 경우에만 해당됩니다.
뒤로