웹 표준과 웹 접근성

Bitnara Lee·2022년 2월 24일
0

월드 와이드 웹(World Wide Web, WWW, W3):

  • 팀 버너스 리(Tim Berners-Lee)가 창시
  • 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간.
    간단히 웹(the Web)이라 부르는 경우가 많다.
  • 웹 !== 인터넷 (웹은 전자 메일과 같이 인터넷 상에서 동작하는 하나의 서비스일 뿐)

⭐ 웹 표준

웹에서 표준적으로 사용되는 기술이나 규칙
어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동하는 것

웹 표준 준수는 웹 접근성 준수를 위한 핵심이라고 할 수 있다. (웹 접근성 > 웹 표준, 웹 표준은 웹 접근성을 구현하기 위한 부분적 요소)

웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것:
-> 사이트나 페이지가 올바른 HTML, CSS, 자바스크립트를 가지고 있다는 것

장점

  • 소스의 통일화로 수정 및 운영 관리에 용이
  • CSS와 HTML의 분리로 유지보수 시간 단축, 불필요한 마크업의 최소화로 페이지 로딩 속도 향상
  • 다양한 브라우저와 디바이스, 유저(장애인,고령자 등 포함)로부터의 접근성 향상
  • SEO 이점

웹 표준의 기술

  • XHTML ( eXtensible Hypertext Markup Language )
  • CSS (Cascading Style Sheets)
  • XML (eXtensible Markup Language)
  • DOM(Document Object Model)
  • ECMAScript : ECMA international 의 ECMA-262 기술 명세에 정의된 표준화된 스크립트 프로그래밍 언어

⭐ 웹 접근성

장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 것
-> 유저(일반인, 장애인, 고령자 등)가 어떠한 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)에서도 제약없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 하는 것

시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해 한다.
하지만 스크린 리더는 스스로 웹페이지의 내용을 분석하지 못한다.
예를들어 '로그인'이라는 텍스트 대신 메뉴라고 로그인 이미지를 사용할 경우 비 시각 장애인의 눈에는 로그인 메뉴로 인식 가능하지만, 소프트웨어의 입장에서는 그저 이미지일 뿐이다.
따라서, 되도록이면 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장되며, 부득이하게 이미지를 사용할 경우 반드시 이미지가 어떤 내용인지 아래와 같이 설명을 추가 해야 한다.

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

4가지 핵심 원칙:

1) 인지성(Perceivable)

  • 정보와 유저 인터페이스 요소를 인식할 수 있다.

    • 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공
    • 정보와 구조의 손실 없이 콘텐츠를 다른 방식들로 표현할 수 있어야 한다.
      • 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공
    • 색에 관계없이 인식될 수 있어야 한다.
    • 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
    • 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 하고, 이웃한 콘텐츠는 구별될 수 있어야 한다.

2) 운용성(Operable)

  • 유저 인터페이스 요소를 조작하고 네비게이션 할 수 있어야 한다.

    • PC웹: 키보드로 모든 기능을 사용할 수 있어야 한다 / (터치 기반) 모바일웹: 누르는 동작으로 모든 기능 사용할 수 있어야 한다.
    • 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
      • 콘텐츠 응답시간, 반복되는 영역(건너뛰기), 움직임이 제어(정지기능)될 수 있어야 한다.
    • 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
    • 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
    • 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

3) 이해성(Understandable)

  • 정보와 유저 인터페이스를 쉽게 이해할 수 있어야 한다.

    • 주로 사용하는 언어를 명시해야 한다.
    • 콘텐츠는 논리적인 순서로 이해하기 쉽게 제공한다.
    • 유저 입력에 대응하는 레이블 제공한다.
    • 유저 입력 오류를 방지 및 수정 방법 제공한다.

4) 내구성(Robust)

  • 콘텐츠는 보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 위해 충분히 내구성을 가져야 한다.
    (현재 및 미래의 기술로 접근 가능하게)

    • 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
    • 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

웹 접근성을 위해 사용되는 보조기기 :

자막, 스크린리더, 자동완성 기능, 마우스스틱, 색상 대비 디자인 등.

위키
웹접근성과 웹표준
블로그

profile
Creative Developer

0개의 댓글