웹표준과 웹접근성에 대한 고찰

돌리의 하루·2023년 2월 28일

인터넷이 웹의 포괄적인 표현이다.
웹표준이란 ‘웹에서 표준적으로 사용되는 기술이나 규칙’

맞춰서 작성할 때의 장점

유지 보수의 용이성
웹 호환성 확보
검색 효율성 증대
웹 접근성 향상

Semantic이란 무엇일까요?

의미,의미가 있다

HTML이란 무엇일까요?

화면의 구조를 만드는 마크업 언어

그렇다면 Semantic HTML이란 의미가 있는 화면의 구조를 만들 수 있는 마크업 언어와 일맥상통하겠죠! 👍

사용자가 보려는 웹 화면을 만들때, <div> <span>으로 충분히 화면을 만들 수는 있지만, 각각의 영역들이 무엇을 뜻하는지는 알기 어려울 것입니다 😭

그렇다면 위의 그림은 어떤가요?
훨씬 보기 좋고 어떤 영역이 무슨 일을 하는지 잘 나타나 있습니다!
이와 같이 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고있는 요소를 시맨틱 요소라고 합니다.

이처럼 시맨틱 요소를 사용한다면, 장점은 명확합니다.

개발자간 소통이 원활하고
검색 효율성이 올라가며
웹 접근성 또한 좋아집니다.

그렇다면 이번엔 시맨틱 요소의 종류를 같이 살펴볼게요👀📖

크로스 브라우징이란?

📚웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미합니다.

동일한 X
동등한 O

둘의 차이는 완전히 똑같은 화면을 보여주는 것이 아니라, 브라우저마다 렌더링엔진이 다르기 때문에 동등한 수준의 정보와 기능을 제공한다는 것입니다!

이 크로스 브라우징을 살펴본 이유는, 프로젝트를 기획할 때 어떤 웹사이트를 만들것인지, 고객이 사용하는 브라우저는 무엇인지, 각 브라우저의 호환성은 어떤지를 고민하며 개발해야하기 때문입니다.

위에 설명한 웹 표준만 잘 지켜도, 어느정도의 크로스 브라우징이 실현가능합니다!😊💞

SEO란?

Search Engine Optimization 검색엔진최적화

검색엔진최적화란,
검색했을 때 검색결과에 노출에 대해서 검색 엔진의 작동 방식에 맞게 최적화 해주는 작업을 말합니다.

웹 페이지를 보다 상위에 노출되게 하는 것입니다.
방법에는 두 가지가 있는데,

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

On-Page SEO

title요소

<title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있습니다.
제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어집니다.
<title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아집니다.
그렇다고 같은 키워드를 반복하면 검색시 불이익을 받을 수 있습니다. 제목에 핵심 키워드는 한 번만 포함시켜야 합니다.

meta 요소

<meta> 요소는 메타 데이터를 담는 요소입니다.
메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터입니다.
<meta> 요소도 <head> 요소의 자식 요소로 작성해주는 것이 일반적입니다.
보통 검색 결과창에서 제목 밑에 따라오는 설명글이 meta요소안에 있는 내용입니다.
name속성을 사용해서 SEO를 사용하는것이 목적인 경우와
property 속성을 사용하여 다른 사람에게 공유하는 것이 목적인 것이 있습니다. property 속성을 사용하는 경우 오픈 그래프라고 하며, 속성값 앞에는 og가 붙습니다.

SEO를 위한 메타요소

open graph (오픈 그래프)

웹접근성

정보에 제한을 받는 사람등을 위한 상황을 해력하고자 노력하고,
동등하게 접근하고 이해할 수 있도록 보장하게 해주는 것입니다.

웹 접근성이 갖춰지지 않았다는 것은?

이미지가 많을수록 웹 접근성에 가깝지 않다고 할 수 있습니다.
이미지에 들어있는 글자는 음성으로 읽어줄 수 있는 스크린 리더를 사용할 수 없습니다.

그래서 우리는 어떻게 해야 하는가?

시각으로 화면을 인식하지 못하는 사용자를 위한 적절한 대체 텍스트

<img src="이미지 주소" alt="대체 텍스트" />

배경 이미지와 같이 정보를 인식할 필요가 없는 경우에는 alt 값으로 빈 문자열을 주어 스크린 리더가 인식하지 않게 합니다.
(정보 전달이 필요한 콘텐츠에 빈 문자열을 입력할 경우 해당 콘텐츠의 존재 자체도 인식하지 못하게 되므로 주의해야 합니다.)
자막 제공
- 자막을 지원하는 멀티플랫폼 요소 사용
- 자막을 포함한 동영상 사용
- 비디오 요소 안쪽에 track요소를 사용하여 자막 불러오기
- 자막을 제공하기 어려운 경우 대본 또는 수어 제공

<video ... >
	<track src="자막.vtt" kind="captions" />
</video>

색에 무관한 콘텐츠 인식
- 콘텐츠에 테두리 설정하기
- 콘텐츠에 레이블 달기
명확한 지시상황 제공
- 지시사항이 동그란 버튼(모양), 가장 큰 버튼(크기), 오른쪽에 있는 버튼(위치, 방향), 빨간색 버튼(색) 등을 가리켜 지시하고 있다면, 시각 장애를 지닌 사용자는 이 지시사항이 어떤 버튼을 가리키는 것인지 알 수 없습니다. 따라서 해당 버튼을 설명하는 대체 텍스트를 작성해야 합니다.
- 소리를 통해 지시하는 경우, 청각 장애를 가진 사용자는 지시사항을 제대로 인지할 수 없습니다. 이런 상황을 대비하여 시각적 피드백도 함께 제공해야 합니다.
텍스트 콘텐츠 명도 대비 : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

자동 재생 금지
불가피하게 제공해야 하는 경우에는 다음과 같이 해결합니다.
1.가장 먼저 위치시켜 정지할 수 있게 구현하기
2.ESC를 눌러 정지
3.3초 내에 정지
콘텐츠 간 구분
키보드 사용 보장
초점 이동
조작 가능
응답 시간 조절
- 가능하면 시간 제한이 있는 콘텐츠를 넣지 않는 것이 좋지만, 꼭 넣어야 하는 상황에서는 (1) 충분한 시간, (2) 종료 안내, (3) 조절 수단을 제공해야 합니다.
- 페이지를 자동 전환하는 경우에도 전환되기까지 시간을 연장하거나 정지할 수 있는 수단을 제공해야 합니다. 특히 스크린 리더나 키보드 사용자도 이 수단을 인지할 수 있는 충분한 시간을 제공해야 합니다.
정지 기능 제공
깜빡임과 번쩍임 사용 제한 : 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

불규칙적으로 깜빡이는 화면은 눈에 피로를 유발하고 심한 경우 광과민성 발작을 일으킬 수 있습니다.
만약 이런 콘텐츠를 제공하게 되는 경우 다음 조건 중 하나를 충족해야 합니다.

1.번쩍이는 콘텐츠가 차지하는 면적이 전체 화면의 10% 미만이어야 함
2.사전에 경고하고 중단할 수 있는 수단을 제공해야 함
3.시간을 3초 미만으로 제한해야 함

반복 영역 건너뛰기
제목 제공
적절한 링크 텍스트
기본 언어 표시 : 주로 사용하는 언어를 명시해야 한다.

<html lang="ko"> //HTML 요소에 lang 속성을 사용하여 제공

사용자 요구에 따른 실행
- 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
- 페이지 진입 시에 팝업이 뜨지 않게 해야 하며, 화면을 가리는 레이어 창(모달)이 있는 경우, 가장 상단에 제공하여 가장 먼저 제어할 수 있도록 해야 합니다.
- 스크린 리더 사용자는 새 창이 떴을 때 이를 인지하지 못하고 기존 페이지를 계속 보고있다고 생각할 수 있습니다. 따라서 새 창임을 알려줄 수 있어야 합니다.

<a href="...">페이지<span class="blind">새 창</span></a> 
//링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주기

<a href="..." title="새 창">페이지</a>
//링크 요소에 title 속성으로 새 창 작성하기

<a href="..." target="_blank">페이지</a>
//링크 요소에 target=”_blank” 속성을 넣기

콘텐츠 선형 구조 : 콘텐츠는 논리적인 순서로 제공해야 한다.
표의 구성
- 비장애인은 표를 보면 그 구조를 인식할 수 있지만, 시각 장애가 있는 경우에는 내용을 들으면서 그 구조를 파악해야만 합니다. 따라서 듣기만해도 표의 구조, 내용을 이해하기 쉽게 구성해야 합니다.
- 테이블 요소 안에 caption 요소를 사용해서 표에 제목을 제공하기
- 표의 셀은 제목 셀과 데이터 셀이 구분되도록 구성해야 합니다. 제목 셀은 <th>, 데이터 셀은 <td> 를 사용하면 됩니다.
- 표의 구조가 복잡할 경우, 최대한 간소화하거나 scope 혹은 id와 headers 속성을 사용하여 작성합니다.
레이블 제공
오류 정정
마크업 오류 방지
웹 애플리케이션 접근성 준수