코드스테이츠 부트캠프 프론트엔드 44기
Section 3 Unit 5 : [사용자 친화 웹] 웹 표준 & 접근성
SEO
SEO(Search Engine Optimization)란 '검색 엔진 최적화'를 말하며, 검색 엔진이 잘 크롤링해가도록 최적화하여 검색 엔진 상단에 쉽게 노출시키게끔 만들어주는 것을 말한다.
-
[On-Page SEO] : 웹 사이트 내부에서 진행하는 SEO. 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용한다.
-
[Off-Page SEO] : 웹 사이트 외부에서 이루어지는 SEO. 광고비를 지불하고 네이버/구글 최상위에 뜨게 하는 것, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법. 웹 페이지 내용/구조와는 관계가 없다.
CSR보다 SSR이 SEO에 있어서 더 유리하다.
<meta>
메타 데이터를 담는 요소. <head> 요소의 자식 요소로 작성한다.
SEO를 위한 meta 속성
<meta name="속성값" content="내용" />검색 결과창(구글 검색 결과)에서 제목 밑에 따라오는 설명글이 이것이다.
대표적인 속성은 3가지가 있다.
-
[description]
콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 설명문/부제목 -
[keywords]
웹 페이지의 관련 키워드들을 나열할 때 사용. 유튜브/SNS의 (해시)태그 생각하면 쉽다 -
[author]
콘텐츠의 제작자 표시
오픈 그래프(Open Graph)
다른 사람에게 공유하기 위한 것이 목적으로, SEO랑은 다르다.
-
[og:url]
페이지의 표준 URL. -
[og:site_name]
사이트 이름. -
[og:title]
콘텐츠 제목. -
[og:description]
콘텐츠에 대한 간략한 설명.
SNS/메신저에서 웹 사이트 미리보기에 나오는 설명문이 이것이다. -
[og:image]
미리보기로 표시될 이미지. -
[og:type]
콘텐츠 미디어의 유형. video/music 등의 유형을 표시할 수 있다. (기본값: website) -
[og:locale]
리소스의 언어. 한국은 ko_KR이다. (기본값: en_US)
기타 유의 사항
-
<hgroup>은 대분류 집합으로서 핵심 키워드를 포함할 가능성이 높다. 따라서 검색 엔진도<hgroup>요소를 중요하게 취급한다. 단 똑같은 키워드를 반복해서 넣으면 스팸으로 인식할 수 있기 때문에, 유사 키워드/관련 키워드들을 다양하게 포함시키는 것이 좋다. -
타 사이트 복붙 금지. 중복 문서로 판정하여 검색 결과에서 생략되거나. 애당초 먼저 작성된 글이 먼저 뜰 확률이 높다. 타 사이트의 글을 인용하고 싶다면 일부만 가져온 뒤 출처를 표기하는 것이 좋다.
-
글자로 적어도 될 내용을 굳이 이미지로 표현하지 말 것. SEO에 좋지 않기 때문이다. 꼭 이미지를 넣어야 한다면
<img>의 alt 속성을 적극 활용하자.
WAI-ARIA
WAI(웹 접근성을 담당하는 기관)에서 발표한, RIA 환경에서의 웹 접근성 기술 규격을 말한다. 비시맨틱한 HTML 태그에 속성(Attribute)을 추가함으로써 의미를 부여해주는 역할을 한다.
-
RIA(Rich Internet Applications) : 외부 프로그램 설치 없이 웹 브라우저를 통해 사용할 수 있는 Web-App(SPA)을 말한다.
-
ARIA(Accessible Rich Internet Applications) : 장애가 있는 사람들이 Web & Web-App에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
웹 접근성을 확보할 때 가장 중요한 것은 시맨틱한 HTML을 작성하는 것이며, WAI-ARIA는 어디까지나 피치 못할 때 보조적인 역할로만 사용해야 한다.
속성
1. 역할(Role)
HTML 요소의 역할을 정의하는 속성. 요소명(태그명)과 실제 역할이 불일치할 때, 어떤 역할을 하는 요소인지 명시해 줄 때 사용한다.
예를 들어, 버튼을 만드는 데 <div> 요소를 사용했다면, 해당 요소의 역할이 ‘버튼’이라는 것을 아래처럼 명시할 수 있다.
<div role="button">버튼</div>올바른 예시
<!-- Before -->
<ul>
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div>Tab menu ONE</div>
<div>Tab menu TWO</div><!-- After -->
<ul role="tabList">
<li role="tab">Tab1</li>
<li role="tab">Tab2</li>
</ul>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>잘못된 예시
단, 시맨틱 요소에 WAI-ARIA를 적용해선 안 된다.
<button role="button">버튼</button>또한 시맨틱 요소의 본래 의미를 임의로 변경해서도 안 된다.
<h1 role="button">버튼</h1>2. 상태(State)
요소의 현재 상태를 나타내는 속성.
아래의 aria-selected 외에도 아코디언 UI가 펼쳐진 상태인지 표시해 주는 aria-expanded, 요소가 숨김 상태인지를 표시하는 aria-hidden 등의 속성이 있다.
aria-selected
(탭에서) 여러 개의 선택 가능한 요소들 중에서 현재 선택되어 있는 상태의 요소를 명시하는 속성.
<ul role="tabList">
<li role="tab" aria-selected="true">Tab1</li>
<li role="tab" aria-selected="false">Tab2</li>
<li role="tab" aria-selected="false">Tab3</li>
</ul>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>3. 속성(Property)
요소의 특징을 정의하는 속성.
aria-label
각 버튼 요소에 aria-label을 추가하여 요소에 라벨을 붙여준다.
아래의 코드는 구글 검색창의 각 버튼들을 구현한 코드이다. 만약에 (라벨도 없이) 버튼 태그 안에 이미지만 들어 있을 경우, HTML 요소의 구조만으로는 어떤 역할을 하는 버튼인지 알기 어려울 것이다.
<button aria-label="지우기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>aria-live
해당 요소가 실시간으로 내용을 변경하는 영역인지 명시한다.
대표적으로 브라우징 도중에 내용을 띄우는 alert, modal, dialog와 같은 역할을 하는 요소이거나, AJAX를 사용하여 실시간으로 내용을 변경하는 영역에 사용한다.
시각장애인은 화면의 동적인 요소를 알아채기 어렵기 때문에, 이 속성을 사용해서 실시간으로 변경되는 내용을 알려주면 큰 도움이 된다.
속성 값으로는 polite, assertive, off 등이 있다. (기본값은 off)
- [polite] : 스크린 리더가 현재 읽고 있는 내용을 모두 읽고 나서, 변경된 내용을 사용자에게 전달
- [assertive] : 스크린 리더가 현재 읽고 있는 내용을 중단하고, 변경된 내용을 바로 사용자에게 전달
<주의 사항>
이 게시물은 코드스테이츠의 블로깅 과제로 제작되었습니다.
때문에 설명이 온전치 못하거나 글의 완성도가 낮을 수 있습니다.
