웹 표준/웹 접근성이란, 웹표준 검사하기, 웹 표준, 웹 접근성 지침,SEO

웹 표준이란 우리가 css 스타일을 적용하기 전에도

html 만으로도 어디에 쓰이는지 명확하게 명시 되어있어야하고, 태그는 의미에 맞게 사용해야한다.

웹 접근성 4대 원칙에 대해서 알아보자

 

웹 접근성 검사하기

https://validator.w3.org/#validate_by_input

The W3C Markup Validation Service

 

웹 접근성이란

사용자의 신체적 특징/지역/성별/나이 등을 고려하여 가능한 많은 사용자가 이용하는 데 불편함 없이 서비스를 내공하고, 이용할 수 있는 것.

즉 사용자가 볼 수 없어도, 마우스를 이용하지 못하더라도 색을 구별하지 못하더라도 차별없이 사용할 수 있도록 해야한다.

 

웹 접근성 4대 원칙

 

원칙1. 인식성

1-1 대체 텍스트
이미지 등 텍스트가 아닌 컨텐츠를 이용할 때, 텍스트만으로도 이해 할 수 있도록 간단명료하게 대체텍스트를 제공하는 것

1-2 멀티미디어 대체 수단
자막, 대본, 수화로 컨텐츠와 동등한 내용을 제공한다.

1-3 명료성
위치, 색, 모양, 크기, 소리 등의 관계없이 명료하게 의미가 전달 되어야한다.
이외에도 텍스트 컨텐츠가 잘 보이도록 명도 대비, 소리가 나는 컨텐츠 자동 재생 금지, 컨텐츠 간의 구분 명료하게 해야한다.

 

원칙2. 운용성

2-1 입력장치 접근성
모든 기능은 마우스가 없는 환경이라도, 키보드만으로도 사용할 수 있어야한다.
탭을 눌러 초점 이동이 순서대로 잘 작동하는지 체크해보고, 조작이 가능하도록 해야한다.
- 자동 검사 방법 onfocus="this.blur() 속성 유무 체크

2-2 충분한 시간 제공
보안 등의 이유를 제외하고는 시간제한을 두는 컨텐츠는 가급적 포함하지 않는 편이 적합하다.
자동으로 변경되는 컨텐츠는 정지 기능을 가지고 있어야한다.

2-3 광과민성 발작 예방
지나치게 깜빡이거나 반짝이는 컨텐츠는 화면 전체 면적의 10%이상을 차지하지 않아야한다.

2-4 쉬운 내비게이션
반복 영역 건너 뛰기
페이지뿐만 아니라 팝업, 프레임, 콘텐츠 블록에 제목(title)을 불필요한 특수문자 없이 간단명료하게 제공해야한다. 
- 기대효과 : 모든 페이지에 서로 다른 제목을 제공함으로 여러 개의 페이지가 열려있더라도 각 페이지의 제목으로 페이지 내용을 파악하여 이동에 용이하다.

적절한 링크 텍스트를 사용한다
- 맥락을 통해 이해할 수 있는 텍스트를 함께 제공한다.
예를들어 리스트 더보기를 만들 때 더보기가 무엇을 더 보는 것인지에 대해 구체적인 텍스트를 함께 제공해주는 것.
ex) 인기 상품 더보기, 

 

원칙3. 이해성

3-1 가독성
주로 사용하는 언어를 명시해야한다. 

3-2 예측 가능성
새창, 포커스 이동 등의 컨트롤 및 input(라디오,체크박스 등) 선택만으로 실행이 이루어지지 않도록, 사용자가 의도한 대로 실행이 되어야한다.

3-3 컨텐츠의 논리성
컨텐츠의 선형 구조를 따른 논리적인 순서로 제공해야한다.
ex) 리스트의 더보기를 사용할 때, 리스트의 타이틀 옆에 위치하더라도 html 구조에서 리스트 다음으로 위치하고, position 값으로 위치를 조정한다.

표를 제공 할 경우, 모든 사용자에게 이해를 돕기 위한 데이터의 내용 및 구조에 대한 정보를 제공해야 한다.

3-4 입력 도움
input과 label을 사용자 입력에 용도를 이해할 수 있도록 적절히 대응하는 레이블을 제공해야한다.
입력 오류(빈 input, 유효성 체크 등)를 정정 할 수 있는 방법을 제공해야한다.

 

원칙4. 견고성

4-1 문법 준수
태그의 열고 닫음이 일치해야하고, 태그의 중첩 방지, 중복된 송석 사용, id 값의 중복 선언 금지 등 문법을 준수한다.