[사전 미션 - 워밍업] - 쿠키(김진호) 미션 제출합니다.

[jinhokim98]

접근성 개선

Step 1: 언어 설정하기

언어 설정이 en으로 되어있었습니다. 그래서 스크린 리더가 읽을 때 한국어인데도 발음을 굴리는 느낌이 들더라구요.
그래서 언어를 ko로 바꾸니 확실히 발음이 좋아졌습니다.

Step 2: 시맨틱 태그 사용하기 (App.tsx만)

기존 태그 div에서

• app-main -> main태그
• container -> section태그를 부여했습니다.

Step 3: 버튼 접근성 향상시키기

버튼에 aria-label 태그를 추가하여 이 버튼이 어떤 버튼인지 스크린리더가 읽도록 했습니다.
기존에는 '-'를 대시라고 읽었는데 바꾸니 aria-label 값으로 읽게 됐습니다.

Step 4: 변경 사항에 대한 실시간 알림 추가하기

span tag에 aria-live="polite" 속성을 추가했습니다. 이 값을 설정하면 값이 바뀔 때 적절한 타이밍에 스크린 리더가 값을 읽어줍니다.

Step 5: 최소/최대 값 도달 시 상태 메시지 알림 추가하기

.visually-hidden 기법과 role 속성을 활용해서 화면에 보이지 않는 태그를 추가해서 경고가 발생했을 때 스크린 리더가 보이지 않는 태그의 텍스트를 읽도록 했습니다.