🎙️ 아리아나그란데와 웹 접근성의 관계

 

안녕하세요. 웹파트 35기 OB 박채연입니다 😋

제가 첫 공유과제로 들고 온 주제는 바로 '웹 접근성'입니다.

 

근데 왜 뜬금없이 '아리아나 그란데' 얘기를 꺼냈냐구요?

 

아리아나 그란데?? 뭔소리지?? 혹시 팬이신가??

 

웹 접근성하면, 함께하는 개념이 WAI-ARIA 잖아요!

제가 저 글을 본 이후로 아리아나그란데가 ARIA가 잊혀지지 않아서

여러분도 이제 웹 접근성, ARIA에 대해 확실하게 기억하면 좋지 않을까 해서 꺼내봤습니다 😁

 

자 그럼 이제 '웹 접근성'에 대해 자세히 알아볼게요!

 

---

 

🌐 웹 접근성 (Web Accessibility)

장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다.

 

🌐 WAI-ARIA (Web Accessibility Initiative’s Accessible Rich Internet Applications)

장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말한다.

HTML을 보충해서, 스크린 리더가 브라우저를 읽을 때 각 요소가 어떤 역할을 하고, 무슨 의미로 존재하는지 등 필요한 정보를 제공한다.

 

🗣️ 스크린 리더

브라우저를 시각적으로 읽는 것이 불편한 사용자를 위해 컴퓨터 화면의 텍스트를 읽어주는 소프트웨어이다.

스크린 리더로 읽힐 때, '올바른 내용을 제공하는지'가 웹사이트가 접근성을 잘 지키는가를 평가하는 가장 큰 척도 중 하나라고 한다!

 

ARIA는 마크에서 태그 안에 속성으로 추가해 자세한 정보를 제공할 때 사용하는데,

모든 속성을 다 다루기보단, 자주 사용하고 언급되는 부분들에 대해만 알아보자!

 

---

 

1️⃣ aria-role 

태그의 역할을 알려주는 속성

 

💡 우리가 클래스명 짓는 것처럼 마음대로 쓰는 게 아니라, 이미 정해진 값을 사용해야 한다!

button, tab, tablist, aside 등 다양한 role이 존재한다.

 

💡 시멘틱적 요소가 있는, 의미있는 태그를 사용할 경우, 굳이 role 속성을 중복해서 사용하진 않는다.

// 시멘틱 태그를 사용하는 경우는 굳이 role 속성을 중복해서 사용 x
<input type="checkbox" />
<button> 버튼 </button>
<ul> ... </ul>

// 이럴 필요 없다는 뜻
<button role="button"> 버튼 </button>

 

 

 

2️⃣ aria-label

ARIA properties(속성)에 속한다.

화면에 현재 요소를 설명할 텍스트가 없을 경우, 설명할 때 사용하는 설명용 텍스트이다.

 

💡 role의 button이나 tab처럼 값이 정해진 것이 아니라, 브라우저가 스크린리더 사용자에게 전달해야 하는 내용을 상황에 맞게 적는다.

<a class="left-scroll" href="#first-image"> ◀️ </a>

왼쪽으로 스크롤하는 버튼이 있다고 할 때, 이 상태라면 스크린리더는 '링크'라는 것만 알려준다.

<a class="left-scroll" href="#first-image" aria-label="제일 왼쪽으로 스크롤 이동"> ◀️ </a>

이렇게 aria-label을 설정해주면, 스크린 리더는 '제일 왼쪽으로 스크롤 이동-링크' 라고 읽는다.

 

 

💡 시멘틱 태그이거나 role의 속성 값이 상호작용을 하는 값일 때 aria-label을 붙일 수 있다는 점도 알아두자! 

시멘틱 태그, role 속성이 상호작용하는 값	의미 없는 태그
- href 속성이 있는 a 태그 - button - header - nav - main - role = "navigation" - role = "button"  ...	- div - span - p - li

 

 

3️⃣ aria-labelledby

ARIA properties(속성)에 속한다.

화면에 현재 요소를 설명할 텍스트가 있을 경우, 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다.

 

<h2 id="category">카테고리</h2>
<ul aria-labelledby="category">
  <li>Home</li>
  <li>Childhood</li>
  <li>Daily</li>
</ul>

'카테고리' 라는 텍스트와 아래의 리스트가 같은 그룹으로 연결되어 있음을 aria-labelledby를 통해 알 수 있다.

 

 

4️⃣ aria-hidden

ARIA states(상태)에 해당한다.

탐색을 제한하고 화면에 보여져야 할 경우, 스크린리더가 읽지 않도록 설정할 때 사용한다.

의미가 없는 지극히 시각적인 디자인 요소일 때, aria-hidden: "true" 설정을 통해서 읽지 않도록 설정이 가능하다.

 

 

 

---

 

아래 참고자료에도 달아놨지만, 많은 속성이 존재하니까! 한번 읽어보고 필요할 때 적절하게 사용하면 좋을 것 같다!

 

우리 모두 웹 페이지의 다양한 사용자를 고려해서,

모든 사용자가 접근하기 쉬운 페이지를 만들도록 노력하는 웹 개발자가 되어보아요 🤝

 

 

---

💫 참고자료

 

아리아나그란데 썰 풀어주신 도영님 감사합니다 ❗️😊

https://velog.io/@jeong20909/NOW-SOPT-SOPT-34%EA%B8%B0-WEB-%ED%8C%8C%ED%8A%B8-%EC%A7%80%EC%9B%90-%EB%B0%8F-%ED%95%A9%EA%B2%A9-%ED%9B%84%EA%B8%B0

[NOW SOPT] SOPT 34기 웹파트 지원 및 합격 후기

 

ARIA 개념에 대해 잘 설명되어 있는 글

https://joyhong-91.tistory.com/22?category=635984

[HTML] WAI-ARIA란? 웹접근성을 고려하는 방법 (aria-role, aria-label, aria-labelledby, aria-hidden, aria-tab)

 

https://velog.io/@a_in/WAI-ARIA-role-aria-label

WAI-ARIA: role과 aria-label 사용법

 

 

더 자세한 속성들을 알아보고 싶다면?

https://deugdeugi.github.io/2023/08/08/aria.html

ARIA에 대한 기본 개념 - Deugdeugi.com

 

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/Attributes#aria_%EC%86%8D%EC%84%B1_%EC%9C%A0%ED%98%95

ARIA 상태와 속성 - 접근성 | MDN