• [되짚기] 웹표준과 웹접근성

    2020. 4. 4.

    by. 나나 (nykim)

    320x100

     

     

    웹 퍼블리셔로 일하면서 '뭔가 알고는 있는데.... 뭐라 설명하면 좋지🙄' 싶은 것들이 있더라구요.
    그래서 이번 기회에 기본적인 것들을 한 번 되짚어보려고 합니다.

    결국 기본이 제일 중요한 거니까요 :>

     


     

    웹 표준이란

    웹 표준이란, 웹의 표준입니다. 어....... 그러니까.... 웹에선 이 규칙을 표준으로 삼고 따르세! 라고 정한 것입니다.

     

    이렇게 표준을 정해놓는 이유는, 그래야 사용자들이 어떤 운영체제나 브라우저로 접속하더라도 동일한 결과를 얻을 수 있기 때문입니다. 정보에 차별성이 있어서는 안 되니까요. 아래에서 설명할 웹 접근성과도 맥락이 통하는 부분이죠. 결국 웹 표준이란 웹 접근성을 위해 필요한 내용이라 할 수 있습니다. (+ 그리고 개발자도 개발할 때 편하니까요!)

     

    보통 웹 표준이라 함은, W3C(World Wide Web Consortium)이라는 국제 컨소시엄에서 내놓는 표준안을 일컫습니다. 이들은 열심히 토론하여 Draft 단계부터 4단계를 거쳐 확정 권고안(REC)을 내놓습니다.

    W3C Validator에서 웹 표준 문법 검사를 할 수 있어요.

     

     

    크로스 브라우징

    W3C가 정한 표준 기술을 보고, 각 브라우저 업체는 "우린 이렇게 만들래!" "난 이렇게 해야지~"하고 각자의 기술로 브라우저를 만들어 냅니다. 그래서 브라우저마다 조금씩 다르게 구동이 되는 부분이 있습니다. 이런 부분들을 체크해서 어떤 브라우저에서도 잘 보일 수 있게 하는 것이 웹 퍼블리셔의 역할입니다.

     

    아, 일반적으로 크로스 브라우징이라 함은, 인터넷 익스플로러(....할많하않)를 이렇게! 저렇게! 해서 안 깨져 나오도록 하는 걸 말하더라고요 ;-)

     

     

    웹 접근성

    월드 와이드 웹을 만든 팀 버너스 리는, '웹은 장애에 상관없이 모든 사람이 정보를 공유할 수 있는 공간'이라고 했습니다.
    웹 접근성은 이에 맞추어 일반 사용자부터, 장애인이나 고령자까지 말 그대로 "누구든" 웹 콘텐츠에 접근할 수 있어야 함을 말합니다. 마우스 사용이 힘든 사용자를 위해 키보드에 대한 대응을 추가하거나, 스크린 리더기로 웹에 접속하는 사람들을 위해 대체 텍스트 등을 추가하는 것, 고령 사용자를 위해 폰트 크기를 키우는 것 등이 그 예입니다.

     

    W3C에서 제정한 웹 콘텐츠 접근성 가이드라인 (WCAG)에는 네 가지의 원칙이 있습니다. (앞 글자만 따서 POUR라고도 부른대요!)

     

    1. 인지 가능(Perceivable)
      사용자가 콘텐츠를 인지할 수 있도록 해야 합니다. 폼에 라벨을 달아 입력을 돕고, 콘텐츠가 제공되지 않을 때를 대비해 대체 텍스트를 넣어주고, 꾸미는 요소는 스크린 리더기가 무시할 수 있도록 해주는 것들이 해당합니다.

    2. 작동 가능(Operable)
      사용자가 UI 구성 요소를 사용할 수 있어야 합니다. 키보드 동작을 위한 :focus, tabindex 추가가 그 예입니다.

    3. 이해 가능(Understandable)
      사용자가 콘텐츠를 이해할 수 있도록 도와야 합니다. 이게 텍스트인지 이미지인지 버튼인지 혼란이 오면 안 되겠죠.

    4. 안정적(Robust)
      장애인 사용자를 위한 보조 기술은 물론, 다양한 사용자 에이전트에 호환되어야 합니다.

     

    웹 표준과 웹 접근성을 지키면

    1. 멋진 사장님이 됩니다

      장애인차별금지법에 의한 웹 접근성 의무 조항에 해당한다면 당연히 지켜야겠지만, 그렇지 않더라도 기업의 사회적 책임을 다한다는 점에서 긍정적인 영향을 줄 수 있습니다.

    2. 검색엔진최적화(SEO)에 도움이 됩니다

      스크린 리더기가 잘 읽는다는 건, 크롤러도 잘 읽을 수 있다는 뜻! 웹 표준과 웹 접근성이 SEO의 전부는 아니지만, 큰 영향을 주기 때문에 경제적 가치가 있어요.

    1. 더 나은 UX를 만들 수 있습니다

      일반적인 사용자라 하더라도, 마우스가 고장났다던가! 인터넷이 느리다던가! 하는 영 좋지 않은 상황을 마주할 수 있습니다. 꼼꼼한 부분까지 고려한 웹 서비스는 사용자가 더 좋은 경험을 얻는 데 도움을 줄 수 있습니다.

     

     


     

    참고 사이트 👇

    - 다룸 (다음, 웹표준을 다루다)

    - 웹접근성과 웹표준

    - WEB CLUB

     

     

     

    728x90

    'Blog > Markup' 카테고리의 다른 글

    버튼에 타입을 쓰는 이유 (button type="button")  (22) 2021.05.01
    [되짚기] HTML5와 태그  (3) 2020.04.04

    댓글