-
[WAI-ARIA] (aria-label, aria-labelledby)HTML 2024. 2. 19. 16:48728x90반응형
라이트 하우스에서 Accessibility 항목 중 아래와 같은 항목이 있었다
learn how to~ 를 눌러 읽어보니 arai-label에 대한 설명이 나왔다
대충은 이해가 가는데 명확하게 이해가 안 되어서 검색해보았다
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
aria-label - Accessibility | MDN
The aria-label attribute defines a string value that labels an interactive element.
developer.mozilla.org
aria-label은 WAI-ARIA의 속성 중에 하나라고 한다
WAI-ARIA란?
https://www.w3.org/WAI/standards-guidelines/aria/
WAI-ARIA Overview
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).
www.w3.org
Web Accessibility Initiative(WAI)-ARIA(Accessible Rich Internet Applications)의 약자로
장애가 있는 사람들이 웹 콘텐츠와 웹 어플리케이션에 좀 더 쉽게 접근할 수 있는 방법을 제공함
ARIA를 사용해 접근성 문제를 해결한다고 한다
그런데 mdn을 보니 HTML5 이후로 나온 태그들 중에는 ARIA 속성이 자동으로 들어가있는 태그들(ex: <head>, <main>,<nav>)이 있기 때문에 의미를 가진 HTML을 먼저 사용하고 그 후에 추가적으로 ARIA를 사용해야한다는 것이다
Sometimes the default accessible name of an element is missing, or does not accurately describe its contents, and there is no content visible in the DOM that can be associated with the object to give it meaning. A common example is a button containing an SVG or icon font (which you shouldn't be using) without any text.
(번역기 돌림)
요소의 기본 접근 가능한 이름이 누락되었거나 내용을 정확하게 설명하지 않는 경우, DOM에 개체와 연결하여 의미를 부여할 수 있는 콘텐츠가 표시되지 않는 경우가 있습니다. 일반적인 예로는 텍스트 없이 SVG 또는 아이콘 글꼴(사용해서는 안 되는)이 포함된 버튼이 있습니다.aria-label에 대한 설명을 읽고 실제로 고쳐야하는 요소를 보니 버튼 태그 사이에 텍스트가 없이 svg 파일로 이루어져있다...
type pageNameType = { pageName: string; }; const ScrollButton = ({ pageName }: pageNameType) => { return ( <Link href={`#${pageName}`} className="flex justify-center items-center"> <button type="button" className="scroll-btn hover:scale-110 transition duration-300 relative flex justify-center items-center w-[90px] h-[90px] mobile_xs:w-[50px] mobile_xs:h-[50px] mobile_sm:w-[52px] mobile_sm:h-[52px] tablet:w-[60px] tablet:h-[60px]" > <Circle className="animate-rotate absolute " width="100%" height="100%" /> <ArrowDown width={28} height={28} fill="white" className="mobile_xs:w-[16px] mobile_xs:h-[16px] mobile_sm:w-[18px] mobile_sm:h-[18px]" /> </button> </Link> ); }; export default ScrollButton;
mdn 예시와도 넘나 비슷한 것...
Most content has an accessible name generated from its immediate wrapping element's text content. Accessible names can also be created by certain attributes or associated elements.
By default, a button's accessible name is the content between the opening and closing <button> tags, an image's accessible name is the content of its alt attribute, and a form input's accessible name is the content of the associated <label> element.
If none of these options are available, or if the default accessible name is not appropriate, use the aria-label attribute to define the accessible name of an element.
(번역기 돌림)
대부분의 콘텐츠에는 바로 앞에 있는 래핑 요소의 텍스트 콘텐츠에서 생성된 접근 가능한 이름이 있습니다. 접근 가능한 이름은 특정 속성이나 관련 요소에 의해 생성될 수도 있습니다.
기본적으로 버튼의 접근 가능한 이름은 여는 <button> 태그와 닫는 </button> 태그 사이의 콘텐츠, 이미지의 접근 가능한 이름은 해당 이미지의 alt 속성의 콘텐츠, form input's의 접근 가능한 이름은 연결된 <label> 요소의 콘텐츠입니다.
이러한 옵션을 사용할 수 없거나 기본 접근 가능한 이름이 적절하지 않은 경우 aria-label 속성을 사용하여 요소의 접근 가능한 이름을 정의합니다.설명을 읽어보니 대부분의 요소에는 접근 가능한 속성이나 텍스트들이 있는데 이가 없을 경우에는 arai-label 속성을 사용한다는 얘기였다
예를 들면 아래와 같다
// 예시 1 <button>close</button> // 예시 2 <img src="flower.jpg alt="a red flower" /> // 예시 3 <label for="username">username:</label> <input id="username" type="text">
버튼의 경우 열고 닫는 태그 안에 있는 텍스트를 스크린 리더가 읽어 닫는 역할을 하는 버튼이라는 걸 알 수 있고,
이미지의 경우 alt 속성을 통해 해당 이미지가 빨간 꽃 이미지라는 것을 스크린리더에게 알릴 수 있다.
또한 예시 3의 경우 label에 적힌 username: 이라는 텍스트를 보고 해당 인풋이 uername을 적는 인풋이라는 것을 알려줄 수 있다
내 스크롤 다운 버튼의 경우 참조할 수 있는 속성이나 텍스트가 없었다
그래서 이 항목을 수정하라고 라이트 하우스에 뜬 것이다
근데 보다보니 aria-label과 aria-labelledby라는 속성이 있었다
언뜻 비슷해보이는데 무엇이 다른 걸까?
aria-label can be used in cases where text that could label the element is not visible. If there is visible text that labels an element, use aria-labelledby instead.
The purpose of aria-label is the same as aria-labelledby. Both provide an accessible name for an element. If there is no visible name for the element you can reference, use aria-label to provide the user with a recognizable accessible name. If the label text is available in the DOM, and referencing the DOM content and acceptable user experience, prefer to use aria-labelledby. Don't include both. If both are present on the same element, aria-labelledby will take precedence over aria-label.
(번역기 돌림)
요소에 레이블을 지정할 수 있는 텍스트가 보이지 않는 경우 aria-label을 사용할 수 있습니다. 요소에 레이블을 지정할 수 있는 텍스트가 표시되는 경우 대신 aria-labelledby를 사용합니다.
aria-label의 목적은 aria-labelledby와 동일합니다. 둘 다 요소에 액세스 가능한 이름을 제공합니다. 참조할 수 있는 요소에 대해 표시되는 이름이 없는 경우 aria-label을 사용하여 사용자에게 인식 가능한 접근 가능한 이름을 제공합니다. DOM에서 레이블 텍스트를 사용할 수 있고 DOM 콘텐츠 및 허용 가능한 사용자 경험을 참조할 수 있는 경우 aria-labelledby를 사용하는 것이 좋습니다. 둘 다 포함하지 마세요. 둘 다 동일한 요소에 있는 경우 aria-labelledby가 aria-label보다 우선합니다.aria-label은 앞서 나왔던 나의 예시와 같이 이 요소가 무슨 기능이나 역할을 하는지 참조할 수 있는 속성이나(ex: img 태그의 alt 등)텍스트가 없는 경우 직접적으로 설정을 해주는 속성이고, aria-labelledby은 참조할 수 있는 기존의 텍스트와 연결해서 사용할 수 있다
위 이미지는 id가 rg-label이라는 span요소의 텍스트(Drink options)와 div를 aria-labelledby와 연결했다
그래서 스크린 리더를 사용하는 사용자가 첫 번째 라디오 버튼에 접근하면 스크린리더는 Drink options, Water라고 알려줄 것이다
근데 아래와 같이 aria-label, aria-labelledby, 요소 안의 텍스트가 같이 사용되었을 때는 브라우저는 aria-labelledby를 우선시한다고 한다
<button aria-label="Blue" aria-labelledby="color">Red</button> <span id="color">Yellow</span>
aria-labelledby가 우선 적용되어 스크린 리더는 Yellow 라고 읽어줄 것이다
결론적으로 나는 참고할 만한 속성이나 텍스트가 없기 때문에 aria-label 속성을 사용해서 아래와 같이 수정했다
const ScrollButton = ({ pageName }: pageNameType) => { return ( <Link href={`#${pageName}`} className="flex justify-center items-center"> <button type="button" aria-label={`scroll to the next ${pageName} section`} className="scroll-btn hover:scale-110 transition duration-300 relative flex justify-center items-center w-[90px] h-[90px] mobile_xs:w-[50px] mobile_xs:h-[50px] mobile_sm:w-[52px] mobile_sm:h-[52px] tablet:w-[60px] tablet:h-[60px]" > <Circle className="animate-rotate absolute " width="100%" height="100%" /> <ArrowDown width={28} height={28} fill="white" className="mobile_xs:w-[16px] mobile_xs:h-[16px] mobile_sm:w-[18px] mobile_sm:h-[18px]" /> </button> </Link> ); };
pageName이라는 prop을 사용해서 동적으로 다음 섹션이 무엇인지 알려주었다
근데 나는 스크린리더가 없는데 잘 적용되었는지 어떻게 알 수 있을까?
찾아보다가 크롬 개발자도구에서 해답을 찾을 수 있었다
1. (mac) command + shift + i, (window) F12나 ctr + shift + i 를 눌러 개발자 도구를 켠다
2. aria-label이 적용된 요소를 선택한다
3. Dock side에서 >>(더보기)를 누르고 Accessibility를 누른다
4. 적용된 걸 확인한다
아주 잘 적용되어있는 걸 볼 수 있다~~
반응형'HTML' 카테고리의 다른 글
[HTML] autoComplete property (1) 2024.02.20