접근성을 고려한 모달을 코드를 작성해보았다. 모달을 열었을 때 tabindex 속성을 추가해서 모달열기 버튼을 탭키로 접근되지 않도록 했다. aria-hidden을 조절해서 스크린리더에 안읽히도록 조정했다. See the Pen Untitled by 이아름 (@aahreum) on CodePen. aira-modal = 'true' => 모달 대화 상자임을 나타냄 role='dialog' => 대화형 창 역할을 함을 나타냄 aria-labelledby='modal-title' => 모달 제목을 나타내는 요소의 ID를 참조함 aria-describedby='modal-desc' => 모달 내용을 나타내는 요소의 ID를 참조함 참고 https://developer.mozilla.org/en-US/docs/W..
1. Aria-label aira-label은 웹 페이지에서 스크린 리더 사용자에게 정보를 전달하는 데 사용되는 HTML 속성 요소가 시각적으로는 명확한 정보를 제공하지만 스크린 리더 사용자들이 이해하기 힘들기 때문에 aira-label을 사용해서 요소의 기능이나 목적을 설명할 수 있음 검색 span이나 div 태그에서 aria-label을 사용할 땐 role 속성을 함께 써주는 것이 좋음 2. sr-only 스크린리더에서는 읽을 수 있지만 화면에는 보이지 않게 하는 방법 (aria-label과 비슷한 역할을 함) 아래의 코드를 사용함 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hid..
