후기
오픈 그래프 실습이 재밌었다. 링크 공유 시 미리보기 창을 위한 태그와 속성이 있다는 것은 처음 알았다. 그리고 시맨틱 요소만 적절히 사용해도 검색 시 사이트 노출에 도움을 줄 수 있다는 것도 흥미로웠다. 웹 접근성 챕터에서는 스크린 리더를 사용해봤다. 말도 안 되게 불편했다. 특히, 표를 읽어줄 때는 속도가 빠르고 듣는 내용을 다 기억할 수 없어 이해하기 쉽지 않았다. 실용성 없을 것 같은 기계음을 듣고는 웃음이 나왔지만, 이 기능이 절실히 필요한 분들은 스크린 리더의 성능에 절망을 느꼈을 것 같다.
새롭게 알게 된 것
Chapter1. 웹 표준
Chapter2. SEO
Chapter3. 웹 접근성
<Chapter1. 웹 표준>
1.웹 표준의 개념
1) 인터넷, 웹
-인터넷: 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망
-웹: 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간
❌인터넷은 웹 기반으로 작동한다.
인터넷이 더 포괄적인 개념. 웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함.
2) 웹 표준
-웹 표준
W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙
-출현 이유
웹을 정상적으로 작동시키기 위해 개발자들이 브라우저마다 따로 개발하는 수고를 덜기 위해 웹 개발 형식 통일. 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있음.
-웹 표준의 장점
- 유지 보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
2.Semantic HTML
1) Semantic HTML
Semantic Element: 그 자체에 의미가 있는 요소
Semantic HTML: Semantic Element를 적절하게 사용하여 구성한 HTML
2) Semantic HTML의 필요성
-개발자 간 소통
-검색 효율성
-웹 접근성(나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 함)
3) 시맨틱 요소의 종류
3.자주 틀리는 마크업
1) 인라인 요소 안에 블록 요소 넣기❌
-> 블록 요소 안에 인라인 요소 넣기✅
인라인 요소는 항상 블록 요소 안에 들어가야 함
// 블록 요소: div, hgroup 등
// 인라인 요소: span, a, input, label 등
<a href=""> <h1>나쁜 예시 1</h1> </a>❌
<span> <div>나쁜 예시 2</div> </span>❌2) <b>, <i> 요소 사용하기❌
-> <storng>, <em> 요소 사용하기✅
시맨틱하지 않기 때문
3) <hgroup> 마구잡이로 사용하기❌
-> 상하관계를 고려하여 사용하기✅
4) <br /> 연속으로 사용하기(요소 사이의 간격을 만드는 데 사용하기)❌
-> 별도의 단락으로 구별하기, CSS 속성을 주어 여백을 조정하기✅
// 나쁜 예시
요소 사이에 여백을 주고 싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.
// 좋은 예시 1
<p>요소 사이에 여백을 주고 싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>
// 좋은 예시 2
//HTML 파일
<p class="margin">요소 사이에 여백을 주고 싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>
//CSS 파일
.margin { margin: 10px }5) 인라인 스타일링 사용하기❌
-> style 요소 사용, CSS 파일 따로 작성✅
//HTML 파일
<head>
<style>
h1 { color : "red" }
</style>
</head>
(O) <h1>스타일링 속성은 CSS로 작성해주세요.<h1>
(O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2>
(X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3>
//CSS 파일
h2 { color : "yellow" }4.크로스 브라우징
1) 크로스 브라우징
웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한(동일한❌) 화면과 기능을 제공할 수 있도록 만드는 작업(브라우저들의 렌더링 엔진이 각자 다르므로 동일한 화면을 만드는 것은 불가능)
2) 크로스 브라우징 워크플로우
-초기 기획
어떤 웹 사이트를 만들 것인지 결정(콘텐츠, 기능, 디자인)
타겟 고객층이 주로 사용하게 될 브라우저와 기기를 파악
브라우저와 기기에 맞는 기술을 사용해서 개발할 수 있도록 기획
-개발
코드를 작성 시, 각 브라우저에서의 호환성 파악
코드 호환성 확인 사이트: MDN(https://developer.mozilla.org/ko/), Can I Use(https://caniuse.com/)
-테스트 / 발견
각 기능을 구현한 후, 그 기능에 대한 테스트 필요
-
테스트 절차
-안정적인 데스크톱 브라우저(롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트를 진행
-휴대폰 및 태플릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트를 진행
-그 외에도 초기 기획 단계에서 목표했던 브라우저가 있다면 해당 브라우저에서 테스트를 진행
-Window, Linux, Mac 등 다양한 운영 체제에서도 테스트를 진행 -
자동 테스트 도구
TestComplete, LambdaTest, BitBar
-수정 / 반복
테스트 단계에서 버그가 발견되었다면 수정이 필요. 버그가 발생하는 위치를 최대한 좁혀서 특정하고, 버그가 발생하는 특정 브라우저에서의 해결 방법을 정해야 함.
❌섣불리 코드를 수정(다른 브라우저에서 버그 발생 가능성)
✅조건문을 작성해 특정 브라우저에서만 다른 코드를 실행하게 함
<Chapter2. SEO>
1. SEO 개념
1) 정의
Search Engine Optimization, 검색 엔진 최적화
2) 종류
-On-Page SEO : 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
-Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법. 웹 페이지 내용이나 구조와는 관계가 없음
2.SEO에 영향을 미치는 요소
1) <title> 요소
-사용자가 제목으로 사이트를 파악하기 쉽게 작성
-핵심 키워드 포함시킴. 하지만 같은 키워드를 반복하면 검색 시 불이익 가능성 있으므로 한 번만 포함.
2) <meta> 요소
-속성이 name인 <meta> 요소
목적: SEO
<meta name="속성값" content="내용" />
-속성이 property인 <meta> 요소(=오픈 그래프)
목적: 공유
<meta property="속성값" content="내용" />
3) <hgroup> 요소
-핵심 키워드 포함시킴. 하지만 똑같은 키워드만 반복해서 넣는 것은 역효과를 불러올 수도 있음. 따라서 이미 사용한 핵심 키워드를 그대로 사용하지 않고 비슷한 키워드로 대체해서 사용하거나, 핵심 키워드의 관련 키워드들을 쭉 포함시키는 것이 좋음.
4) 콘텐츠
-개성 있는 브랜딩
해당 웹 사이트만 검색될 수밖에 없는 아이디어나 이름 사용
웹 사이트만의 독특한 이벤트나 콘텐츠를 제작
-복사 + 붙여넣기 금지
중복 문서로 판정되어 아예 검색 결과에서 생략되거나 먼저 작성되었던 글이 먼저 뜰 확률이 높음. 타 사이트의 글을 인용하고 싶다면, 일부만 가져오면서 링크를 첨부하여 출처를 표기하는 것이 좋음.
-간결한 제목과 설명글
페이지 제목과 설명글에 이것저것 많이 적어 넣는다고 해서 검색이 잘 되는 것은 아님. 같은 키워드를 너무 많이 반복해서 작성하면 최악의 경우 스팸 요소가 있는 사이트로 분류될 가능성 있음.
-최대한 글자로 작성하기
검색 엔진은 이미지를 읽지 못하므로 이미지보다는 글로 작성하는 것이 좋음. 꼭 이미지를 넣어야 한다면 alt 속성을 사용. 하지만 너무 길게 작성하면 스팸 요소로 인식할 수 있으므로 꼭 필요한 설명만 작성.
(O) <img src="코드스테이츠_로고.png" alt="코드스테이츠 로고" />
(X) <img src="코드스테이츠_로고.png" alt="프론트엔드 백엔드 블록체인 프로덕트매니지먼트 인공지능 데브옵스 등 다양한 커리어 전환 부트캠프를 진행하는 코드스테이츠 로고" />3.오픈 그래프 실습
-<head>에서 <title>보다 <meta property = "og:title">이 우선
-<meta property = "og:title">이 길다면 <meta property = "og:description"> 생략
-<body>의 <img>보다 <head>의 <meta property = "og:image">가 우선
-og:description 속성이 없더라도 description 속성이 미리보기 설명이 표시되지 않음. description 속성은 검색 엔진에서 미리보기 내용을 표시하는 속성.
<Chapter3. 웹 접근성>
1. 웹 접근성의 개념
1) 웹 접근성
장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것
2) 웹 접근성 실태
2008년 4월 11일부터 시행된 장애인 차별 금지 및 권리 구제 등에 관한 법률에 따라 현재 모든 공공기관과 법인의 웹 사이트는 웹 접근성을 의무적으로 갖추도록 함. 하지만 단속이 이루어지지 않아 국내에서는 대부분의 경우 웹 접근성에 대한 인식이 낮은 편이고, 잘 지켜지지 않는 경우가 많음.
3) 웹 접근성을 갖추면 얻을 수 있는 효과
-사용자층 확대
-다양한 환경 지원으로 서비스 사용 범위 확대(ex. 운전 중, 마우스 사용할 수 없는 경우)
-사회적 이미지 향상
2.웹 콘텐츠 접근성 지침
1) 인식의 용이성(Perceivable)
: 모든 콘텐츠는 사용자가 인식할 수 있어야 함
1-1) 적절한 대체 텍스트
: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공
-alt 속성 사용하여 대체 텍스트 제공
<img src="이미지 주소" alt="대체 텍스트" />-alt 속성을 빈 문자열로 설정해야 하는 경우: 정보를 인식할 필요가 없는 경우(ex. 배경 이미지, 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우)
1-2) 자막 제공
: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공
-자막을 포함한 동영상 사용하기
-자막을 지원하는 멀티미디어 플랫폼 사용하기
-비디오 요소 안쪽에 track 요소를 사용하여 자막 파일 불러오기
// WebVTT(Web Video Text Tracks, .vtt 파일) 또는 Timed Text Markup Language(TTML)형식을 사용해야 함.
<video ... >
<track src="자막.vtt" kind="captions" />
</video>-자막을 제공하기 어려운 경우 대본 또는 수어를 제공하기
1-3) 색에 무관한 콘텐츠 인식
: 콘텐츠는 색에 관계 없이 인식될 수 있어야 함
-콘텐트 테두리 설정하기
-콘텐츠에 레이블 달기
1-4) 명확한 지시사항 제공
: 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등과 관계없이 인식될 수 있어야 함
-대체 텍스트 작성과 시각적 피드백 제공
1-5) 텍스트 콘텐츠 명도 대비
: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 함
-콘텐츠와 배경 간의 명도 대비가 3 대 1까지 허용되는 경우: 텍스트가 18pt 또는 굵은(Bold) 14pt 이상일 경우, 확대 가능한 페이지인 경우, 비활성화된 콘텐츠인 경우, 장식 목적의 콘텐츠인 경우
1-6) 자동 재생 금지
: 자동으로 소리가 재생되지 않아야 함
-스크린 리더를 사용하는 경우, 자동으로 재생된 소리와 겹쳐 페이지 내용을 파악하기 어려움
-불가피하게 제공해야 하는 경우 해결법: 가장 먼저 위치시켜 정지할 수 있게 구현하기, ESC를 눌러 정지, 3초 이내에 정지
1-7) 콘텐츠 간 구분
: 이웃한 콘텐츠는 구별될 수 있어야 함
-테두리, 구분선, 무늬, 명도 대비, 간격 등 시각적으로 구분할 수 있는 방법 사용
2) 운용의 용이성(Operable)
: 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 함
2-1) 키보드 사용 보장
: 모든 기능은 키보드만으로도 사용할 수 있어야 함
-키보드로 웹 페이지에서 제공하는 모든 기능을 사용할 수 있고 빠져나오지 못하는 경우가 없도록 함
2-2) 초점 이동
: 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 함
-초점은 일반적으로 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 이동
-스크린 리더 사용자와 키보드 사용자도 이 순서로 웹 페이지를 탐색할 수 있도록 마크업을 구성
2-3) 조작 가능
: 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 함
-컨트롤의 대각선 길이는 6mm 이상
-컨트롤 간 1픽셀 이상의 여백
2-4) 응답 시간 조절
: 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 함
-가능하면 시간제한이 있는 콘텐츠를 넣지 않는 것이 좋음
-꼭 넣어야 하는 상황에서는 (1) 충분한 시간, (2) 종료 안내, (3) 조절 수단을 제공
2-5) 정지 기능 제공
: 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 함
-자동 변경 슬라이드 (캐러셀 슬라이드) : 이전, 다음, 정지 기능을 제공해야 함
-정지 버튼이 없더라도 마우스 호버 혹은 키보드 접근 시에 정지되도록 구현
-자동 변경 콘텐츠 : 실시간 검색어와 같이 자동으로 변경되는 콘텐츠는 이전, 다음, 정지 기능이 없더라도 접근했을 때 모든 콘텐츠를 확인할 수 있도록 구현
2-6) 깜빡임과 번쩍임 사용 제한
: 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 함
-눈의 피로를 유발, 광과민성 발작을 일으킬 가능성
-만약 이런 콘텐츠를 제공하게 되는 경우 다음 조건 중 하나를 충족: 면적이 전체 화면의 10% 미만, 사전에 경고하고 중단할 수 있는 수단을 제공, 시간을 3초 미만으로 제한
2-7) 반복 영역 건너뛰기
: 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 함
-스크린 리더를 사용할 경우, 반복되는 요소를 건너뛰고 메인 콘텐츠로 이동할 수 있는 방법을 제공해야 함
-가장 앞에 건너뛰기 링크 제공하기
-메뉴를 필요할 때만 열 수 있도록 만들기
그 외에도 건너뛰기 목적을 달성할 수 있는 방법이 있으면 됩니다.
2-8) 제목 제공
: 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공
-특수 문자는 1개까지만 사용
-특히 시각적 장식을 목적으로 특수 문자를 반복적으로 사용하지 않아야 함
2-9) 적절한 링크 텍스트
: 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공
-이미지에 링크가 걸려있는 경우 링크를 설명해주는 대체 텍스트를 작성
-비어있는 링크가 없어야 함
3) 이해의 용이성(Understandable)
: 콘텐츠는 이해할 수 있어야 함
3-1) 기본 언어 표시
: 주로 사용하는 언어를 명시
-HTML 요소에 lang 속성을 사용하여 제공
<html lang="ko">-페이지 내에 다른 언어가 존재하는 경우에는 해당 요소에 lang 속성을 표기
3-2) 사용자 요구에 따른 실행
: 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 함
-페이지 진입 시에 팝업이 뜨지 않게 해야 함
-화면을 가리는 레이어 창(모달)이 있는 경우, 가장 상단에 제공하여 가장 먼저 제어할 수 있도록 해야 힘
-스크린 리더 사용자는 새 창이 떴을 새 창임을 알려줄 수 있어야 함
// 링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주기
<a href="...">페이지<span class="blind">새 창</span></a>
// 링크 요소에 title 속성으로 새 창 작성하기
<a href="..." title="새 창">페이지</a>
// 링크 요소에 target=”_blank” 속성을 넣기
<a href="..." target="_blank">페이지</a>3-3) 콘텐츠 선형 구조
: 콘텐츠는 논리적인 순서로 제공
-제목, 내용 순서로 제공
-탭에 해당하는 내용이 있는 경우, 탭 제목 다음에 탭 내용이 오도록 마크업을 구성
// 잘못 작성한 예시 : 탭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>3-4) 표의 구성
: 표는 이해하기 쉽게 구성
-듣기만 해도 표의 구조, 내용을 이해하기 쉽게 구성
-테이블 요소 안에 caption 요소를 사용해서 표에 제목을 제공하기. 제목과 함께 표의 간단한 요약을 작성해도 좋음.
-표의 셀은 제목 셀과 데이터 셀이 구분되도록 구성. 제목 셀은 , 데이터 셀은 를 사용하면 됩니다.
-표의 구조가 복잡할 경우, 최대한 간소화하거나 scope 혹은 id와 headers 속성을 사용하여 작성.
3-5) 레이블 제공
: 사용자 입력에는 대응하는 레이블 제공
// <input> 요소에 value 나 placeholder 속성만 설정하는 것은 적합하지 않음
(X) <input type="text" placeholder="아이디" />
// <input> 요소에 id를 설정하고 <label> 요소의 for 속성으로 연결
// html -> for, jsx -> htmlFor 사용
// <label> 태그 사잇값이 화면에 렌더링 됨
(O) <label for="user_id">아이디</label>
<input id="user_id" type="text" placeholder="아이디" />
// title 속성을 사용
// 속성값이 화면에 렌더링 되지 않음
(O) <input type="text" title="아이디" placeholder="아이디" />
// WAI-ARIA의 aria-label 속성을 사용
(O) <input type="text" aria-label="아이디" placeholder="아이디" />
// WAI-ARIA의 경우 꼭 필요한 경우가 아니라면 사용하지 않는 것이 좋음3-6) 오류 정정
: 입력 오류를 정정할 방법을 제공
-작성 중, 혹은 제출 시 오류가 발생했을 때 입력했던 내용이 사라지지 않고 유지되도록 해야 함.
-오류가 발생한 경우 사용자에게 오류 발생 원인을 알려줘야 함.
-오류가 발생한 경우 오류가 발생한 위치로 초점 이동.
4) 견고성(Robust)
: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 함
4-1) 마크업 오류 방지
: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 함
// 요소의 열고 닫음에 오류가 없어야 함
(X) <div><span></div></span>
(O) <div><span></span></div>
// 요소의 속성을 중복해서 사용해선 안 됨
(X) <div class="중복" class="사용"></div>
// id를 중복해서 사용해선 안 됨
(X) <div id="아이디"><span id="아이디"></span></div>4-2) 웹 애플리케이션 접근성 준수
: 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 함
-웹 콘텐츠에 포함된 웹 애플리케이션도 접근성을 갖춰야 함.
-접근성을 갖추지 못한 경우에는 대체 수단이나 대체 텍스트를 제공
3.WAI-ARIA
1) WAI-ARIA
: WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격
WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많음
2) WAI-ARIA의 필요성
-시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에서 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 도와줌(남용 불가, 시맨틱 HTML이 최우선)
-SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있음
3) WAI-ARIA 사용법
: HTML 태그 내부에 속성을 추가함으로써 의미를 부여
-역할(role): HTML의 요소 종류와 역할이 서로 맞지 않을 때, HTML 요소의 역할을 정의하는 속성. role의 값은 정해진 값을 사용해야 함.
예시1.
// 버튼으로 사용되는 요소를 만들었는데 <div> 요소를 사용한 경우
<div role="button">div이지만 button으로 사용되는 요소</div>
// WAI-ARIA의 잘못된 사용 예시: HTML 요소로 충분히 파악 가능한 경우
<button role="button">button인 요소</button>
// WAI-ARIA의 잘못된 사용 예시: 시맨틱 요소 본연의 의미가 존재하는 경우
<h1 role="button">h1인 요소</h1>예시2.
// WAI-ARIA 사용 전 -> HTML 요소 구조만으로 화면 파악 어려움
<div>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</div>
<div>Tab menu ONE</div>
<div>Tab menu TWO</div>
<div>Tab menu THREE</div>
// WAI-ARIA 사용 후 -> HTML 요소 구조만으로 화면 파악 가능
<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 -> 선택 상태인 요소를 표시
aria-expanded -> 아코디언 UI가 펼쳐진 상태인지 표시
aria-hidden -> 요소가 숨김 상태인지를 표시
예시. aria-selected
// 첫 번째 탭 선택된 상태임을 알 수 있음
<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>-속성(property): 요소의 특징을 정의하는 속성(attribute)
aria-label -> 요소에 라벨을 붙여주는 기능, 이미지만 들어있는 버튼의 경우에 유용. aria-label의 값은 임의로 설정 가능.
// WAI-ARIA 사용 전 -> HTML 요소 구조만으로 어떤 역할을 하는 버튼인지 파악하기 어려움
<button> <img src="X.png" /> </button>
<button> <img src="돋보기.png" /> </button>
// WAI-ARIA 사용 후 -> HTML 요소 구조만으로 어떤 역할을 하는 버튼인지 파악 가능
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>aria-live -> 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시
off(기본값)
polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달
assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달
