본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

어떤 경우에 ARIA Lable을 사용해야 하나요?

웹사이트의 일부 요소들은 기본적으로 접근 가능한 이름(Accessible Name)이 없거나, 실제 콘텐츠를 충분히 설명하지 못하는 경우가 있습니다. 이런 상황에서 aria-label 속성이 유용하게 사용 될 수 있습니다. 한마디로 이는, 각각의 콘텐츠들에 간결한 레이블을 제공하여 접근성을 높이는 방식입니다.

콘텐츠마다 접근 가능한 이름(Accessible Name) 역할을 하는 요소가 다양합니다. 이는 아래의 예시를 통해 이해하실 수 있을 거에요.

• 버튼(button): 태그 안의 텍스트를 통해 버튼의 목적을 인식합니다.

• 이미지(img): alt text 속성을 통해 이미지가 무엇을 설명하고 있는지 인식합니다.

• 폼 입력(input): 연결된 label 태그의 텍스트를 통해 어떤 정보를 얻기 위한 폼인지 인식합니다.

aria-label은 특히 콘텐츠에 시각적 텍스트가 부족하거나, 시각적 텍스트가 있더라도 이것만으로는 목적이나 의미를 충분히 전달하지 못하는 상황에서 유용하게 사용될 수 있습니다.

ARIA Lable 사용해보기

1. 코드로 사용하기

예를 들어, 프레이머 웹사이트로 바로 이동하는 버튼이 있다고 가정해 보겠습니다. 이 버튼에 텍스트가 없다면 스크린 리더 사용자는 이 버튼의 기능을 인식하지 못할 수 있겠죠. 이럴 때 aria-label을 이용하면 명확하게 목적을 전달할 수 있습니다.

<button aria-label="Framer 웹사이트로 이동하기">
  <!-- Framer 아이콘 또는 그래픽 요소 -->
</button>

이렇게 aria-label을 지정하면, 화면에는 여전히 아이콘만 보이지만 스크린 리더는 버튼의 기능을 “Framer 웹사이트로 이동하기”로 정확히 읽어줄 수 있게 됩니다.

2. Framer에서 사용하기

Framer 내에서도, 오른쪽 속성 패널의 Accessibility > Aria Label 란에 코드 없이도 손쉽게 aria-label을 넣어줄 수 있는 기능을 제공하고 있습니다.

이를 통해 웹사이트의 포용성과 사용자 친화성을 크게 향상시켜, 모든 사용자에게 더 나은 경험을 보장할 수 있게 됩니다. 여러분도 aria-label을 활용하여 사용자 친화적인 웹사이트를 제작해보시길 바랍니다.

본 글은 Framer 공식 블로그의 ‘Improving Accessibility with ARIA Labels’를 번역·각색한 콘텐츠입니다.