1. a
- 페이지 이동만 시켜줄 경우 사용하기
- 링크로 사용할 때는 underline 을 제거하지 말기
- text-underline-offset 또는 text-decoration-color 을 통해 customize 해서 사용하기
- 색상 대비 접근성 체크하기 https://coolors.co/contrast-checker/ffffff-a2b9bc
- focus 상태를 명확하게 표시하기
- focus 상태일 때는 outline-color, style, width, offset 등을 이용해 읽기 쉽게 하기
- hover 상태일 때는 색상 변화 뿐 아니라 bold 속성을 통해 hover 상태를 더 돋보이게 하기
- link text 는 구체적으로 작성하기
2. aside
==landmarks==
- built in role 이 없으므로 aria-label 꼭 작성하기
- 메인 컨텐츠와 관계 있을 때 사용
3. button
- 페이지 이동이 아닌 각종 액션이 들어갈 경우 사용하기
4. color
- black : white = 21
- 권장되는 비율은 7, 최소 비율은 4.5
- focus / unfocus 전환 시 3 이상 차이가 나게 하기
5. div
- 버튼의 기능을 하는 div 의 경우 사용할 수 있으나 role=“button” 을 작성하기
- accordion 을 만들 때 사용할 수 있고 role="button" 을 함께 작성하기
- accordion 을 만들 때는 접힌 상태에 따라 aria-expanded 의 값을 true / false 로 전환하기
6. error message
==accessibility check-up==
- 텍스트 타입의 메시지, 아이콘, 테두리 등을 이용해 다양한 방법으로 표시하기
- p 태그 등을 이용해 에러 항목에 가까운 곳에 표시하기
- 메시지는 정확하게 작성하기
- role=“alert” 작성해 unfocus 상태에서도 읽히게 하기
- aria-describedby=“내용” 을 작성해 에러 메시지와 field 를 연결하기
- 에러가 발생한 경우 aria-invalid=“true” 를 사용해 상태를 표시하기
7. fieldset
==form==
- form 의 각 항목들을 묶을 상위의 개념이 필요할 경우에 사용
- legend 태그를 label 대신 사용하기
8. footer
==landmarks==
- contentinfo 라는 role 을 가지고 있음
9. h1…
==accessibility check-up==
- level 1부터 순서대로 사용하기
- 눈에 보이지 않더라도 접근성을 위해서는 우선 삽입하고 position 을 이용해 숨기기 ( left: -10000px; )
10. header
==landmarks==
- banner 라는 role 을 가지고 있음
11. i
- 장식적인 i 에는 role=“img” 와 aria-hidden=“ture” 삽입하기
12. image
- 모든 image 태그는 의미있거나 장식적이거나
- 장식적인 image 에는 alt=“” 사용하거나 CSS 로 background-image 로 삽입하기
- 의미가 있는 image 의 대체 텍스트에는 이미지가 가진 의미를 간략하게 담거나 이미지 자체를 설명하는 문구를 삽입하기
- 배너 등 이미지 안에는 텍스트 삽입을 지양하고, 가급적 텍스트로 삽입하기
13. input
==form==
- input 항목에 대해 라벨을 표시해야 할 경우 lable 태그를 사용하기
- label 과 함께 사용할 경우 label 의 for 와 input 의 id 를 일치시키기
- placeholder 는 접근성을 위한 항목이 아니므로, placeholder 와 label 을 각각 작성하기
- checkbox 나 radio button 에도 label 을 작성해 클릭 영역 넓히기
- form 의 각 항목들을 묶을 상위의 개념이 필요할 경우 fieldset 태그로 묶은 후, legend 태그를 label 대신 사용하기
- 자동입력이 가능한 field 에는 autocomplete=“내용” 을 기재하기
14. lable
==form==
- input, select, textarea 앞에 텍스트를 표시해야 할 때는 lable 태그를 사용하기
- for attribute 를 통해 목적을 기재하기
- input 과 함께 사용할 경우 label 의 for 와 input 의 id 를 일치시키기
- 필수 항목에는 required 와 aria-required=“true” 두 개를 모두 작성하기
- checkbox 나 radio button 에도 label 을 작성해 클릭 영역 넓히기
- label 이 눈에 보이지 않아야 할 때는 생략해도 되지만 field 에 aria-label 형태로 작성하기
- form 의 각 항목들을 묶을 상위의 개념이 필요할 경우 fieldset 태그로 묶은 후, legend 태그를 label 대신 사용하기
- 자동입력이 가능한 field 에는 autocomplete=“내용” 을 기재하기
15. legend
==form==
- form 의 각 항목들을 묶을 상위의 개념이 필요할 경우에 fieldset 태그로 묶은 후, legend 태그를 label 대신 사용하기
16. main
==landmarks==
- main 라는 role 을 가지고 있음
- main 이라는 role 은 다른 곳에서 중복으로 사용하지 않도록 주의하기
17. nav
==landmarks==
- navigation 라는 role 을 가지고 있음
- 여러 군데에 사용될 수 있기 때문에 aria-label 을 통해 어떤 기능의 nav 인지 추가로 기재하기
18. page zoom
==accessibility check-up==
- 확대 시 가로 스크롤링을 제한하기
- 모든 컨텐츠를 이용할 수 있게, 텍스트를 자르거나 줄이지 않기
- 모든 기능을 이용할 수 있게 고정 element 등의 크기를 조절하기
- 중요한 컨텐츠들을 여유롭게 배치하고, 확대 시 중요하지 않은 컨텐츠들은 숨기거나 줄이기
- 가급적 일정 배율 이상에서는 모바일 뷰로 전환될 수 있게 하기
- 배너 등 이미지 안에는 텍스트 삽입을 지양하고, 가급적 텍스트로 삽입하기
19. screen reader
==accessibility check-up==
- html lang 는 컨텐츠의 메인 언어로 설정하기
20. section
==landmarks==
- built in role 이 없으므로 aria-label 꼭 작성하기
- 메인 컨텐츠와 관계 없는 별도의 영역일 때 사용
21. select
- dropdown 을 만들 때 사용
- 데이터 처리를 위해 name attribute 를 사용하기
- 접근성을 위해서는 aria-label 도 함께 작성하기
22. select
==form==
- select 항목에 대해 라벨을 표시해야 할 경우 lable 태그를 사용하기
- form 의 각 항목들을 묶을 상위의 개념이 필요할 경우 fieldset 태그로 묶은 후, legend 태그를 label 대신 사용하기
- 자동입력이 가능한 field 에는 autocomplete=“내용” 을 기재하기
23. skip link
==accessibility check-up==
- 메인 컨텐츠로 바로가기 원하는 유저를 위해 tab 버튼을 누르면 나타나는 skip to main content 버튼 만들기
- header 안에 a link 를 삽입하고 main 에 main id 를 삽입하기
- position 을 이용해 눈에 안보이게 숨기기
- focus 상태에서는 화면 안으로 가져오기
24. svg
- 장식적인 svg 에는 aria-hidden=“ture” 삽입하기
25. text resizing
==accessibility check-up==
- 가급적 전체 페이지를 확대하지 않고 텍스트 크기를 변경할 수 있게 하기
- text resizing 을 위해 rem 단위를 이용하기
- line-height 에도 px 사용하지 않기
26. textarea
==form==
- textarea 항목에 대해 라벨을 표시해야 할 경우 lable 태그를 사용하기
- placeholder 는 접근성을 위한 항목이 아니므로, placeholder 와 label 을 각각 작성하기
- form 의 각 항목들을 묶을 상위의 개념이 필요할 경우 fieldset 태그로 묶은 후, legend 태그를 label 대신 사용하기
- 자동입력이 가능한 field 에는 autocomplete=“내용” 을 기재하기