ARIA 가 무엇인지, 어떤 역할을 하는 attribute인지 알게 되었다
김정환님의 form 관련한 포스팅.
https://jeonghwan-kim.github.io/dev/2020/06/08/html5-form-validation.html
참고자료에 있는 아래 링크글을 살펴보았다.
https://pageclip.co/blog/2018-02-20-you-should-use-html5-form-validation.html
그런데 속성중에, required 말고, aria-required가 보였다.
required와 aria-required 는 어떤 차이가 있는 것이지?
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required
HTML semantic elements들은 기본적으로 스크린 리더가 해당 태그를 읽어서 어떤 역할을 하는 요소인지 구별할 수 있다.
가령, input태그, button 태그, form 태그가 그 예가 되겠다.
그런데 button태그를 쓰지 않고 div태그로 만든 버튼 컴포넌트를 사용한다던지, form 태그를 쓰지 않고, div태그로 폼을 만들어 관련 기능을 props로 넣어 사용하는 경우, 겉으로 보기에는 똑같지만, 스크린 리더는 이 컴포넌트들이 무얼 하는 녀석인지 알 수가 없다. 그렇게되면 시각적으로 컴포넌트의 역할을 파악할 수 없는 사용자들은 서비스를 사용하기 어려워진다.
그래서 ARIA 속성이 필요하다. 다만 ARIA속성은 별도의 기능이 존재하지 않는 속성임에 주의하자.
참고자료
ARIA role type
여기에 있는 롤 타입을 프로퍼티 값으로 추가해주면, 스크린리더가 해당 롤 타입을 읽어준다.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
