Accessibilipidia

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=“내용” 을 기재하기

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤