[Web] 웹 접근성

6 minute read

2023.01.01

💡 웹 표준 & 웹 접근성 & SEO

웹표준이란?

W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙인데, 여러가지 브라우저(사파리,크롬,엣지 등)에서 페이지가 동일하게 보이거나 동작할 수 있도록 만드는 제작 기법 이다.

웹 표준의 장점

유지 보수의 용이성

웹 표준으로 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았다. 그러다보니 어느 한 부분을 수정하려면 전부 뜯어고쳐야 할 때가 잦았는데, 도입 함으로써 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다.

웹 호환성 확보

웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다.

검색 효율성 증대

적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있기 때문에 홍보를 위한 비용을 들이지 않아도 검색의 효율성을 높일 수 있게 된다.

웹 접근성 향상

브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양하다. 이 모든 환경과 사용자에 맞춰서 웹 페이지를 개발하는 일은 쉽지 않지만 웹 표준에 맞춰 개발하는 것 만으로도 이러한 문제를 해결할 수 있다.

Semantic HTML

semantic : 의미의, 의미가 있는 이라는 뜻의 영단어
HTML : 화면의 구조를 만드는 마크업 언어

이라는뜻,

Semantic의 차이

<div> 와 <span> 으로 화면 구성하기

HTML의 구조만 보고는 현재 상태에서 각 태그가 어떤 역할을 할지 감이 잘 오지 않는다.

시맨틱 요소로 화면 구성하기

반대로 시맨틱하게 태그를 넣으면 태그 이름만 보고 어떤 역할을 할 수 있는지 유추할 수 있게 된다.

Semantic 필요성

개발자간 소통

여러 명의 개발자가 웹 페이지를 개발하면서 <div> 와 <span> 으로만 HTML 코드를 작성한다고 하면 주석을 작성해서 설명해야 한다. 이러한 귀찮은 과정을 시맨틱한 요소를 사용하기만 해도 없앨 수 있다.

검색 효율성

검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. <div> 와 <span> 만 사용한 문서에서는 모든 요소가 비슷한 중요도의 내용을 담고 있다고 판단한다. 하지만 시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시한다.

웹 접근성

웹 접근성은 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 한다. 시각 장애인의 경우 음성으로 화면을 이용하게 되는데 HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있게 된다.

Semantic 종류

잘 못된 HTML문서 사용법

인라인 요소 안에 블록 요소 넣기

// h1, div 요소는 블록 요소
// a, span 요소는 인라인 요소
<a href=""> <h1>나쁜 예시 1</h1> </a>
<span> <div>나쁜 예시 2</div> </span>

<b>, <i> 요소 사용하기

// <b> 요소는 글씨를 굵게
// <i> 요소는 글씨를 기울게
<b>글씨를 두껍게</b>   -- 대체하기 -->  <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i>   -- 대체하기 -->  <em>콘텐츠 강조하기</em>

<hgroup> 마구잡이로 사용하기

// <hgroup> 요소들은 목차의 역할을 하면서 콘텐츠의 상하 관계를 표시하기 위해서 사용

// 나쁜 예시
<h1>엄청 큰 글씨</h1>
    <h3>적당히 큰 글씨</h3>
  <h2>큰 글씨</h2>
          <h6>엄청 작은 글씨</h6>
      <h4>그냥 글씨</h4>

// 좋은 예시
<h1>제목</h1>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
    <h3>작은 목차</h3>
  <h2>큰 목차</h2>
    <h3>작은 목차</h3>
      <h4>더 작은 목차</h4>
      <h4>더 작은 목차</h4>

<br /> 연속으로 사용하기

// <br /> 은 쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해서 사용하는 요소

// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />

// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>

// 좋은 예시 2
  //HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>

  //CSS 파일
.margin { margin: 10px }

인라인 스타일링 사용하기

//HTML 파일
<head>
  <style>
    h1 { color : "red" }
  </style>
</head>

(O) <h1>스타일링 속성은 CSS로 작성해주세요.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>  
 
//CSS 파일
h2 { color : "yellow" }

검색엔진최적화

SEO(Search Engine Optimization, 검색 엔진 최적화)라고 하며, 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만든다.

SEO 종류

On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 구조와는 관계가 없다.

SEO에 영향을 주는 요소

<title> 요소

<title> 요소는 검색 결과창에서 제목에 해당하는 요소로, <head> 요소의 자식 요소로 작성

제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어진다.
<title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.

그렇다고 같은 키워드를 반복하면 검색시 불이익을 받을 수 있다.

<meta> 요소

메타 데이터를 담는 요소. 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터.

<meta> 요소도 <head> 요소의 자식 요소로 작성해주는 것이 일반적

SEO를 위한 meta 요소

<meta name="속성값" content="내용" />

오픈 그래프

property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적

<meta property="속성값" content="내용" />

<hgroup> 요소

<hgroup> 요소는 콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높다. 따라서 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급한다. 그렇기 때문에 콘텐츠를 작성할 때 핵심 키워드를 의식해서 <hgroup> 요소에 넣어주는 것도 SEO에 도움이 된다.

웹 접근성

일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다.

웹 접근성을 갖추면…

사용자층 확대
다양한 환경 지원
사회적 이미지 향상

웹 콘텐츠 접근성 지침

인식의 용이성(Perceivable)

적절한 대체 텍스트 사용
- alt 속성 사용하기
  - <img src="이미지 주소" alt="대체 텍스트" />
- 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우에는 작성하지 않는 것이 좋다
자막 제공
- 자막을 포함한 동영상 사용
- 자막을 지원하는 멀티미디어 플랫폼 사용
- 비디오 요소 안쪽에 track 요소를 사용하여 자막 파일 불러오기
  - <video ... ><track src="자막.vtt" kind="captions" /></video>
색에 무관한 콘텐츠 인식
- 콘텐츠에 테두리 설정
- 콘텐츠에 레이블 달기
명확한 지시사항 제공
- 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
텍스트 콘텐츠 명도 대비
- 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
- 다음 상황에서는 콘텐츠와 배경 간의 명도 대비가 3 대 1 까지 허용.
  - 텍스트가 18pt 또는 굵은(Bold) 14pt 이상일 경우, 확대 가능한 페이지인 경우, 비활성화 된 콘텐츠인 경우, 장식 목적의 콘텐츠인 경우
자동 재생 금지

스크린 리더를 사용하는 경우, 자동으로 재생된 소리와 겹쳐 페이지 내용을 파악하기 어려워진다.
불가피하게 제공해야 하는 경우에는 다음과 같이 해결
- 가장 먼저 위치시켜 정지할 수 있게 구현하기
- ESC를 눌러 정지
- 3초 내에 정지

콘텐츠 간 구분

운용의 용이성(Operable)

키보드 사용 보장
- 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
초점 이동
- 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
조작 가능
- 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
응답 시간 조절
- 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
정지 기능 제공
- 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
깜빡임과 번쩍임 사용 제한
- 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
반복 영역 건너뛰기
- 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
제목 제공
- 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
적절한 링크 텍스트
- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

이해의 용이성(Understandable)

기본 언어 표시
- 주로 사용하는 언어를 명시해야 한다.
- <html lang="ko">
사용자 요구에 따른 실행
- 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
- 링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주기
  - <a href="...">페이지<span class="blind">새 창</span></a>
- 링크 요소에 title 속성으로 새 창 작성하기
  - <a href="..." title="새 창">페이지</a>
- 링크 요소에 target=”_blank” 속성을 넣기
  - <a href="..." target="_blank">페이지</a>
콘텐츠 선형 구조
- 콘텐츠는 논리적인 순서로 제공해야 한다.

// 잘못 작성한 예시 : 탭1 -> 탭2 -> 탭1 관련 내용 -> 탭2
<div>탭1</div>
<div>탭2</div>
<div>탭1 관련 내용</div>
<div>탭2 관련 내용</div>
// 해결 방법 : 탭1 -> 탭1 관련 내용 -> 탭2 -> 탭2
<div>탭1</div>
<div>탭1 관련 내용</div>
<div>탭2</div>
<div>탭2 관련 내용</div>

표의 구성
- 표는 이해하기 쉽게 구성해야 한다.
레이블 제공
- 사용자 입력에는 대응하는 레이블을 제공해야 한다
오류 정정
- 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

견고성(Robust)

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

Twitter Facebook LinkedIn

김세훈 / Sehoon Kim