웹 표준, 접근성

Semantic HTML

웹 표준에서는 HTML을 시멘틱(semantic)하게 작성하는 것의 중요성을 강조한다.

그렇다면 시멘틱 HTML이 어떤 의미일까?

시멘틱 HTML은 영단어인 semantic과 HTML의 합성어이고, 각 단어의 의미는 다음과 같다.

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

시멘틱 HTML의 필요성

개발자 간 소통
검색 효율성
웹 접근성

자주 사용되는 시멘틱 요소의 종류

<header>	페이지나 요소의 최상단에 위치하는 머리말 역할의 요소
<nav>	메뉴, 목차 등에 사용되는 요소
<aside>	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소
<main>	이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소
<article>	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소 각각의 <article>을 구분하기 위한 수단으로 보통 제목 <hgroup>을 포함하는 방법을 사용
<section>	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용, 제목( <hgroup> )을 포함하는 경우가 많음
<hgroup>	제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup> 이다
<footer>	페이지나 요소의 최하단에 위치하는 꼬리말 역할의 요소

크로스 브라우징(Cross Browsing)

크로스 브라우징이란 웹 사이트에 접근하는 브라우저 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다. 여기서 중요한 포인트는 '동일한'이 아닌 '동등한'이라는 표현을 쓴다는 것이다.
모든 브라우저에서 똑같은 화면이 보이도록 만드는 것이 아닌, 동등한 수준의 정보와 기능을 제공하는 것이다.

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

검색엔진 최적화(SEO)

SEO(검색 엔진 최적화)는 웹사이트가 유기적인(무료) 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록
최적화하는 과정을 말한다. 비즈니스 유형이 어떤 것이든 SEO는 가장 중요한 마케팅 유형 중 하나이다.

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

title 요소

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

제목은 검색 결과에서 상당히 중요한 역할을 한다.

<title> 요소에 어떤 내용을 작성하는가에 따라 검색 후 유입까지 유도할 수 있다
<title> 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다
- 그렇다고 같은 키워드를 반복하면 검색 시 불이익을 받을 수 있음 (제목에 키워드는 한 번만 포함시키자)

meta 요소

이 두 가지의 경우 모두 <meta> 요소를 사용하지만, 각각의 목적은 엄연히 다르다.

첫 번째 경우는 name 속성을 사용하며, SEO를 위해서 사용하는 것이 목적이다.

두 번째 경우는 property 속성을 사용하며, 다른 사람에게 공유하기 위한 것이 목적이다.

(이 경우를 오픈 그래프라고 하며, 각 속성값 앞에는 "og"가 붙는다)

SEO를 위한 meta 요소

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

name 속성값	설명
description	콘텐츠에 대한 간략한 설명 검색 결과에서 제목 밑에 뜨는 내용을 생각하면 된다
keywords	웹 페이지의 관련 키워드들을 나열할 때 사용
author	콘텐츠의 제작자를 표시

오픈 그래프 (open graph)

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

property 속성값	설명
og:url	페이지의 표준 URL
og:site_name	사이트의 이름
og:title	콘텐츠의 제목
og:description	콘텐츠에 대한 간략한 설명 (검색 결과에서 제목 밑에 뜨는 내용)
og:image	미리보기로 표시될 이미지
og:type	콘텐츠 미디어의 유형 (기본값은 website로, video, music 등의 유형을 표시가능)
og:locate	리소스의 언어로, 기본값은 en_US (한국은 ko_KR)

웹 접근성이란?

일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다. 하지만 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다.
즉, 웹 접근성의 궁극적인 목적은 어떤 상황, 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것이다.

웹 접근성을 갖추면 얻을 수 있는 효과

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

웹 콘텐츠 접근성 지침

✅ 인식의 용이성(Perceivable)
1. 적절한 대체 텍스트
2. 자막 제공
3. 색에 무관한 콘텐츠 인식
4. 명확한 지시사항 제공
5. 텍스트 콘텐츠 명도 대비
6. 자동 재생 금지
7. 콘텐츠 간 구분
✅ 운용의 용이성(Operable)
1. 키보드 사용 보장
2. 초점 이동
3. 조작 가능
4. 응답 시간 조절
5. 정지 기능 제공
6. 깜빡임과 번쩍임 사용 제한
7. 반복 영역 건너뛰기
8. 제목 제공
9. 적절한 링크 텍스트
✅ 이해의 용이성(Understandable)
1. 기본 언어 표시
2. 사용자 요구에 따른 실행
3. 콘텐츠 선형 구조
4. 표의 구성
5. 레이블 제공
6. 오류 정정
✅ 견고성(Robust)
1. 마크업 오류 방지
2. 웹 애플리케이션 접근성 준수

WAI-ARIA

WAI-ARIA는 WAI와 ARIA를 합친 단어이다. WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격.

WAI (Web Accessibility Initiative): 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA (Accessible Rich Internet Applications): 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스 할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
- RIA (Rich Internet Applications): 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼, 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해 준다.

따라서 보조적으로 사용하면, 웹 접근성을 향상할 수 있다.

WAI-ARIA 사용법

WAI-ARIA는 HTML 태그 내부에 속성을 추가함으로 의미를 부여해 줄 수 있다.

역할(role): HTML 요소의 역할을 정의하는 속성
상태(state): 요소의 현재 상태를 나타내는 속성
속성(property): 요소의 특징을 정의하는 속성(attribute)

'개발 지식 > WEB' 카테고리의 다른 글

UI, UX (0)	2023.04.13
MVC 패턴 (0)	2023.04.04
MPA & SPA, CSR & SSR (0)	2023.03.29