웹접근성 고려한 html, css 작성방법

웹접근성 고려한 html

 

0. 크로스브라우징을 고려하여 html, css가 작성되었는가?
- 서울시 기준 ie11까지는 고려해야함. ie11, edge, chrome, firefox에서 구동 확인
- W3C 마크업, CSS 검사 서비스 통과

1. 문서 기본 언어가 (html lang="ko") 로 설정 되었는가?

2. 대체 텍스트가 적절히 들어갔는가?
- img에 alt 속성이 적절히 들어갔는지? (디자인을 위한 의미없는 img의 경우 alt="" 로 값 비우기)

3. 페이지 이동은 a, 그 외는 button으로 적절히 사용되었는가? 
- a태그로 페이지 이동이 아닌 이벤트 구현시  onclick="return false;" 등 포커스 이동을 막는것이 쓰였는가?

4. table
- scope 속성이 잘 쓰였는가 ? (thead 안에 th의 경우 scope="col" , tbody 안에 th의 경우 scope="row" 적용)
- 테이블에 대한 요약설명 <caption></caption>이 들어갔는가 ? (summary는 표준 속성이 아니므로 사용 X)

5. 시맨틱 태그가 적절히 씌였는가 ? 
- header, nav, main, aside, section, article, footer 등 시멘틱 태그로 레이아웃 구성
- h1~h6  헤딩 태그 적절하게 사용

6. form

- label, fieldset, legend 등이 사용되었는가?
- <input type="image | hidden | submit | button | reset">을 제외한 모든 <input>, <textarea>, <select> 요소 에 1:1 대응하는 <label>요소 또는 title 속성을 통해 레이블을 제공해야 함
- 단, 화면상에 연결할 레이블이 표현되는 경우는 반드시 <label>로 연결해야 준수한 것으로 인정

7. 키보드 접근 테스트가 완료되었는가?
- 탭의 이동 순서도 신경써야함 (일반적으로 페이지의 좌측 상단 영역에서 우측 하단 영역으로 이동) 
- tab은 다음, shift+tab은 이전. focus 됬을때 outline 제거 css가 있으면 삭제. outline이 아니더라도, 반드시 클릭 요소는 focus 효과가 나타나야 함.
- mouseover/ mouseleave 뿐만 아니라 focus, focusout 효과도 동일하게 적용되어야 함.

8. skip nav가 있는가 ?
- 메뉴 (gnb) 바로가기, 본문 (container) 바로가기

- 처음에는 시각적으로 숨기고, 포커싱 상태 (tab으로 이동 등)에만 보이도록. 스크린리더 or 키보드를 이용하는 사용자가 주요 컨텐츠로 바로 넘어갈수 있도록 하기 위함.

9. 새 창으로 열리는건 title에 새 창으로 열린다고 표시되었는가?
ex) <a href=“…” title=“새 창”>개인정보처리방침</a>

10. 자동재생 배경음악이 없는가?

11. 명도대비가 확실한가?
(명도 대비 : 저시력자와 고령자를 위해, 콘텐츠와 배경 간의 명도 대비는 4.5:1 이상)
http://www.colorsontheweb.com/Color-Tools/Color-Contrast-Analyzer

 

---

 

웹접근성 고려한 CSS

1. 폰트 크기는 본문 텍스트 기준 15-18px는 되어야 함.
- 스마트폰에서 읽기 충분한 사이즈로 키우기

2. 브라우저 기본 줄간격은 1.2 임. 웹 접근성 가이드에서는 1.5를 권장.

3. 가상 요소 (content : '';)로 텍스트 넣지 말기
-  content 속성으로 폰트 아이콘이나 특수문자와 같은 비문자 콘텐츠를 추가할 때도 스크린 리더기에서 읽을 수 있음. 그렇기 때문에 aria-hidden="true" 를 추가하여 숨기기.

4. 화면 스크린 외에 다른 기기에서 어떻게 보일지 설정 (media query)

5. 더 지원 범위가 넓은 선언 이후 사용하고자 하는 최신 속성 선언

- ex. ie 구버전에서도 먹히는 속성 -> 최신 브라우저에서만 먹히는 속성
- vendor prefix 잘 쓰기.
( webkit-: 크롬, 사파리, 최신 버전의 오페라  /  -moz-: 파이어폭스  /  -o-: 구 버전의 오페라  /  -ms-: IE 또는 Edge )

6. 콘텐츠를 숨길때 visibility:hidden이나 display:none 은 사용자, 스크린리더에서 모두 사라져버림. hidden 이라는 클래스를 미리 지정해서 시각적으로만 숨겨야 함.
.visually-hidden {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%); 
  margin: -1px;
}

 

7. 포커싱 상태의 outline 삭제 하지 않기 (삭제보다는 다른 대안으로 css를 넣기).

- 마우스가 아닌 키보드로 접근하는 사용자들을 위함! 포커싱 상태임을 나타낼수 있도록 디자인을 바꿔서 사용자에게 알려줘야함.
-  자식이 포커싱 됬을때도 포커스 효과 넣을수 있음 ( 선택자:focus-within {} 로 ) - ie에서는 지원x

 

8. 요소들 나열 순서 유의 : 시각적으로 보이는것과 실제 html 내에서 순서 동일하도록.

 

---

 

css 개선

- 네이밍 규칙(이미지 파일 이름, 클래스네임 등) 확실하게 정해서 잘 지키기 (내부에서 통일)
- 단축 속성 사용  (ex. margin-bottom:30px; margin-left:20px; 로 쓰기보다는 margin: 0px 30px 0px 20px; 로 쓰기)
- 복잡한 selector 피하기 
- 반응형일 경우 모바일부터 맞추기 (작은 화면부터 큰 화면으로 맞추기)  > min-width 사용!

---

 

웹 표준 및 호환성 준수 검사방법

 

1. 웹표준 문법을 준수하여 구축하여야 함
- 표준 (x)HTML 문법 준수 여부,표준 CSS 문법 준수 여부
   W3C Markup Validation (http://validator.w3.org/)통과
   W3C CSS Validation (http://jigsaw.w3.org/css-validator)통과
- 문자(한글)부호화 준수, 제어 기능의 표준 준수, 비표준 기술제거

2. 웹호환성 확보로 크로스브라우징을 지원하여야 함

- 기능 호환성 확보 여부, 화면표시 호환성 확보 여부(4종 브라우저)
  ※ 4종 브라우저(Edge, Chrome, Whale, Firefox)

 

---

 

참고)

 

최신 정보통신접근성(웹 접근성) 및 웹 표준 준수 가이드 안내(서울시)

https://news.seoul.go.kr/gov/archives/47485

 

웹 접근성 연구소

https://www.wah.or.kr:444/

 

웹 접근성 지침 항목별 준수 가이드라인

http://210.116.77.11/pbGuide/guide/html/wah/wahGuide2.html

 

웹 접근성 직군별 교육

https://nuli.navercorp.com/education

 

웹 접근성 진단 도구

https://nuli.navercorp.com/education/tools

 

기획자가 챙겨야 할 웹 접근성

https://germweapon.tistory.com/403    

 

웹 접근성? 웹 표준? 웹 접근성을 위한 규칙들

https://jae04099.tistory.com/entry/HTML-CSS-%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1-%EC%9B%B9-%ED%91%9C%EC%A4%80-%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EA%B7%9C%EC%B9%99%EB%93%A4  

 

CSS 개선을 위한 10가지 방법
https://erwinousy.medium.com/css-개선을-위한-10가지-방법-9923b106661c