웹 표준과 웹 접근성
웹 표준 - 어떤 환경(운영체제, 브라우저)에서도 이용할 수 있는 웹페이지를 만드는 방법
웹 접근성 - 어떤 사람이든 이용할 수 있는 웹페이지를 만드는 방법
웹 표준의 장점
- 호환성, 접근성 향상,
SEO향상, 유지보수 용이
웹 표준을 준수하는 방법
1. DOCTYPE 선언
- 웹 페이지의 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML을 사용하는지 명시한다.
- DOCTYPE을 제대로 선언하지 않는다면?
- 각 DOCTYPE 별로 유효한 html 태그 상이
- 브라우저가 비표준 방식으로 해석하게 된다
<!-- HTML5 -->
<!DOCTYPE html>
<html>
<!-- ... -->
</html>
2. 시멘틱 태그 사용
- HTML5에서 새로 추가된 태그
- "의미 있는" 태그를 활용하여 웹 페이지의 구조를 더욱 명확하게 표현할 수 있다.
3. 웹 접근성 고려
웹 접근성을 확인하는 방법
- WCAG(Web Content Accessibility Guidelines) 준수 여부를 검사한다.
1. 인식의 용이성
- 대체 텍스트 제공 -
alt 속성
- 자막 제공
- 색상만으로 컨텐츠 구별 금지 (차트, 필수입력항목 등)
- 텍스트 : 컨텐츠 명도 는 4.5 : 1 이상이어야 함
- 자동 재생 시 3초 이내 정지할 수 있도록 함
2. 운용의 용이성
- 키보드 사용 보장 -
tabindex 속성
- 키보드 이동 시 초점 이동, 논리적 순서 이동
- 컨트롤 영역은 조작 가능하도록 충분히 커야 함
- 응답 시간 조절 (시간 연장 가능)
- 자동 변경 컨텐츠에 정지, 이전, 다음 기능 있어야 함 (슬라이드 이미지)
- 깜빡임 제한
- 반복 영역 건너뛰기
- 적절한 페이지 제목
- 적절한 링크 텍스트
3. 이해의 용이성
- 기본 언어 표시 -
<html lang="ko">
- 사용자가 의도하지 않은 기능 실행 금지 -> 스크린리더 사용자에게 새 창 뜨면 알려주기
- 컨텐츠는 논리적인 순서로 제공
- 표의 구성
- 입력에 대응하는 레이블 제공 (클릭하면 사라지는
placeholder만 사용 금지)
- 입력 오류 정정 방법 제공
4. 견고성
- 마크업 오류 방지
- 웹 애플리케이션 접근성 준수
결론
웹 표준 이란, 어떤 환경(운영체제, 브라우저)에서도 이용할 수 있는 웹페이지를 만드는 방법웹 접근성 이란, 어떤 사람이든 이용할 수 있는 웹페이지를 만드는 방법
- 웹 표준의 장점은
호환성, 접근성향상, SEO향상, 유지보수용이
- 웹 표준을 준수하는 방법에는
DOCTYPE 선언, 시멘틱 태그사용, 웹 접근성 고려등이 있다
- 그렇다면 웹 접근성은 어떻게 고려해야 할까?
WCAG가이드라인을 확인하면 된다.
- WCAG에는,
인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성등이 있는데,
- 대표적으로
alt 속성을 이용하여 대체텍스트를 제공한다든가, tabindex 속성을 이용하여 키보드 사용을 보장하는 등의 방법이 있다.
