TIL 112 - 웹 표준과 웹 접근성

김영현·2024년 7월 29일

TIL

목록 보기

122/129

웹 표준이란?

웹에서 사용되는 기술들의 표준화를 의미한다. 표준화란 무엇일까?
쉽게 예를들어보자면, 도량형이 있을 것이다. 미국의 인치(inch)나 야드(yd)등...이렇게 독자적으로 단위를 사용한다면, 소통에 어려움을 겪을 것이다. 하지만 미터(m)로 통일한다면 소통도 쉽고, 생산품을 만들때 하나의 단위만 신경쓰면 되니 얼마나 편할까?

위와같은 일이 브라우저 역사에도 존재했다. 인터넷의 태동기에 등장한 넷스케이프, 익스플로러, 사파리 등...
다양한 브라우저와 호환되는 웹을 제작하기 위하여 개발자들이 얼마나 힘들었을까?
자세한 내용은 웹 표준이 중요한 이유에서 재미있는 만화로 볼수 있다!

결국 웹표준이란 어떤 브라우저를 사용하던 웹 페이지가 정상적으로 작동하고 똑같이 보이게만드는 것이다.

웹 표준은 어떻게 준수할까?

만약 도량형이라면, 미터법처럼 정해진 단위를 사용하면 된다. 이처럼 웹 표준도 웹 표준을 정의하는 기구에서 정의한 기준을 사용하면 된다.

HTML, 웹 API의 표준 : https://whatwg.org/
CSS의 표준 : https://www.w3.org/
JS의 표준 : https://ecma-international.org/

이밖에도 인터넷 표준, RFC표준, 유니코드 표준(UTF-8) 등이 존재한다.

위 표준을 모두 지키려면 생각보다 꽤 많은 코스트가 소모될 것 같다🤔
다행히도 일반적인 웹 표준을 지키는 방법들이 꽤나 널리 퍼져있으니, 마지막 목차에서 다뤄보겠음!

웹 접근성(a11y)이란?

accessibility에서 a와 y사이 11글자가 들어있다 하여 a11y라 부르기도 한다.

웹 표준 내에 존재하는 목록중 하나인 접근성이다. 능력이 제한된 사람들이 웹사이트를 이용할 수 있게 해준다는 뜻에서 접근성이라는 단어를 사용한다.

시각 장애 : 많은 경우 확대기능을 통해 사용한다. 또한 디지털 텍스트를 읽어주는 스크린 리더를 사용한다.
청각 장애 : 소리가 필요한 부분은 대체 텍스트가 있어야 한다.
운동 장애 : 키보드를 통해 컨트롤 가능하게 해야한다.

이밖에도 다양한 접근성이 고려되어야한다.
실제로 어떻게 웹 표준, 웹 접근성을 고려하는지 간략하게 알아보자

웹 표준과 웹 접근성을 지켜보자

웹 표준과 웹 접근성은 조금만 신경쓰면 쉽게 지킬 수 있다.

DOCTYPE을 선언하자

html 코드를 보면 항상 최상단에 선언되어있는 DOCTYPE! 이녀석은 뭐 하는 태그일까?
사실 HTML태그는 아니고, 선언된 페이지의 HTML 버전이 무엇인지 브라우저에게 명시하는 역할을 수행한다.
최신 문법인 HTML5는 괜찮은데, 레거시 버전들이 문제가 되서 사용한다고 한다.

HTML 웹표준인 whatwg에 나와있다.

HTML5는 딱히 버전을 명시할 필요가 없이 아래처럼 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML !DOCTYPE declaration</title>
</head>
<body>

    <p>이 문서는 HTML 문서입니다.</p>

</body>
</html>

혹시나 HTML4.01을 사용중이라면, 아래와 같이 적는다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

시맨틱 태그를 사용한다

Semantic tag란, 의미가 담겨있는 태그의 목록이다. 가령 <h1/>태그를 생각해보자.

<h1>제목</h1>

HTML에서 <h1/>태그를 사용해서 렌더링하면, 대부분의 브라우저의 사용자 에이전트 스타일 시트에서 이 태그가 제목처럼 보이게 큰 사이즈의 폰트를 보여준다.

<span style="font-size: 32px; margin: 21px 0;">제목이지만 span태그</span>

위처럼 나타내도 문제는 없지만, 태그 자체에 제목이라는 의미가 없다. 따라서 의미에 적합한 HTML태그를 사용해야하고, 이를 시맨틱 태그라 한다. 이러한 시맨틱 태그를 사용하면 웹 표준, 웹 접근성을 지킬 수 있다.

또한 시맨틱태그를 사용했을때 아래와 같은 이점이 있다.

SEO최적화 : 시맨틱 태그는 검색순위에 영향을 준다.
시각장애 사용자 : 스크린리더로 페이지 탐색시 시맨틱 태그를 안내판으로 사용할 수 있다.

나름대로 시맨틱태그를 잘 사용하고 있었지만, 앞으로는 더 적절한 시맨틱태그가 뭔지 고민해봐야겠다!

명확한 언어 사용하기

우리가 사용하는 언어도 접근성에 영향을 줄 수 있다.

가능하다면 대시를 지양하자. 5-7로 쓰는 대신 5에서 7이라고 표기한다. 만약 스크린리더로 읽게된다면, 5에서 7이 아닌 5 빼기 7이라고 읽힌다!
약어는 실제 표현으로. Jan대신 January를 사용하자!
축약어(두문자)는 자주 사용되는 표현으로 사용하고, 설명을 위해 <abbr>태그를 사용한다.

위처럼 <abbr/>태그를 사용하면 축약어를 설명할 수 있다. 이를 통해 검색엔진, 스크린리더에게 알려준다!

축약어 태그는 처음봤는데 다음부터 축약어 사용시 접근성을 위해 사용해보겠다.
다만 실제 사이트에서 자주 본적은 없다. 접근성을 고려한 마크업, 코딩은 생각보다 더 힘든 길일지도 모르겠다.🙄

페이지 레이아웃시 테이블 태그 지양

예전에는 <table/>태그를 이용해 페이지의 레이아웃을 만들었다. 이렇게 만들어진 레이아웃은 스크린리더가 읽기 부적합하다.
따라서 테이블을 이용하기보단, 시맨틱태그를 적절히 사용해 레이아웃을 만들자. (이건 잘 하고있다!)

UI 컨트롤

웹 접근성 부분에서 키보드를 통해 컨트롤 가능하게 만들어야 한다고 했었다.

https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html
아주 적절한 예시를 가져왔다. 위 사이트에서 탭 키를 몇번 누르면, 탭 포커스가 다른 포커스 가능 요소로 이동한다.
이를 통해 어떤 요소가 포커싱됐는지 구분하고, 탭을 눌러 브라우저를 조작할 수 있게 된다.

<h1>Links</h1>

<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>

<p>
  Another link, to the
  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.
</p>

<h2>Buttons</h2>

<p>
  <button data-message="This is from the first button">Click me!</button>
  <button data-message="This is from the second button">Click me too!</button>
  <button data-message="This is from the third button">And me!</button>
</p>

<h2>Form</h2>

<form>
  <div>
    <label for="name">Fill in your name:</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Enter your age:</label>
    <input type="text" id="age" name="age" />
  </div>
  <div>
    <label for="mood">Choose your mood:</label>
    <select id="mood" name="mood">
      <option>Happy</option>
      <option>Sad</option>
      <option>Angry</option>
      <option>Worried</option>
    </select>
  </div>
</form>

예제 사이트의 코드는 적절한 시맨틱을 활용해 마크업이 되어있다. 그렇기에 기본적인 태그들의 컨트롤 요소들을 잘 활용할 수 있다. 예를들어 <select/>태그에 포커싱되면, 위 아래 방향키를 이용해 옵션을 순회할 수 있다.

웃겨서 캡쳐...ㅋㅋㅋ🤣

버튼 대신 div를 사용해 마크업하는 사람들도 있다.

<!-- 잘못된 예시😱 -->
<div data-message="This is from the first button">Click me!</div>
<div data-message="This is from the second button">Click me too!</div>
<div data-message="This is from the third button">And me!</div>

버튼 태그대신 다른 태그를 사용해서 의미를 잃고, 버튼 태그 기본 동작또한 잃게된다. 따라서 모든 버튼 기능을 직접 구현할 게 아니라면, 시맨틱 태그를 잘 활용하자.

텍스트 라벨 활용하기

버튼이나 링크, 인풋요소를 만들때 보통 텍스트로 라벨링을 한다.

<!-- 잘못된 예시😱 -->
<p>
  고래들은 정말 멋진 생물이에요!
  <a href="whales.html">누르세요!</a>.
</p>

위 예시는 스크린 리더를 사용할 때 문제가 된다. 맥락 밖에서도 이해 가능한 라벨을 만들어야한다.
따라서 단순한 누르세요! 보다....

<!-- 옳게 된 예시😉 -->
<p>
  고래들은 정말 멋진 생물이에요!
  <a href="whales.html">더 많은 고래들을 만나러가기!</a>.
</p>

이런 예시가 훨씬 맥락에 부합하고, 이해하기 쉽지 않을까?

<label/>태그도 맥락에 부합하게 사용하면 좋다.

<!-- 잘못된 예시😱 -->
Fill in your name: <input type="text" id="name" name="name" />

위 예제를 스크린리더로 읽을 시 'edit text' 라는 설명 한 줄만 주어진다. 이를 <label/>태그를 사용해 접근성을 잘 지킨 코드로 변환해보자.

<!-- 옳게 된 예시😉 -->
<div>
  <label for="name">Fill in your name:</label>
  <input type="text" id="name" name="name" />
</div>

왜 <label/>태그를 사용하는 지 잘 몰랐는데, 이 기회에 알게되어 좋았다!

대체 텍스트를 사용하기

텍스트만 존재하는 콘텐츠는 괜찮지만, 멀티미디어 콘텐츠는 내재적으로 접근성을 제공하지 않는다.
예를들어 시각장애인은 이미지, 영상콘텐츠를 볼 수 없고 청각장애인은 음성 콘텐츠를 들을 수 없다.
이런 멀티미디어 콘텐츠들을 사용하지 못할 때 대체 텍스트가 있어야 한다.

https://mdn.github.io/learning-area/accessibility/html/accessible-image.html
위 예제 사이트의 코드는 아래와 같다.

<img src="dinosaur.png" />

<img
  src="dinosaur.png"
  alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />

<img
  src="dinosaur.png"
  alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
  title="The Mozilla red dinosaur" />

<img src="dinosaur.png" aria-labelledby="dino-label" />

<p id="dino-label">
  The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like
  a human, with small arms, and a large head with lots of sharp teeth.
</p>

비장애인이 봤을땐 모두 똑같은 공룡 4마리다. 그러나 스크린리더로 읽으면 정보량의 차이가 어마어마하다!
alt속성을 입력한 두번째, 세번째 이미지는 스크린 리더가 alt속성에 기입된 텍스트를 읽어준다. 그에 비해 첫 번째 이미지는 파일의 경로인 '/dinosaur.png, image'를 읽어준다.

네 번째 이미지는 조금 특별한 방식인데, id를 이용하여 설명을 라벨링하는 것이다. 여러개의 이미지에 같은 설명이 필요하다면 이 방식이 제일 적합하다!

번외) 웹 표준과 스타일 시트

요즘은 보통 스타일 시트를 불러와서 사용하는 경우가 많다. 분리하는 이유는 다양하지만 결국 관심사 분리와 스타일 시트 재사용이 클 것이다.

웹 표준의 관점에서 봐도 비슷하다.

css 웹표준인 w3에서 발췌

스타일시트 파일로 따로 분리하여 사용하면 위와같은 이점이 있다. 허나 인라인 스타일이 웹표준을 지키지 않는다는 건 아니다.

결론

웹 표준과 웹 접근성, 어려워 보였지만 간단한 주제였다.

웹 표준은 도량형의 통일처럼 다양한 브라우저에서 같은 화면을 볼 수 있게 통일 해놓는 기준을 뜻한다. 이는 개발자 경험과 사용자 경험을 동시에 상향시켜준다.

또한 웹 접근성은 능력이 제한된 사람들도 웹을 이용할 수 있게 해주고, 검색엔진에 더 잘 노출될 수 있게 해준다.

따라서 프론트엔드 개발자라면 웹 표준과 웹 접근성의 의미를 알고 적용하려는 노력을 꼭 해야한다고 볼 수 있다! (기업 차원에서 하면 더 좋을 것 같다)

김영현

모르는 것을 모른다고 하기

이전 포스트

TIL 111 - Drag And Drop In React

다음 포스트

TIL 113 - Concurrency vs Parallelism(동시성, 병렬성)

4개의 댓글

ksjdev

2024년 8월 6일

저도 요새 웹 접근성에 대해서 관심이 있어서 재미있게 봤습니다!!ㅎㅎ
추가로 IR기법이나, 네이버는 왜 header main footer를 사용하지 않고 div에 role으로 부여하는지 알아보셔도 좋을 것 같아서 댓글 남겨드려요!

2개의 답글