aria-label이란? 그리고 tailwind css 에서의 사용법

aria-label은 웹 접근성을 개선하기 위해 사용되는 HTML 속성입니다. 이 속성은 화면 판독기와 같은 보조 기술이 웹 페이지의 요소에 대한 설명을 제공할 수 있도록 도와줍니다. aria-label 속성은 시각적으로는 보이지 않지만, 화면 판독기와 같은 도구가 요소의 역할과 목적을 사용자에게 전달할 수 있게 해줍니다.

 

aria-label 사용 예제

예를 들어, 버튼에 시각적인 텍스트가 없고 아이콘만 있는 경우, aria-label을 사용하여 버튼의 기능을 설명할 수 있습니다:

<button aria-label="Close">X</button>

여기서 aria-label="Close"는 화면 판독기 사용자에게 이 버튼이 "Close" (닫기) 버튼이라는 것을 알리게 합니다.

 

Tailwind CSS에서 aria-label 사용법

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 스타일링과 관련된 작업을 간편하게 할 수 있지만, 접근성 관련 속성에는 직접적인 영향을 미치지 않습니다. aria-label은 HTML 속성이므로 Tailwind CSS와는 별개로 적용됩니다.

Tailwind CSS를 사용할 때 aria-label 속성을 HTML 요소에 직접 추가하여 접근성을 높일 수 있습니다. 예를 들어, Tailwind CSS를 사용하여 스타일링한 버튼에 aria-label을 추가하는 방법은 다음과 같습니다:

 

<!-- Tailwind CSS를 사용하여 스타일링된 버튼 -->

<button class="bg-blue-500 text-white p-2 rounded" aria-label="Submit form">

<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />

 

</svg>

</button>

여기서 class="bg-blue-500 text-white p-2 rounded"는 Tailwind CSS 유틸리티 클래스를 사용하여 버튼의 스타일을 정의하며, aria-label="Submit form"은 버튼의 기능을 설명하여 접근성을 향상시킵니다.

따라서 aria-label은 HTML의 기본 속성으로, Tailwind CSS와 함께 사용할 때는 직접적인 연관 없이 HTML 코드에 접근성 관련 정보를 추가하는 데 사용됩니다.