웹 표준

박준수·2023년 4월 17일

웹 접근성과 웹 표준 그리고 반응형 웹

목록 보기

2/5

웹 표준이란?

웹 표준은 웹에서 사용되는 기술들의 표준화를 의미한다.
즉, 웹 사이트를 구성하는 HTML, CSS, JavaScript 등의 언어들이 표준화된 방식으로 작성되어야 한다는 것이다.
쉽게 말하면 사용자가 어떤 브라우저나 기기를 사용하더라도 홈페이지 화면을 동일하게 볼 수 있도록 하는 것이 웹 표준인 것이다.

왜 웹표준을 지켜야 하는가?

웹 표준이 나오게 된 배경

웹 표준이 없던 1990년대 말 ~ 2000년대 초반에는 웹 사이트 개발자는 사실상 두 개의 사이트를 만들어야 했다. (익스플로러, 넷스케이프)
지금과 같이 표준이 있었더라면 한번만 작업해도 되고 많은 노동력과 시간을 아낄수 있다. 자연스레 정보 제공의 질도 올라갈 것이다.

웹 페이지의 호환성

웹 표준을 준수하면, 웹 페이지가 모든 브라우저에서 일관적으로 표시되게 된다.
이를 통해 사용자들은 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있어 오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성과 운용성이 확보된다.

검색 엔진 최적화 (SEO)

웹 표준을 준수하면, 검색 엔진에서 웹 페이지를 더욱 잘 인식할 수 있다.
이를 통해 더욱 높은 검색 결과를 얻을 수 있다.

유지보수 및 확장성

웹 표준을 준수하면, 웹 페이지를 만드는 데 필요한 시간과 비용을 줄일 수 있어 유지보수 및 확장성이 좋아진다.
또한 논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버 부담의 감소로 이어진다.

웹 접근성 향상

웹 표준을 준수하면, 모든 사용자가 쉽게 웹 페이지에 접근할 수 있도록 웹 접근성을 고려할 수 있다.
예를들어 다양한 브라우저, 휴대폰 PDA, 장애인 지원용 프로그램에서도 대응이 가능하므로 접근성이 향상되고 크린리더기 등 보조공학 기기 사용자들이 조금 더 정확한 정보를 얻을 수 있도록 도움을 준다.

어떻게 웹표준을 지킬 수 있을까?

시맨틱 웹

웹 표준의 핵심에는 시맨틱 웹이 있다.
시맨틱 태그를 사용하면 웹의 모든 데이터를 기계가 이해할 수 있는 형태로 제작할 수 있게 되며 이를 시맨틱 웹이라고 부른다.
이는 웹 브라우징에 쓰이는 보조 과학기술인 스크린 리더, 화면 돋보기, 음성 인식, 키보드 오버레이 등의 기계가 웹을 좀 더 쉽게 이해할 수 있도록 해주기 때문에 접근성을 높이는 데 도움이 된다.
마찬가지로 검색 엔진도 HTML 문서를 읽는 기계이기 때문에 시맨틱 태그를 사용해 웹을 개발하게 되면 SEO(Search Engine Optimization, 검색 최적화)에도 도움이 된다.
기계가 웹을 이해할 수 있어야 그 기계를 사용하는 사람도 웹 브라우징을 좀 더 쉽게 할 수 있기 때문에 웹 표준에서 시맨틱 웹은 꼭 필요하다고 할 수 있다.
시맨틱 마크업을 하기 위해선 아래 예시처럼 태그를 의미에 맞게 사용해야 한다.
- 페이지 제목 또는 글 제목에는 <header> 사용
- 콘텐츠 작성자, 저작권 정보, 관련 문서 등의 내용을 포함할 때는 <footer> 사용
- 문서의 핵심 주제를 포함하는 메인 콘텐츠에 <main> 사용
- 독립적으로 구분해야 하는 콘텐츠에 <article> 사용
- 페이지의 가장 중요한 제목으로 <h1> 사용
- 순서가 없는 목록으로 <ul>과 <li> 사용
태그를 반드시 의미에 맞게 사용해야 하는 이유는 스크린 리더는 아래 표의 태그들처럼 태그의 기본 역할을 암묵적으로 자동 결정해 사용자에게 전달하기 때문이다.

물론 aria-role을 통해서 개발자가 태그의 역할을 임의로 바꿀 수는 있지만 올바르지 못한 역할 지정은 스크린 리더 사용자에게 잘못된 정보를 제공하기 때문에 주의해야 한다.

태그	암묵적 기본 역할	적용 가능한 역할
	role=“button”	checkbox, link, option, radio, switch, tab, etc …
~	role=“heading	none, presentation
	role=“list”	directory, group, listbox, menu, etc …
	role=“navigation”	menu, menubar, tablist
	role=“checkbox”	button, checkbox, option, switch

이미지

보통 그래픽 이미지와 같은 콘텐츠를 표현하고자 하는 경우 <img> 태그를 사용한다.
이미지는 텍스트가 아니라 콘텐츠 요소이기 때문에 그 의미나 용도를 스크린 리더가 인식할 수 있도록 대체 텍스트를 제공해야 한다.
alt 이미지의 alt 속성은 이미지에 대한 텍스트 설명을 제공하며 필수는 아니다.
하지만 스크린 리더는 alt의 값을 읽어 사용자에게 이미지를 설명하기 때문에 접근성 측면에서 매우 유용하다.

<img src="/img/img_nudge_typeB_320x219.png" alt="기뻐하는 죠르디" />

버튼

다음은 <img>태그만큼 많이 사용하는 <button>태그이다.
먼저 우리는 스크린 리더가 코드를 어떻게 해석하는지 알아야 한다.
브라우저는 코드를 스크린 리더가 읽을 수 있는 접근성 트리(Accessibility Tree)로 만든다.
스크린 리더는 접근성 트리의 요소를 순차 탐색하게 되는데, 접근성 트리에 표시되는 요소의 Name을 기반으로 해석한다.
여기서 말하는 Name은 Accessible Name이라고도 하며 스크린 리더가 요소를 포커스했을 때 읽는 값으로 author와 contents 중 하나로 결정된다.
이때, author가 contents보다 우선순위가 높다.
author: aria-label, aria-labelledby, title 속성, <img>의 alt 속성, svg의 <desc>
contents: Text 노드

<button type="button">  
<!--<img src="/img/img_common_question.png" alt="물음표" />: 구체적이지 않으며 추상적-->  
	<img src="/img/img_common_question.png" alt="내 대출 승인율이란" />
</button>

👩🏻‍💻 (개발자): 아이콘 모양이 물음표니까 모양 그대로 전달해야지! 📢 (스크린 리더): 내 대출 승인율이란 버튼

위 코드에서 Accessible Name을 확인해 보면 스크린 리더가 왜 “내 대출 승인율이란 버튼”이라고 해석하는지 쉽게 알 수 있다.
<img>의 author는 alt 속성으로 Accessible Name은 “내 대출 승인율이란”이 된다.
<button>은 author가 설정되지 않은 경우 자식 요소의 Accessible Name을 모아 contents로 사용하는 Children Presentational이라는 특징을 갖는다.
따라서 <button>의 content는 ‘내 대출 승인율이란’이 되고 스크린 리더는 자동적으로 결정한 role과 결합해 “내 대출 승인율이란 버튼”이라고 해석하게 된다.
스크린 리더가 어떻게 코드를 해석하는지 이해한 것을 바탕으로, 눈이 보이지 않는 사용자라면 어떤 부분에서 콘텐츠 해석의 어려움을 느낄지 고려해 서비스를 정확히 이해하고 사용할 수 있는 Accessible Name을 제공하는 마크업 작업이 중요하다는 것을 확인할 수 있었다.

표

표는 반드시 사용자가 정보를 이해하기 쉽도록 구성해야 한다.
이를 위해 개발자는 표의 형태를 보고 데이터 표인지, 레이아웃 표인지 구분하여 서로 다른 방식으로 마크업을 해야 한다.
표를 레이아웃 용도로 생각해 <table> 태그를 함부로 남용하면 스크린 리더는 데이터 추출의 어려움을 겪게 되고 사용자도 정보 탐색의 어려움을 느끼게 된다.

스크린 리더는 레이아웃 표와 데이터 표를 다르게 취급한다.
레이아웃 표의 경우 소스 코드 순서에 따라 표의 내용을 간단히 읽는다.

반면 데이터 표의 경우 열 및 행 수를 포함하여 데이터의 존재를 식별하고, 표 탐색 기능을 제공해 행 및 열 머리글 읽기 등을 수행해 사용자가 좀 더 쉽게 데이터를 탐색할 수 있다.

<!-- 잘못된 예시 -->
<table>
  <colgroup>
    <col width="166px" />
    <col width="95px" />
    <col width="95px" />
    <col width="95px" />
  </colgroup>
  <thead>
    <tr>
      <th>부부합산 연소득</th>
      <th>임차보증금 5천만원 이하</th>
      <th>5천만원 초과 ~ 1억이하</th>
      <th>1억원 초과</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>~2천만원</th>
      <td>1.8%</td>
      <td>1.9%</td>
      <td>1.5%</td>
    </tr>
  </tbody>
</table>

<!-- 올바른 예시 -->
<table>
  <caption>
    <span class="blind"
      >부부합산 연소득과 임차보증금 기준 구간별 일반가구 상품 대출 금리</span
    >
  </caption>
  <colgroup>
    <col width="166px" />
    <col width="95px" />
    <col width="95px" />
    <col width="95px" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">부부합산 연소득</th>
      <th scope="col">임차보증금 5천만원 이하</th>
      <th scope="col">5천만원 초과 ~ 1억이하</th>
      <th scope="col">1억원 초과</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">~2천만원</th>
      <td>1.8%</td>
      <td>1.9%</td>
      <td>1.5%</td>
    </tr>
  </tbody>
</table>

표를 볼 수 없는 사람은 표의 행과 열을 구분할 수 없기 때문에 테이블 내 요소 간 구조에 대한 정보를 제공해 사용자가 표를 쉽게 이해할 수 있도록 해야 한다.
위의 코드를 다음과 같이 <caption>과 scope 속성을 추가해 테이블 내의 요소 간 구조에 대한 정보를 제공하도록 수정했다.

1. caption

표의 제목을 <caption> 태그로 제공해 표의 목적을 명확하고 상세하게 설명하여 사용자가 표 콘텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있다.
보통 <caption>태그를 불가피하게 숨기는 경우가 많은데, 이러한 경우 주의해야 할 점은 display:none 혹은 visibility:hidden으로 숨기면 스크린 리더가 해당 내용을 읽을 수 없기 때문에 해당 숨김 속성은 사용하면 안된다.

2. scope

단순 데이터용 표에는 <th>요소를 제목 셀로 사용할 때, 행에는 scope="row"를 사용하고 열에는 scope="col"을 사용해 행과 열을 구분할 수 있도록 한다.

위의 표는 단순 데이터 용이지만, 만약 복합한 구조의 표일 경우 id, header 속성을 추가로 이용하여 관계를 설명해야 한다.
보통 colspan 속성과 rowspan을 사용하는 경우 복잡한 구조의 표라고 할 수 있다.

레이아웃 테이블은 표의 의미를 갖지 않고 단순 모양을 잡기 위한 목적으로 사용해야 한다.
<table>태그를 사용하지 않고 CSS로 테이블 형태를 만들어 사용하는 것을 권장하나 불가피하게 <table>태그를 사용해야 하는 경우라면
summary 속성, <caption>, <thead>, <tbody>, <tfoot>, <th>요소 등 의미 있는 요소를 사용하지 않아야 한다.

개발 보조 도구

접근성을 확보하는 방법 중 첫 발걸음으로 ‘웹 표준을 지키는 것부터’로 접근을 했다면 개발 보조 도구의 도움을 받아 좀 더 상세한 부분들을 확인하고 적용해 볼 수 있다.

Chrome DevTools

Chrome DevTools을 사용해 접근성 트리 확인

https://tech.kakaopay.com/_astro/img-dev-01.865cbb40_Z1mvJqs.avif

[Accessibility Tree View 활성화 방법]

Chrome DevTools를 통해 환경설정 - 실험 탭으로 이동한다.
Enable full accessibility tree view in the Elements panel을 활성화 한다.
DevTools 새로고침한다.
Elements 패널에 표시된 내게 필요한 옵션 버튼을 클릭하여 요소 보기 모드를 전체 접근성 트리 보기로 전환한다.

DOCTYPE 선언

웹 페이지의 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML, XHTML을 사용하는지 명시한다.

HTML

<!DOCTYPE html>
<html lang="ko">
	<head>    
		<meta charset="UTF-8">    
		<title>HTML !DOCTYPE declaration</title>
	</head>
	<body>    
		<p>이 문서는 HTML 문서입니다.</p>
	</body>
</html>