웹 표준과 웹 접근성이란 도대체 뭘까? - 프로젝트하며 정리했던 내용 공유

 

웹 표준이란?

웹 표준은 웹에서 사용되는 기술들의 표준화를 의미합니다.
즉, 웹사이트를 구성할 때 사용하는 HTML, CSS, JavaScript등을 표준화된 방식으로 작성되어야 한다는 것입니다.
이러한 웹표준을 지켜 웹사이트를 만든다면 어떤 브라우저나 기기를 사용하더라도
홈페이지 화면을 동일하게 볼 수 있습니다. 그렇기에 우리는 개발을 할 때 웹 표준을 고려해야 하는 것입니다.

웹 표준을 준수할 경우 얻을 수 있는 이점

1. 웹 페이지가 모든 브라우저에서 일관적으로 표시되며, 모든 사용자에게 동일한 사용자 경험을 제공할 수 있습니다.
2. 검색 엔진 최적화에 유리합니다.
3. 유지 보수 밒 확작성이 좋아지고 보장됩니다.
4. 웹 접근성 또한 향상됩니다.

 

웹 표준을 준수하는 방법!

1. DOCTYPE 선언 :
   웹 페이지의 최상단에 DOCTYPE을 선언하여  웹 페이지가 어떤 버전의 HTML, XHTML을 사용하는지 명시합니다.
   
   
2. 시맨틱 태그 사용 :
   <header>,<nav>,<section>,<footer> 등 웹 페이지의 구조를 명확하게 표한하는 시맨틱 태그를 사용합니다.
   
   
3. css 스타일 시트 사용 :
   css 스타일 시트를 사용해 디자인과 레이아웃을 분리하고 웹 페이지의 내용과 디자인을 분리하여 유지보수와 확장성을 높일 수 있습니다.
   
   
4. 웹 접근성 고려 :
   모든 사용자가 쉽게 접근할 수 있도록 웹을 제작하여야 한다. 예를 들어 시각 장애인이 스크린 리더를 사용하여 웹 페이지를 읽을 수 있도록 alt 속성을 사용한다거나 키보드만으로 모든 기능을 사용할 수 있도록 tabindex 속성을 사용하는 등이 있습니다.

여기서 웹 접근성이란 무엇인지 알아봅시다.

 

---

 

웹 접근성

 

장애를 가진 사람들도 신체적 환경적 조건에 관계 없이 인터넷을 통해 정보에 접근하고 이용할 수 있도록 하는 것을 말합니다. 이를 통해 인터넷을 인종, 성별, 연령, 장애 유무와 상관 없이 모두가 이용할 수 있는 공간으로 만듭니다.

예를 들자면, 위에서 언급했듯이 시각 장애인이 웹을 사용하기 위해 이용하는 스크린 리더를 고려해 이미지만 쓰는 것이 아닌 이미지를 설명하는 alt를 사용하는 것이 있습니다.

웹 접근성을 준수하기 방법

1. 시각적 요소 처리 :
   시각 장애인은 이미지, 비디오, 그래픽, 등을 시각적 요소를 인식할 수 없다는 것을 인지해야합니다.
   따라서 대체 텍스트, 색상 대비, 텍스트 크기 등을 고려해 시각적 요소를 처리해야합니다.
   
   
2. 청각적 요소 처리 :
   청각 장애인은 오디오 콘텐츠를 이해할 수 없습니다.
   때문에 자막, 수화, 오디오 설명 등을 제공하여 청각적 요소를 처리해야합니다.
   
   
3. 키보드 접근성 :
   지체 장애인은 마우스를 사용하지 못하는 경우가 많습니다.
   그렇기에 키보드만으로 웹사이트를 이용할 수 있도록 고려해야합니다.
   
   
4. 웹 접근성 검사 :
   WCAG 준수 여부를 검사하여 웹 접근성을 확보해 봅시다.

---

 

WCAG란?

웹 콘텐츠 접근성 지침(WCAG)이란 웹 접근성을 확보하기 위한 국제 표준입니다.
4가지 원칙, 13가지 지침, 78가지 성공 기능으로 구성되어 있습니다.

 

---

 

1. 인식의 용이성

정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시되어야 한다.
즉 다수의 감각을 사용해 어떤 방식으로든 인지할 수 있어야한다.

 

a. 텍스트가 아닌 콘텐츠에 대체 텍스트를 제공해야한다. (인쇄, 점자, 음성, 기호 등)

 

b. 정보와 구조의 손실 없이 콘텐츠를 표현할 수 있어야 한다.(콘텐츠에 대한 간단한 소개)

 

c. 전경(선택된 정보)과 배경(그 이외의 정보)을 분리하는 등 사용자가 콘텐츠를 보다 쉽게 보고 들을 수 있도록 한다.

---

 

2. 운용의 용이성 

사용자 인터페이스 요소와 탐색은 운용 가능해야한다. 쉽게 말하면 모든 사용자가 UI 요소들을 컨트롤 할 수 있어야한다. (마우스 → 키보드 || 음성 명령 등)

 

a. 키보드로 모든 기능을 사용할 수 있어야한다.

 

b. 읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야한다.

 

c. 사용자가 콘텐츠를 탐색하는 방법과 그들이 어디에 위치하고 있는지를 알 수 있는 방법을 제공해야한다.

---

 

3. 이해의 용이성 

정보와 사용자 인터페이스 운용은 이해할 수 있어야한다.

 

a. 텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.

 

b. 웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야한다.

 

c. 사용자의 실수을 방지하고 수정할 수 있도록 도와야한다

---

 

4. 내구성

콘텐츠는 각기 다른 브라우저에서 현재와 미래에 모두 동작할 수 있도록 웹 표준을 준수해 개발하여야 한다. 즉 호환성을 최대로 높여야한다.

---

 

위의 내용은 WCAG 2.0 기준입니다.

현재는 WCAG 2.1을 채택해 사용하고 있다고 합니다.

먼저 WCAG 2.0을 충족하고 단계적으로 2.1을 적용할 예정입니다.

 

WCAG 2.1

• 시각 (Visual)
• 청각 (Auditory)
• 지체 (Physical)
• 음성 (Speech)
• 인지 (Cognitive): WCAG 2.1 추가 항목
• 언어 (Language)
• 학습 (learning): WCAG 2.1 추가 항목
• 신경 (Neurological)

참고 블로그

🌐 웹 표준 & 웹 접근성 이란?

 

[HTML] 웹 콘텐츠 접근성 가이드라인 WCAG 2.1

 

웹 컨텐츠 접근성 지침 이해하기 - 접근성 | MDN