널리에서 웹 접근성 강의를 듣고 설명을 듣다보니 다양한 사용자들을 고려하지 않은 웹이었다는 생각이 들었다. 그래서 강의 들은것과 추가로 또 공부한 것들을 적용해보며 개선 해보려고 한다.!
1. <html lang ="ko"> 설정
이 속성은 이 HTML 문서가 어떤 언어로 사용 되었는 지를 나타낸다.
속성을 지정하지 않을 경우는 lang="en" 으로 스크린리더가 해석하게 된다.
2. 적절한 대체 텍스트 제공
<img>, <input> type이 image 이거나 <button> 인 경우와 <map>의 <area> 에도 대체텍스트가 존재한다면 alt 속성 넣어주어야 한다.
그래서 누락되어 있던 img에 alt속성을 추가해주었고, alt 속성이 필요없는(의미 없는 의미지) 일 경우는 alt에 빈 값을 넣어주었다.
alt를 사용시에 주의할 점
- '~ 하십시오.', '~ 됩니다.' 등 친절한 설명을 자제하고 간단 명료하게
- '링크', '여기', '클릭', '바로가기' 등의 목적지를 구체적으로 알려주지 않는 단어 사용하지 말자
3. 페이지 제목 제공
난 모든 페이지에 코드리뷰 사이트 : init()으로 설정했는데, 모든 페이지에 각각 제목을 제공해야한다. 그래야 이렇게 여러 페이지가 열려 있는 경우 비장애인들도 여기에 있는 제목만 보고 구분하여 빨리 선택할 수 있고, 스크린리더 사용자도 제목이 전부 똑같이 제공되어 있거나 내용과 다르게 제공되어 있으면 인식하기 힘들기 때문이다.
위에 사진처럼 페이지 별로 내용에 맞는 타이틀을 각각 설정해주었다.
4. input label 제공
입력 서식에 초점이 갔을 때 스크린 리더가 편집창이라고만 읽어주기 때문에 어떠한 입력인지 설명을 제공해주기 위해서 input에 맞는 label을 작성해주었다. 이렇게 제공하게 되면 입력 서식 선택 시 초점이 가는 것은 물론이고 레이블을 선택해도 입력 서식에 초점이 가게 된다.
디자인이 label을 수용할 수 없을 때 혹은 label로 식별되는 텍스트가 없을 때, 혹은 label을 표시하는 것이 혼란스러울 수 있는 곳에는 title 속성을 추가해주었다.
5. 시맨틱 태그 사용
div,span등 아무 의미 없는 태그보다는 main,section,article 등 시맨틱 태그를 사용하여 수정하였다.
또한 b태그 보다는 strong 태그를 i태그 보다는 em태그를 사용했다. strong태그와 em태그는 이것이 중요하다고 스크린 리더기에서 강조해주는 개념적인 측면으로 접근이 되며 접근이 되며, b태그와 i태그는 디자인적으로만 강조되어 표현되기 때문이다.
6. color 값과 background-color 값의 대비
이거는 lighthouse에서 웹 접근성 검사를 했을 때 나왔던 경고였다. (Background and foreground colors do not have a sufficient contrast ratio.)
이렇게 답변하기에서 배경색인 흰색과 텍스트 색인 회색이 대비가 충분하지 않아 발생한 경고이다. 이렇게 대비가 충분하지 않으면 글자를 읽는것에 어려움이 있다. 그래서 아래와 같이 메인색과 검정색으로 주었고, 선택한 메뉴에는 밑줄 표시를 해주어 더 강조해주었다.
⭐️⭐️⭐️⭐️⭐️ 그 결과 ⭐️⭐️⭐️⭐️⭐️
81점에서! >>>>>> 98점으로 상승할 수 있었다!
