웹접근성과 웹 표준 [시맨틱 태그, SEO]

 

좋은 웹사이트는 보기 좋을 뿐만 아니라 누구나 쉽게 접근할 수 있고 어떤 환경에서도 문제없이 동작해야 한다.

이를 가능하게 해주는 것이 바로 웹 접근성과 웹 표준이다.

웹 접근성과 웹 표준은 무엇이며 왜 준수하여야 하는지 그리고 어떻게 준수하는지를 이야기하려고 한다!

 

웹 접근성이란?

장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것

 

웹접근성을 준수해야하는 이유

• 정보 격차 해소
  시각, 청각, 지체 장애 등으로 인해 생길 수 있는 장벽을 없애서 누구나 원하는 정보를 얻을 수 있게 해준다.
• 모든 상황에 대응 가능
  어두운 장소에서 밝은 화면을 보거나 반대로 햇빛 아래에서 스마트폰을 보는 상황처럼 다양한 환경에서도 잘 작동하는 웹을 만들 수 있다.
• 유지보수 효율 향상
  웹 접근성은 단순히 장애인분들만을 위한 것이 아니라 논리적이고 구조적인 웹을 설계하게 도와주기 때문에 유지보수와 리팩토링이 쉬워진다.

---

웹표준이란?

사용자가 어떤 브라우저나 기기를 사용하더라도 홈페이지 화면을 동일하게 볼 수 있도록 하는 국제적인 약속이며

표준화 단체인 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 뜻한다

 

원칙 1. 인식의 용이성 (Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
원칙 2. 운용의 용이성(Operable) : 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
원칙 3. 이해의 용이성(Understandable) : 콘텐츠는 이해할 수 있어야 한다.
원칙 4. 견고성(Robust) : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

 

 

내가 현재 접속한 사이트가 웹 표준에 맞게 잘 작성되었는지 확인할 수 있는 검사 사이트는 아래 링크를 통해 접속할 수 있다.

https://validator.w3.org/check?uri=chaircoach.dogfoot.info%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

 

---

 

웹접근성과 웹표준을 준수하기 위해서 필요한 것

시맨틱 태그(Semantic Tag) 사용

시맨틱 태그란 의미를 담고 있는 HTML 태그로 태그 이름만 보고도 태그가 어떤 역할을 하는지 알 수 있는 태그이다.

웹 페이지의 의미와 구조를 명확하게 전달하기 위해서 사용된다.

 

<div> 태그만 쓰면 구조 파악이 어렵지만 <header>, <nav>, <section>, <article>, <footer> 같은 시맨틱 태그는 코드를 읽는 사람에게 명확한 의미를 전달해준다!

 

시맨틱 태그를 왜 써야 할까?

• 가독성 향상 - 태그만 봐도 구조를 쉽게 파악할 수 있다.
• SEO(검색엔진최적회)에 유리 - 검색엔진이 콘텐츠 구조를 정확히 이해한다.
• 웹 접근성 향상 - 스크린 리더가 페이지를 더 잘 읽어준다
• 유지보수 편리 - 구조가 명확해서 수정할 때 편리하다

시맨틱 태그 종류

<header> : 페이지나 섹션의 머릿부분

<nav> : 내비게이션

<main> : 주요 콘텐츠 영역

<section> : 구획 나누기

<article> : 독립적인 글이나 게시물

<footer> : 바닥글

 

SEO (검색엔진 최적화)

SEO란 Search Engine Optimization의 약자로 검색엔진에 친화적인 사이트를 구축하여 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화하는 작업이다.

여기서 Search Engine이란 사용자가 원하는 정보만을 여러 웹 사이트나 웹 페이지 등에서 검색해 주는 시스템이나 프로그램 등을 통틀어 지칭하는 것이다.

 

 SEO를 위해 사용해야 할 상위 5가지 HTML 태크

1) Title Tag(타이틀 태그)

Title Tag는 클릭 가능한 헤드라인으로 검색엔진 결과 페이지에 표시된다.
페이지의 주요 내용을 명확하고 포괄적으로 설명해야 하며, 검색 의도를 판단하는 데 중요한 역할을 한다.
타이틀은 클릭 수와 트래픽을 늘릴 수 있는 요소로 순위에 어느 정도 영향을 미친다.

 

2) Meta Description Tag(메타 설명 태그)

메타 설명 태그는 검색엔진 결과 페이지(SERP)에서 제목 태그 아래에 표시되는 짧은 설명글이다.
이 설명은 사용자가 검색결과를 클릭할지 결정하는 데 영향을 주기 때문에 페이지의 고유한 내용을 담아야 하고 관련 키워드도 포함하는 것이 좋다.
잘 작성된 메타 설명은 클릭률을 높이는 데 도움이 된다.

<meta name="description" content="잠을 편안하고 오랫동안 자는 방법 소개." />

3) Canonical Tag(캐노니컬 태그)

캐노니컬 태그는 비슷하거나 중복된 페이지들 중에서 원본 페이지가 무엇인지 검색엔진에 알려주는 태그이다.
이걸 설정해두면 중복 콘텐츠로 인한 SEO 점수 분산을 막을 수 있고 검색엔진이 정확한 페이지를 인식하게 된다.

예를 들어 아래와 같은 3개의 페이지가 모두 비슷한 내용을 담고 있다면

• https://sweeb/good
• https://sweeb/good1
• https://sweeb/good2

모두 다음과 같이 캐노니컬 태그를 설정해준다. 

<link rel="canonical" href="https://sweeb/good" />

이렇게 하면 검색엔진은 첫 번째 URL을 원본 페이지로 인식하고 나머지는 중복으로 보지 않게 된다.

 

4) Heading Tag(헤딩 태그, H1-H6)

Heading Tag는 HTML에서 <h1>부터 <h6>까지 있는 제목 태그로 콘텐츠 구조를 구분하는 역할을 한다.

• 검색엔진이 페이지의 주제를 파악하는 데 도움을 준다.
• 사용자가 페이지를 스캔하면서 정보를 빠르게 찾을 수 있게 해준다.
• H1 태그는 페이지의 핵심 주제를 한 줄로 요약해야 하고 하나의 페이지에 딱 1번만 사용하는 것이 좋다.
• H2~H6는 서브 타이틀처럼 계층적으로 활용하면 된다.

<h1>오늘의 할 일</h1>
<h2>1. 취미생활하기</h2>
<h3>추천 취미 생활: 악기 연주, 책 읽기</h3>
<h2>2. 잠자기</h2>
<h3>자기전에는 이불을 털자</h3>

 

5) Image Alt Attributes(Image Alt Text, 이미지 Alt 속성)

이미지 Alt 속성은 이미지를 설명하는 택스트로 이미지가 보이지 않거나 스크린 리더를 사용하는 사람이 내용을 이해할 수 있도록 도와주는 정보다.

• 검색엔진이 이미지의 내용을 인식할 수 있다.
• 이미지가 로딩되지 않을 때 대체 텍스트로 표시된다.
• 시각장애인 사용자에게 접근성을 높여주는 역할을 한다.
• 이미지 검색에서도 SEO 효과가 있다.

alt="이미지" 이렇게 추상적인 의미를 작성하는 것보다 alt="SEO 전략 이미지" 이런식으로 이미지의 내용을 구체적으로 설명해야 한다.

 

 

 

이 외에도 ARIA 속성인 aria-label, aria-labelledby가 존재한다.

스크린 리더 사용자에게 더 명확한 정보를 제공하기 위해 사용하는 속성으로 시각적으로는 보이지 않더라도 보조 기술을 사용하는 사용자에게는 꼭 필요한 설명을 제공해 웹 접근성을 크게 향상시킬 수 있다.

 

aria-label은 요소에 직접적인 설명을 제공할 때 사용한다. 해당 요소에 레이블이 시각적으로 존재하지 않을 때 유용하다. 예를 들어 아이콘 버튼에 텍스트가 없을 때 스크린 리더가 해당 버튼의 목적을 파악할 수 있도록 도와준다.

 

아래 코드는 시각적으로는 돋보기 아이콘만 보이지만 스크린 리더 사용자에게는 "검색"이라는 설명이 들리게 된다.

<button aria-label="검색">🔍</button>

 

aria-labelledby는 특정 요소가 다른 요소에 의해 설명될 때 사용한다. 보통 이미 시각적으로 설명이 있는 경우 해당 요소의 id를 참조해 연결해준다.

---

 

 

사용자 모두가 정보에 자유롭게 접근할 수 있게 하고 다양한 환경에서도 동일한 페이지를 제공하는 것은

웹 개발자가 만들어 나가야한다 !

결국 모두를 위한 웹을 만드는 것이 좋은 웹사이트의 시작점이라고 생각한다 !