웹 접근성을 고려하는 법

안녕하세요 35기 웹파트 한수정입니다.

과제를 하며 aria-label, rem과 px 등 궁금한 거에 대해 찾아보다 보니 웹 접근성이라는 공통점을 찾게 되어 정리해 보게 되었습니다.

 

웹 접근성?

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

눈으로 볼 수 없는 경우를 대비하여 그림이나 사진을 대신할 수 있는 설명을 텍스트로 제공해야 하고 마우스를 사용할 수 없는 사용자를 위하여 키보드만으로도 모든 콘텐츠에 접근하여 이용할 수 있도록 해는 등의 특징이 있습니다. 

또한, 웹 접근성 보장은 「국가정보화기본법」과 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」등 법률에 명시된 의무사항입니다.

 

스크린리더?

시각 장애인이나 저시력 사용자를 위해 설계된 소프트웨어로, 화면에 표시되는 내용을 음성으로 읽어주거나 점자 디스플레이를 통해 정보를 제공합니다. 사용자는 키보드 입력이나 터치 스크린을 통해 상호작용할 수 있습니다.

 

WAI-ARIA?

WAI?

Web Accessibility Initiative로, 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관입니다.

ARIA?

Accessible Rich Internet Applications로, 콘텐츠와 웹에 더 쉽게 접근할 수 있도록 하는 웹 접근성을 갖추기 위한 기술입니다.

 

→ WAI-ARIA는 웹 콘텐츠에 더 쉽게 접근할 수 있도록 돕는 기술입니다.

 

WAI-ARIA

• role(역할): 요소의 역할을 정의하여 스크린 리더가 해당 요소를 올바르게 인식할 수 있도록 합니다.
• state(상태): 요소의 현재 상태를 나타냅니다.
• property(속성): 요소의 특징이나 기능을 정의합니다.

role

• tab
• link
• button
• gruop

등 많은 role이 있고 role에는 정해진 값이 들어가야 합니다. 아래 role에 대한 예시 코드로 알아보겠습니다. 

• 태그로 알 수 있는 내용을 role로 중복해서 설명할 필요가 없으며, 의미를 가진 태그를 role로 변경하면 안 됩니다.
• tabindex="0" 속성을 추가해 사용자가 키보드로 탐색할 수 있게 돕습니다.

<!-- 잘못된 예시 -->
<button role="button"> Click me! </button>
<h1 role="button"> Click me! </h1>

<!--옳은 예시-->
<div data-message="This is from the first button" tabindex="0" role="button">
  Click me!
</div>

<div role="dialog" aria-labelledby="dialogTitle">대화 상자 내용</div>

<div role="tablist">
  <ul>
    <li role="tab" tabindex="0">Tab1</li>
    <li role="tab" tabindex="0">Tab2</li>
    <li role="tab" tabindex="0">Tab3</li>
  </ul>
</div>

 

state

• aria-selected 요소가 선택되었는지를 나타냅니다. 주로 목록이나 탭 등의 선택 가능한 항목에서 사용되고 값은 true, false, 또는 undefined입니다.

<li role="tab" aria-selected="true">Tab1</li>
<li role="tab" aria-selected="false">Tab2</li>

• aria-hidden는 요소가 화면에 보이지 않거나 접근할 수 없는 상태인지를 나타내고 값은 true 또는 false입니다. 이 속성은 스크린 리더와 같은 보조 기술에서 해당 요소를 무시하도록 할 때 사용합니다. 아래 span 요소는 화면에 표시되지만 스크린 리더는 이 내용을 읽지 않아 스크린 리더 사용자에게 불필요한 정보를 제공하지 않을 수 있습니다.

<span aria-hidden="true"> ||| </span>

• 이외에도 aria-checked, aria-expanded,  aria-pressed 등이 있습니다.

property

• aria-label
  • 화면에 표시되지 않는 요소에 대한 텍스트 설명을 제공하는 속성입니다. 이미지나 아이콘과 같은 비주얼 요소에 대해 스크린 리더와 같은 기술이 이해할 수 있는 설명을 추가합니다.
  • aria-label은 시맨틱 태그이거나, role 속성 값이 사용자와 상호작용하는 경우 사용할 수 있습니다. 
  • aria-label="고양이 아이콘" 속성을 통해 스크린 리더에게 이 링크가 "고양이 아이콘"임을 설명합니다. 따라서 사용자는 아이콘이 무엇을 나타내는지 명확하게 알 수 있습니다.

<a href="#" aria-label="고양이 아이콘">
	<i class="fa-solid fa-cat"></i>
</a>
      
<a href="#left" class="scroll-button" aria-label="왼쪽으로 스크롤">
	<i class="fa-solid fa-chevron-left"></i>
</a>

• aria-labelledby
  • aria-labelledby는 특정 요소에 대해 다른 요소의 ID를 참조하여 레이블을 제공합니다. 즉, 이 속성은 해당 요소의 설명이나 이름을 다른 요소에서 가져와서 표시하는 기능을 합니다.

<h2 id="dialogTitle">회원가입</h2>
<div role="dialog" aria-labelledby="dialogTitle">
    <form>
        <!-- 폼 필드 내용 -->
    </form>
</div>

• 이외에도 aria-required, aria-live, aria-controls 등이 있습니다. 

rem과 px 

reset.css를 처음 알게 되어 사용해 보며, rem과 px, %에 대해서도 고민해 볼 수 있었습니다.

reset.css란?

브라우저에는 기본 스타일을 제공하는 기본 스타일 시트인 user agent stylesheet가 있습니다. reset.css는 브라우저마다 다르게 설정된 기본 스타일(user agent stylesheet)을 제거하여 일관된 스타일을 적용할 수 있게 해줍니다. 기본적으로 브라우저에서 제공하는 스타일을 초기화함으로써 디자이너가 자유롭게 스타일을 적용할 수 있는 환경을 제공합니다. 

html { font-size: 62.5%; }란?

이때 reset.css에서는 html { font-size: 62.5%; }를 사용합니다. 브라우저의 기본 폰트 크기가 16px이기 때문에 62.5%는 16px의 62.5%인 10px입니다. 따라서 html { font-size: 62.5%; }는  기본 폰트의 크기를 10px로 설정하는 방법입니다.

1rem이 10px과 같아져 rem 단위로 크기를 계산할 때 직관적으로 계산할 수 있다는 이점이 있습니다.

px, rem, %에 대해

• px: 고정된 크기를 설정하는 단위입니다. 절대적인 크기를 적용해 다양한 화면 크기나 해상도에 관계없이 동일한 크기가 유지됩니다.
• rem: root em이 약자로 html 요소에 설정된 기본 폰트 크기를 기준으로 크기를 지정합니다. reset.css에서  html { font-size: 62.5%; }로 설정한 경우, 1.6rem=16px입니다.
• %: 상대적인 크기를 나타내며 부모 요소의 크기를 기준으로 설정됩니다.

왜 px보다 rem이 웹 접근성에 좋을까요?

px는 고정된 크기이기 때문에 사용자가 브라우저 설정에서 폰트 크기를 조정하더라도 변화가 없습니다. 하지만, rem은 브라우저의 폰트 크기 설정에 따라 유연하게 크기가 조정됩니다. 사용자가 설정한 크기에 맞춰 폰트가 커지거나 작아지므로, rem을 사용하면 다양한 사용자에게 더 잘 보이는 웹 페이지를 만들 수 있습니다.

태그  <b> 대신 <strong>, <i> 대신 <em> !

• <b> </b> : 글자를 굵은 볼드체로 나타냅니다.
• <strong> </strong> : 글자를 강조하여 굵게 나타냅니다.
•  <i> </i> : 글자를 기울인 이탤릭체로 나타냅니다.
• <em> </em> : emphasis의 약자로 글자를 강조하여 기울여 나타냅니다.

b 태그와 i 태그는는 겉보기에만 스타일을 주기 때문에 웹 접근성 부분에서 strong 태그와 em 태그 사용이 권장됩니다. 스크린 리더를 사용하면, strong과 em 부분은 더 강하게 읽어 차이를 b, i와 차이를 보입니다. 

 

모든 사용자가 쉽게 접근할 수 있는 웹을 만들기 위해, 코드 작성 시 웹 접근성을 고려해볼 수 있었으면 좋겠습니당

 

참고

웹 접근성

http://www.websoul.co.kr/accessibility/define.asp

WAI-ARIA role MDN

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

aria-label

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/Attributes/aria-label

font-size

https://developer.mozilla.org/ko/docs/Web/CSS/font-size

html 요소

https://developer.mozilla.org/ko/docs/Web/HTML/Element