This document aims to aid local users learning Framer who face challenges due to a lack of resources in Korean. It translates content from the official blog into Korean and adds practical information. We hope it provides some assistance to Framer users.

When should you use an ARIA Label?

Some elements on websites do not inherently have an Accessible Name, or their content does not sufficiently describe them. In such cases, the aria-label attribute can be very useful. In short, it works by providing concise labels for each piece of content to enhance accessibility.

There are various elements that serve as the Accessible Name for different content. You can understand this through the examples below.

• Button (button): The text within the tag helps recognize the purpose of the button.

• Image (img): The alt text attribute explains what the image describes.

• Form input (input): The text of the associated label tag helps identify the purpose of the form.

The aria-label is particularly useful when there is a lack of visual text in the content, or when the visual text alone does not fully convey the purpose or meaning.

Using ARIA Label

1. Using it in code

For example, imagine there is a button that directly navigates to the Framer website. If this button does not have text, a screen reader user might not understand its function. Using aria-label in such cases can clearly communicate its purpose.

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

By specifying the aria-label like this, the icon remains visible but the screen reader can accurately read the button's function as “Navigate to Framer website.”

2. Using it in Framer

Within Framer, the right-hand properties panel under Accessibility > Aria Label allows you to easily add an aria-label without needing to code.

This greatly enhances the inclusivity and user-friendliness of your website, ensuring a better experience for all users. We encourage you to use aria-label to create user-friendly websites.

This article is an adaptation and translation of the Framer official blog's ‘Improving Accessibility with ARIA Labels’ content.