S3 Unit 5. 웹 표준&접근성

나현·2022년 11월 4일

학습일지

목록 보기

35/53

💡 이번에 배운 내용

Section3. 사용자 친화적이고 안전한 Web App을 만들 수 있다.

Unit5. 웹 표준&접근성: 웹 표준과 웹 접근성에 대해서 학습한다.

느낀점

예전 열심히 웹 표준, 웹 접근성을 지켜가며 마크업 했던 시절이 생각났다. 웹 접근성을 막상 지키면서 작업하려니 사수에게 팁, 노하우를 물어본 추억도 생각이 났다. 웹 접근성 협회에서 현장 세미나를 오셔서 참여해서 들었던 기억도 났다. 이렇게 내용을 정리하며 알고있던 내용들을 복습하기도 하고 옛날 생각도 나고 재밌는 시간이었다. 그런데 SEO는 실제로 어떻게 반영해야할지 생각하니 쉽진 않긴하다. 오늘도 어느 하나 놓치지 않고 잘 공부하다 가야겠다!

키워드

웹 표준, Semantic HTML, 크로스 브라우징, SEO, meta, Open Graph, 웹 접근성, WAI-ARIA

학습내용

Ch1. 웹 표준

► 웹 표준

웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미한다.
사용자가 어떤 운영체제, 브라우저를 사용하든지 동일한 웹페이지가 보이고 정상적으로 작동할 수 있도록 웹 페이지를 제작하는 기법이다.
주로 사용되는 기술은 웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등이다.
웹 브라우저 간 호환이 되지 않는 상황을 방지하기 위해 웹 개발의 형식을 통일시킨 웹 표준이 등장하게 되었다.

► 웹 표준의 장점

유지 보수에 좋다.
웹 표준으로 HTML, CSS, JS가 분리되면서 코드가 경량화 되었다.
웹 호환성 확보
웹 표준을 준수하면 브라우저, 운영체제에 상관없이 동일한 결과가 나오도록 작업할 수 있다.
검색 효율성 증대
웹 사이트를 웹 표준에 맞춰 작성하면 검색 엔진에 노출될 가능성이 높아진다.
웹 접근성 향상
웹 표준에 맞춰 개발해도 접근성을 어느 정도 해결할 수 있게 된다.

때문에 웹 표준을 준수하며 웹 개발하는 것이 중요한데, 이를 위한 가장 기본적인 방법은 HTML 마크업시 웹 표준을 지키는 것이다.

► Semantic HTML

Semantic HTML란 일반 요소와 달리 '의미를 가진(semantic)' 요소와 그 요소를 사용해 마크업 하는 것을 의미한다.
<div> 와 <span>을 사용해 마크업할 수도 있지만, 웹 표준을 지키려면 같은 기능을 하되 의미를 가진 시멘틱 요소를 사용해 마크업할 수 있다.
예를 들어 header부분을 마크업할 때 div태그 대신 시멘틱 요소인 header요소를 사용하는 것이다.
주요 시멘틱 요소는 아래와 같다.

요소	설명
<header>	페이지나 요소의 최상단에 위치. 머릿말 역할
<nav>	메뉴, 목차, 네비게이션 바의 링크가 담긴 영역
<aside>	웹문서와 간접적인 연관이 있는 내용이 담긴 영역
<main>	웹문서의 메인이 되는 주요 콘텐츠가 담긴 영역
<article>	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분 각각의 <article>을 구분하기 위한 수단이 필요(보통 제목 요소 사용)
<section>	문서의 독립적인 영역. 딱히 적합한 의미가 없을 때 사용 제목(<hgroup>)을 포함하는 경우가 많음
<hgroup>	제목을 표시할 때 사용. <h1> ~ <h6> 요소가 이에 해당
<footer>	페이지나 요소의 최하단에 위치. 꼬릿말 역할

참고 링크:

🔗 MDN - Semantics
🔗 W3School - HTML Semantic Elements

이런 시멘틱 HTML이 필요한 이유는 다음과 같다.
1. 개발자간 소통을 위해 필요하다.
id, class를 따로 정의하지 않아도 해당 컴포넌트의 기능을 직관적으로 알 수 있다.
2. 검색 엔진 노출에 유리하다.
검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하며, 시맨틱 요소가 있으면 더 중요한 내용이 들어있는 곳에 우선 순위를 정할 수 있다. 우선 순위가 높은 페이지는 검색 결과 상단에 위치하게 된다.
3. 웹 접근성
스크린리더(웹페이지 화면의 내용을 읽어줌) 등을 사용할 때 시맨틱 요소인 경우 화면의 구조에 대한 정보까지 추가로 전달해 줄 수 있고, 좀 더 정확하게 콘텐츠를 전달할 수 있다.

► 올바른 마크업

시멘틱 요소를 사용하는 것 외에 아래의 사항 들을 지켜야 기본적인 웹 표준을 준수한다고 볼 수 있다.

블록 요소는 인라인 요소 안에 넣지 않는다. 반대의 경우는 가능하다.
div, ul, li, p와 위에 소개한 시맨틱 요소는 블록 요소이다. 대표적인 인라인 요소는 a, span 등이 있다.
인라인 요소 안에 하위 요소로 블록 요소를 넣지 않도록 한다.
<b>대신 <strong>, <i>대신 <em>요소를 사용한다.
<b> 요소는 bold, 즉 글씨를 굵게 만들 때,
<i> 요소는 italic, 즉 글씨를 기울일 때 사용하는 요소다.
그러나 꾸미는 요소이지 의미가 있는 요소가 아니므로 웹 표준을 준수하기 위해 사용하지 않는다.
단순히 꾸미려는 의도면 CSS를 사용하는 것이 좋고, 강조와 동시에 의미를 부여하려면 <strong> 요소와 <em> 요소를 대신 사용한다.
hgroup 요소를 남발하지 않는다.
목차, 다른 콘텐츠와의 상하 관계를 나타내면서 콘텐츠의 제목을 표시하려는 용도 외에는 사용하지 않도록 한다. 즉, 단순히 크기의 차이를 나타내기 위해 사용하지 않는다.
<br> 요소의 사용을 자제한다.
<br> 요소는 줄바꿈을 위해 사용하는 요소로 특별한 의미가 없다.
단순히 요소 사이의 간격이 필요하다면 각 콘텐츠를 <p> 요소로 감싸고 CSS로 여백을 주어 사용하도록 한다.
인라인 스타일링 사용하지 않는다.
HTML 요소 안에 인라인으로 스타일링 속성을 설정하지 않는다.
<head>태그 안에 <style>태그 안에 CSS를 작성하거나 CSS 파일을 별도로 분리해서 사용하도록 한다.
제일 권장되는 사항은 별도의 CSS파일을 분리하는 것으로 웬만하면 <style> 태그도 가급적 사용하지 않도록 한다.

► 크로스 브라우징

크로스 브라우징(Cross Browsing)이란 웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다.
웹 표준만 잘 지켜도 크로스 브라우징을 어느 정도 실현할 수 있다.
가급적 동일한 화면이 노출되도록 작업하면 좋지만, 만약 브라우저 환경에 따라 동일하게 맞출 수 없다면 적절한 대안을 찾아야 한다.

크로스 브라우징을 위한 개발단계는 다음과 같다.

초기 기획
다음과 같은 사항을 고려하여 기획해야 한다.

어떤 웹 사이트를 만들 것인가
어떤 콘텐츠와 기능이 있는가
어떤 디자인인가
주 사용자는 누구인가
사용자가 주로 사용하는 브라우저, 기기는 무엇인가

개발
브라우저의 호환성을 염두에 두며 코드를 작성한다.
만약 호환성 여부를 잘 모를 경우 MDN, Can I Use 등의 사이트에서 확인한다.
만약 동일한 브라우저 화면을 만들 수 없다면 적절한 대체 수단을 마련해야 한다.
예를 들어 낮은 버전이나 사용자가 적은 브라우저를 지원하지 않을 경우, 이 사실을 사용자에게 알리고 그 대안을 알리는 방법까지 마련하는 것이 좋다.
테스트
사용성이 높고 비교적 최신인 브라우저 위주로 테스트를 진행하고,
그 다음으로 나머지 브라우저, 여러 기기에서 테스트를 진행한다.
직접 테스트를 수행할 수도 있으며, 자동으로 테스트를 진행해주는 도구를 이용할 수도 있다.
TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴이 있다.
수정
테스트 단계에서 발견한 수정해야할 사항을 수정한다.
기존의 다른 코드는 정상적으로 작동할 수 있도록 유의하여 수정한다.
때문에 수정사항에 해당하는 범위, 상황(조건, 브라우저 등)를 축소시켜 수정하고, 조건문을 작성하는 방식 등으로 코드를 수정한다.
수정이 완료되면 다시 테스트와 수정을 반복한다.

Ch2. SEO

► SEO란

SEO(Search Engine Optimization, 검색 엔진 최적화)란 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업을 말한다.
SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있으며,
SEO는 크게 On-Page SEO와 Off-Page SEO 두 가지로 나뉘어진다.

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

► SEO와 관련된 요소 (On-Page SEO)

Off-Page SEO는 웹 사이트에서 외부에서 가능한 것으로 웹 개발 단계에서 고려해야 하는 요소는 거의 없다.
때문에 웹 개발시 고려해야 하는 SEO와 관련된 요소, 사항은 아래와 같다.

title 요소
meta 요소
hgroup 요소
콘텐츠 관련

이에 대한 자세한 내용은 각 항목별로 다뤄보았다.

1) title 요소

title 요소는 웹 문서의 제목을 나타낼 때 사용하며 head 요소 안에 위치 한다.
웹 문서의 제목인 만큼 어떤 내용에 해당되냐에 따라 검색 결과에 큰 영향을 끼친다.
따라서 제목에 핵심 키워드가 한 번 포함되면 검색 결과의 상위에 노출된 확률이 높아진다.
그러나 제목이 너무 길거나 짧은 경우 유입률이 떨어지며,
핵심 키워드라도 같은 키워드를 반복하면 검색시 불이익을 받을 수 있다.

2) meta 요소

meta 요소는 메타 데이터를 담는 요소로, 메타 데이터는 웹 사이트에서 다루고 있는 데이터를 의미한다.
위치는 head 요소 안이며 다양한 종류를 갖고 있다.
크게 SEO를 위해서 사용하는 name 속성,
공유를 위한 목적으로 사용하는 Open Graph(property 속성 사용) 등이 있다.
SEO 목적으로 사용하는 name 속성과 오픈그래프인 property 속성이 구분되어 있긴 하지만 property 속성도 잘 사용하면 간접적으로 SEO에 영향을 줄 수 있다.

2.1) name 속성

<meta name="속성값" content="내용" />
주요 속성값은 아래와 같다.

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

2.2) property 속성 (Open Graph)

<meta property="속성값" content="내용" />
주요 속성값은 아래와 같다.

property 속성값	설명
og:url	페이지의 표준 URL입니다.
og:site_name	사이트의 이름입니다.
og:title	콘텐츠의 제목입니다.
og:description	콘텐츠에 대한 간략할 설명입니다. 검색 결과에서 제목 밑에 뜨는 내용을 생각하시면 됩니다.
og:image	미리보기로 표시될 이미지입니다.
og:type	콘텐츠 미디어의 유형입니다. 기본 값은 website로, video, music 등의 유형을 표시할 수 있습니다.
og:locale	리소스의 언어로, 기본값은 en_US입니다. 한국은 ko_KR입니다.

3) hgroup 요소

콘텐츠의 제목을 표시하는 요소로 핵심 키워드가 포함된 경우가 많으므로 검색 엔진이 중요하게 취급하는 요소이다. 때문에 핵심 키워드를 중심으로 작성하되, 같은 키워드를 반복하면 오히려 검색 상위 노출 가능성이 떨어지게 되므로 주의한다.

4) 콘텐츠

콘텐츠는 어떠한 규칙이 있는 건 아니지만 아래의 전략을 잘 따랐을 때 SEO에 영향을 줄 수 있다.

내용이 독특하거나 개성있는 경우 검색 상위권에 노출 될 가능성이 크다.
내용이 독특하다면 비슷한 내용을 포함하는 타 사이트가 많지 않기 때문에 검색 상위권에 노출될 가능성이 크다.
이름, 서비스 종류 뿐 아니라 독특한 이벤트나 콘텐츠 역시 이에 해당한다.
타 사이트와 비슷한 내용은 중복 내용으로 인해 검색 결과에서 생략될 확률이 높다.
내용이 비슷하다면 먼저 작성된 웹문서가 먼저 뜰 확률이 높다. 때문에 만약 타 사이트의 내용을 인용하려면 일부만 가져오고 출처(링크)를 반드시 표기하도록 한다.
제목과 설명글은 간결해야 한다.
웹 사이트와 관련이 있는 키워드여도 너무 많이 반복될 경우 스팸 요소가 있는 사이트로 분류될 수 있으므로 주의한다. 이런 경우 또한 사용자에게 불편함을 줄 수 있다.
이미지보다는 글자로 작성한다.
검색 엔진은 글자 위주로 검색하므로 이미지는 가능하면 사용 빈도를 낮춘다. 만약 이미지를 사용하면 대체 텍스트를 충분히 제공해야 한다. 이 때 대체 텍스트 역시 간결하게 핵심만 넣도록 한다.

Ch3. 웹 접근성

► 웹 접근성이란

웹 접근성(Web Accessibility)은 모든 사용자가 동등한 수준의 정보를 제공받을 수 있도록 말 그대로 웹의 접근성을 높이는 것을 의미한다.
고령층, 장애인 뿐만 아니라 키보드 마우스 등의 사용에 제한이 있는 사용자를 모두 아울러 웹을 이용할 수 있도록 개발단계에서 고려하며 작업한다.
웹 접근성을 고려했을 때의 효과는 다음과 같다.

웹 사이트의 사용층이 확대된다.
다양한 환경을 지원한다. (다양한 시.청각 콘텐츠, 더 편리해진 서비스 등)
웹 사이트, 해당 기업의 사회적 이미지가 향상된다.

► 웹 콘텐츠 접근성 지침

개발 단계에서 웹 접근성을 고려하기 위해 W3C에서 웹 접근성 권고안인 ‘WCAG(Web Content Accessibility Guidelines) 2.0’을 제공하고 있다. 이를 기반으로 한국 실정에 맞게 조금 수정된 ‘한국형 웹 콘텐츠 접근성 지침 2.1’ 내용이 있으며 여기서는 그 내용에 대해 살펴본다.
접근성 지침은 크게 다음과 같은 내용으로 나뉜다.

인식의 용이성(Perceivable) : 1~7번 사항
모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

운용의 용이성(Operable) : 8~16번 사항
사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

이해의 용이성(Understandable) : 17~22번 사항
콘텐츠는 이해할 수 있어야 한다.

견고성(Robust) : 23~24번 사항
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

아래부터는 각 항목에 대해 상세하게 살펴보았다.

1. 적절한 대체 텍스트
텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
단 중복을 피해야 한다.

배경처럼 정보가 없는 이미지는 되도록 CSS로 작성한다. 만약 이미지를 부득이하게 img 요소로 작성할 경우 alt 값으로 빈 문자열을 주어 스크린 리더가 인식하지 않게 한다.
이미지의 설명이 많이 필요하거나, 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우가 있다. 이런 경우 alt 값으로 '다음 설명 참고' 등으로 작성하거나 빈 문자열을 주도록 한다.
ex) alt 속성 사용

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

2. 자막 제공
멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.

ex)
- 자막을 포함한 동영상 사용,
- 자막을 지원하는 멀티미디어 플랫폼 사용
- track 요소를 사용
  (WebVTT-Web Video Text Tracks, .vtt 파일같은 자막파일 사용)
  또는 Timed Text Markup Language(TTML)형식을 사용

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

3. 색에 무관한 콘텐츠 인식
콘텐츠는 색에 관계 없이 인식될 수 있어야 한다.

ex)
콘텐츠에 테두리 설정
콘텐츠에 레이블 추가

4. 명확한 지시사항 제공
지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

ex)
텍스트가 없는 버튼은 대체 텍스트를 작성
소리를 통해 지시하는 경우, 시각적 피드백도 함께 제공

5. 텍스트 콘텐츠 명도 대비
: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
다음 상황에서는 콘텐츠와 배경 간의 명도 대비가 3 대 1 까지 허용된다.

텍스트가 18pt 또는 굵은(Bold) 14pt 이상일 경우
확대 가능한 페이지인 경우
비활성화 된 콘텐츠인 경우
장식 목적의 콘텐츠인 경우

6. 자동 재생 금지
자동으로 소리가 재생되지 않아야 한다.
불가피하게 제공해야 하는 경우에는 다음과 같이 해결한다.

ex)
가장 먼저 위치시켜 정지할 수 있게 구현
ESC를 눌러 정지
3초 내에 정지

7. 콘텐츠 간 구분
이웃한 콘텐츠는 시각적으로 구별될 수 있어야한다.
ex) 테두리, 구분선, 무늬, 명도대비, 간격 등

8. 키보드 사용 보장
모든 기능은 키보드만으로도 사용할 수 있어야 한다.
단, 키보드 조작시 빠져나오지 못하는 경우가 없도록 주의한다.

9. 초점 이동
키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
초점은 일반적으로 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 이동하도록 마크업을 구성한다.

10. 조작 가능
사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
사용자가 원하는 요소를 선택하여 조작할 수 있도록 해야 한다.

ex)
컨트롤의 대각선 길이는 6mm 이상
컨트롤 간 1px 이상의 여백

11. 응답 시간 조절
시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
만약 시간 제한이 꼭 필요한 경우 아래의 사항을 반드시 제공해야 한다.

충분한 시간: 스크린 리더나 키보드 사용자도 이 수단을 인지할 수 있는 충분한 시간
종료 안내
조절 수단

12. 정지 기능 제공
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

ex)
- 자동 변경 슬라이드 (캐러셀 슬라이드)는 이전, 다음, 정지 기능을 제공
  정지 버튼이 없더라도 마우스 호버 혹은 키보드 접근시에 정지되도록 구현
- 실시간 검색어(자동 변경 콘텐츠)는 접근했을 때 모든 콘텐츠를 확인할 수 있도록 구현

13. 깜빡임과 번쩍임 사용 제한
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
불규칙적으로 깜빡이는 화면은 눈에 피로를 유발하고 심한 경우 광과민성 발작을 일으킬 수 있다.
만약 이런 콘텐츠를 제공하게 되는 경우 다음 조건 중 하나를 충족해야 한다.

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

14. 반복 영역 건너뛰기
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

ex)
가장 앞에 건너뛰기 링크 제공
메뉴를 필요할 때만 열 수 있도록 구현

15. 제목 제공
페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
특수 문자는 1개까지만 사용해야 한다.
시각적 장식을 목적으로 특수 문자를 반복적으로 사용하는 경우 스크린 리더에서 불필요한 음성을 반복해서 출력하게 되므로 넣지 않는다.

16. 적절한 링크 텍스트
링크 텍스트는 용도나 목적을 이해할 수 있도록 대체 텍스트를 제공해야 한다.
비어있는 링크도 없어야 한다.

17. 기본 언어 표시
주로 사용하는 언어를 명시해야 한다.

ex)
HTML 요소에 lang 속성을 사용하여 제공
페이지 내에 다른 언어가 존재하는 경우 해당 요소에 lang 속성을 표기한다.

<html lang="ko">

18. 사용자 요구에 따른 실행
사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.

ex)
- 페이지 진입 시 팝업이 뜨지 않게 해야 한다.
- 화면을 가리는 레이어 창(모달)이 있는 경우, 가장 상단에 제공하여 먼저 제어할 수 있게 해야 한다.
- 스크린 리더 사용자를 위해 새 창임을 알려줄 수 있도록 title 속성을 사용하거나 해당 내용을 삽입한다.

<!-- 보이지 않는 요소로 삽입 -->
<a href="...">페이지<span class="blind">새 창</span></a>
<!-- 링크 요소에 title 속성으로 새 창 작성하기 -->
<a href="..." title="새 창">페이지</a>
<!-- 링크 요소에 target=”_blank” 속성 넣기 -->
<a href="..." target="_blank">페이지</a>

19. 콘텐츠 선형 구조
콘텐츠는 논리적인 순서로 제공해야 한다.
글은 제목, 내용 순서로 제공하고,
탭의 경우 탭 제목-탭 내용 순서로 마크업을 구성한다.

<!-- 잘못 작성한 예시 : 탭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>

20. 표의 구성
표는 이해하기 쉽게 구성해야 한다.
듣기만해도 표의 구조, 내용을 이해하기 쉽게 구성해야 한다.

ex)
- 테이블 제목, 간단한 요약은 caption 요소를 사용한다.
- 제목 셀은 <th>, 데이터 셀은 <td>를 사용한다.
- 표의 구조가 복잡할 경우 scope나 id, headers 속성을 사용한다.

21. 레이블 제공
사용자 입력에는 대응하는 레이블을 제공해야 한다.

ex)
<input> 요소에 value나 placeholder 속성처럼 변하는 속성만 설정하지말고 변하지 않는 확실한 정보를 제공한다.
input 마크업시 상황에 따라 아래의 방법 중 하나로 정보를 제공한다.

<!-- label 사용 -->
<label for="user_id">아이디</label>
<input id="user_id" type="text" placeholder="아이디" />

<!-- title 속성 사용 -->
<input type="text" title="아이디" placeholder="아이디" />

<!-- WAI-ARIA의 aria-label 속성 사용 -->
<input type="text" aria-label="아이디" placeholder="아이디" />

22. 오류 정정
입력 오류를 정정할 수 있는 방법을 제공해야 한다.

작성 중, 혹은 제출 시 오류가 발생했을 때 입력했던 내용이 사라지지 않고 유지되도록 해야한다.
오류가 발생한 경우 사용자에게 오류 발생 원인을 알려줘야 한다.
오류가 발생한 경우 오류가 발생한 위치로 초점이 이동해야 한다.

23. 마크업 오류 방지
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

ex)
요소의 열고 닫음에 오류가 없어야 한다.
요소의 속성을 중복해서 사용하지 않는다.
id 를 중복해서 사용하지 않는다.

24. 웹 애플리케이션 접근성 준수
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
웹 콘텐츠에 포함된 웹 애플리케이션도 접근성을 갖춰야 한다.
만약 접근성을 갖추지 못한 콘텐츠는 대체 수단이나 대체 텍스트를 제공 한다.

► WAI-ARIA

WAI-ARIA는 WAI에서 발표한 웹 접근성 기술이다.
WAI (Web Accessibility Initiative)는 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관으로,
ARIA (Accessible Rich Internet Applications)란 사용자가 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 접근할 수 있도록 하는 기술이다.
WAI-ARIA는 시맨틱 요소를 사용했어도 웹 접근성에 추가적으로 의미를 부여할 필요가 있을 때 사용한다.
즉, 만약 시맨틱 요소로도 웹 접근성을 충분히 지켰다면 필수적으로 사용하지 않아도 된다. 오히려 남용하지 말아야 한다.
WAI-ARIA는 SPA처럼 AJAX를 사용하는 경우 등 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다는 장점이 있다.

► WAI-ARIA 사용법

WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가하는 방식으로 사용한다.
WAI-ARIA의 속성에는 아래처럼 크게 세 가지가 있다.

역할(role) : HTML 요소의 역할을 정의하는 속성

상태(state) : 요소의 현재 상태를 나타내는 속성

속성(property) : 요소의 특징을 정의하는 속성(attribute)

아래는 각 속성 중 대표적으로 사용하는 것을 정리했다.

* 역할(Role)
HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용한다.
예를 들어 아래와 같이 버튼이 아닌 요소를 버튼으로 사용한다면 버튼 역할을 하고 있다고 role 속성을 사용해 표시할 수 있다.

<!-- 올바른 사용 -->
<div role="button">div이지만 button으로 사용되는 요소</div>

<!-- 잘못된 사용 : 이미 맞는 요소에는 따로 사용하지 않는다. -->
<button role="button">button인 요소</button>

<!-- 잘못된 사용 : 시맨틱 요소 본연의 의미를 임의로 바꾸지 않아야 한다. -->
<h1 role="button">h1인 요소</h1>

또한 아래처럼 tab요소에 사용한다.

<div role="tabList">
  <li role="tab">Tab1</li>
  <li role="tab">Tab2</li>
  <li role="tab">Tab3</li>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

* 상태(State)
요소의 여러 상태를 나타낼 때 사용한다.
이 중 aria-selected는 여러 선택 가능한 요소 중 선택 상태인 경우 표시할 때 사용한다.
아래는 tab 컴포넌트에서 사용한 예제이다.

<!--  첫 번째 탭이 선택되었다. -->
<div 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>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

이 외에도 아래처럼 상태를 나타내는 다른 속성도 있다.

aria-expanded: 아코디언처럼 요소가 펼침 상태인지 표시
aria-hidden: 숨김 상태인지를 표시

* 속성(Property)
요소에 대한 정보를 전혀 얻을 수 없는 경우 사용한다.

aria-label
input의 title처럼 사용한다.
아래는 이미지나 아이콘으로만 구성된 버튼을 마크업할 때 사용하는 예시이다.

<button> <img src="X.png" /> </button>
<button> <img src="돋보기.png" /> </button>

<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

aria-live
요소가 실시간으로 내용을 갱신하는 영역인지 표시한다.
예를 들어 alert, modal, dialog처럼 화면에 띄우는 요소, AJAX처럼 실시간으로 내용을 갱신하는 영역에 사용한다.
aria-live 속성 값으로는 polite, assertive, off(default)가 있다.
- polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달한다.
- assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달한다.

참고자료

1. SEO 가이드
다음은 SEO와 관련된 참고 사이트 들이다.
🔗 Google - SEO 기본 가이드
🔗 Naver - 웹마스터 가이드

나현

프론트엔드 개발자 NH입니다. 시리즈로 보시면 더 쉽게 여러 글들을 볼 수 있습니다!

이전 포스트