본문 바로가기

WEB

웹 표준과 접근성

월드 와이드 웹에서 공식적으로 정한 웹의 표준이다. 웹 사이트를 개발한다면 꼭 지켜야하는 사항이기도 하다.

  • 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미.
  • 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다.

※ 웹 표준의 장점 

  • 개발 및 운영의 효율성 제고. 즉 소스의 통일화로 수정 및 운영관리가 용이하다.
  • 다양한 브라우저, 휴대폰 PDA, 장애인 지원용 프로그램에서도 대응이 가능하므로 접근성이 향상 되고, 장애인, 고령자 등을 포함한 사용자층도 확대 가능하다.
  • 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버부담의 감소로 이어질 수 있다.
  • CSS와 HTML이 분리되어 유지보수에 들어가는 시간이 단축되고, 불필요한 마크업이 최소화되어 페이지 로딩속도가 향상된다.
  • 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성과 운용성이 확보된다.
  • 스크린리더기 등 보조공학 기기 사용자들이 조금 더 정확한 정보를 얻을 수 있도록 돕는다.
  • SEO에 유리하다.

웹 표준

1. 웹 접근성

  • 모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것

즉, 어떠한 사용자(일반인, 장애인, 고령자 등)가 어떠한 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)에서도 어려움 없이 접근, 이용할 수 있는 것을 접근성이라고 한다.

  • W3C 정의에 따르면 웹 표준은 접근성, 사생활 보호, 보안, 국제화의 측면에서 고려해야 한다고 한다.
  • 웹 접근성은 신체적 차이나 장애 여부와 상관없이 누구나 원활하게 웹페이지를 이용할 수 있어야 한다는 것을 의미 한다.

시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해 한다. 하지만 스크린 리더는 스스로 웹페이지의 내용을 분석하지 못한다.


예를들어 '로그인'이라는 텍스트 대신 메뉴라고 로그인 이미지를 사용할 경우 비 시각 장애인의 눈에는 로그인 메뉴로 인식 가능하지만, 소프트웨어의 입장에서는 그저 이미지일 뿐이다.

 

따라서, 되도록이면 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이미지가 어떤 내용인지 아래와 같이 설명을 추가 해야 한다.

<img arc = "img/login.png" alt="로그인 />

 - 팀 버너스 리(Tim Berners-Lee)는 웹을 이렇게 정의했다 : 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간

 

2. 웹 콘텐츠 접근성 지침(WCAG)
1) 인지성(Perceivable)
 - 정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다.

모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
시간을 바탕으로 한 미디어에 대한 대안을 제공해야 한다.
정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.
사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.

2) 운용성(Operable)
 - 사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.

키보드로 모든 기능을 사용할 수 있도록 해야 한다.
읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.

3) 이해성(Understandable)
 - 정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.

텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.

4) 내구성(Robust)
 - 콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.

보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 극대화해야 한다.

3. 웹 접근성을 위해 사용되는 보조기기
 - 자막
 - 스크린리더
 - 자동완성 기능
 - 마우스스틱
 - 색상 대비 디자인 등.

출처: https://goddaehee.tistory.com/244 [갓대희의 작은공간]

'WEB' 카테고리의 다른 글

Reflow와 Repaint  (0) 2021.06.10
Cors란 무엇인가?  (0) 2021.06.07
브라우저 기본 동작원리  (0) 2021.06.04
JSON이 뭔지 알아보자  (0) 2021.03.22