Design Systems & Component Libraries · 강의

접근성 모범 사례 (a11y)

장애가 있는 사용자를 포함한 모든 사용자가 구성 요소를 이용할 수 있도록 포용적인 디자인 원칙을 적용합니다.

레슨 3/411개 단계

접근성 모범 사례 (a11y)은(는) CoddyKit의 무료 Design Systems & Component Libraries 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Design Systems & Component Libraries 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Design Systems & Component Libraries 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

What is Accessibility (a11y)?

Accessibility, often shortened to a11y, means designing and building products that everyone can use, regardless of their abilities.

It ensures people with disabilities can perceive, understand, navigate, and interact with your UI components.
This includes users with visual, auditory, motor, and cognitive impairments.
Building accessible components benefits all users, improving overall usability.

Why a11y Matters

Ignoring accessibility can exclude a significant portion of your potential users. Beyond ethical considerations, there are strong practical and legal reasons:

Wider Audience: Reach more users globally.
Improved SEO: Many a11y practices align with good SEO.
Legal Compliance: Avoid potential lawsuits and comply with laws like the ADA.
Better UX for All: Features like keyboard navigation or clear contrast help everyone.

WCAG: The Guiding Standard

The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility, developed by the W3C.

WCAG is structured around four main principles, often remembered by the acronym POUR:

Perceivable: Information must be presented in ways users can perceive.
Operable: Interface components and navigation must be operable.
Understandable: Information and the operation of the user interface must be understandable.
Robust: Content must be robust enough to be interpreted reliably by a wide range of user agents, including assistive technologies.

Semantic HTML: The Foundation

Using the correct HTML elements is the most fundamental step for accessibility. Semantic HTML provides meaning to content, which assistive technologies can understand.

For example, use a <button> for a button, not a <div> styled to look like one. This gives it built-in keyboard interaction and roles.

Try running this example:

<!DOCTYPE html>
<html>
<head>
  <title>Semantic Button</title>
</head>
<body>
  <button onclick="alert('Clicked!')">
    Click Me (Semantic)
  </button>
  <div style="
    padding: 10px;
    border: 1px solid blue;
    display: inline-block;
    cursor: pointer;
    margin-left: 10px;
  " onclick="alert('Clicked!')">
    Click Me (Non-Semantic)
  </div>
</body>
</html>

ARIA Attributes: Enhancing Semantics

Sometimes, native HTML isn't enough to convey the full meaning or state of a complex UI component. This is where WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) comes in.

ARIA attributes provide additional semantic information to assistive technologies, but they don't change how an element looks or behaves for sighted users.

Roles: Define the type of UI element (e.g., role="alert", role="navigation").
States: Describe the current condition of an element (e.g., aria-expanded="true", aria-checked="false").
Properties: Give attributes to an element (e.g., aria-labelledby="heading").

Using ARIA Labels

The aria-label attribute is crucial for providing an accessible name for elements that might otherwise lack one, or whose visual label isn't sufficient.

It's often used for icon-only buttons or when a button's purpose isn't clear from its visual text alone.

Try running this example:

<!DOCTYPE html>
<html>
<head>
  <title>ARIA Label Example</title>
  <style>
    .icon-button {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="icon-button" aria-label="Delete item">
    🗑️
  </button>
  <p>The trash icon button has an accessible name "Delete item" for screen readers.</p>
</body>
</html>

Keyboard Navigation & Focus

Many users, including those with motor impairments or who are blind, navigate websites using only a keyboard. Ensure all interactive elements are reachable and operable via keyboard.

Tab Order: Elements should be navigable in a logical order using the Tab key.
Focus Indicators: Make sure the focused element is clearly visible (e.g., with an outline).
Interactive Elements: Buttons, links, and form controls should be operable with Enter or Space.
tabindex: Use tabindex="0" for elements not naturally focusable but needing to be, and tabindex="-1" to make elements focusable programmatically but not via tab key. Avoid tabindex values greater than 0.

Color Contrast for Readability

Sufficient color contrast between text and its background is vital for users with low vision or color blindness. WCAG recommends specific contrast ratios:

Normal Text: At least 4.5:1 contrast ratio.
Large Text (18pt/24px or 14pt/18.66px bold): At least 3:1 contrast ratio.
UI Components/Graphical Objects: At least 3:1 contrast ratio against adjacent colors.

Use online contrast checkers or browser developer tools to verify your color choices.

Alternative Text for Images

Images convey visual information, but screen readers cannot 'see' them. The alt attribute provides a textual description of an image.

Descriptive alt: For informative images, describe the content and function.
Empty alt (alt=""): For purely decorative images that don't convey essential information.
Avoid Redundancy: Don't start with "Image of..." if it's obvious.

Try running this example:

<!DOCTYPE html>
<html>
<head>
  <title>Alt Text Example</title>
</head>
<body>
  <img src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Blue+Square" 
       alt="A blue square" width="150" height="150">
  <p>The image above has an alt text description for screen readers.</p>
  
  <img src="https://via.placeholder.com/150/CCCCCC/000000?text=Decorative" 
       alt="" width="150" height="150">
  <p>This image is decorative and has an empty alt attribute.</p>
</body>
</html>

Accessibility Check

Which of the following practices is BEST for ensuring a button is accessible to all users, especially those using screen readers?

인터랙티브 레슨에서 답해보세요

Recap: Building Inclusive UIs

In this lesson, we explored the critical aspects of building accessible UI components. We learned that a11y ensures everyone can use your products, following WCAG principles.

Semantic HTML is the foundation.
ARIA attributes enhance semantics for complex components.
Keyboard navigation is essential for operability.
Color contrast ensures readability.
Alt text describes images for screen readers.

By applying these best practices, you create a more inclusive and robust user experience for all.

무료로 시작

AI 튜터와 함께 Design Systems & Component Libraries을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 12
레슨: 48

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“접근성 모범 사례 (a11y)” 강의는 무료인가요?

네 — “접근성 모범 사례 (a11y)” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Design Systems & Component Libraries 강의 전체를 잠금 해제할 수 있습니다. Design Systems & Component Libraries 강의에는 총 4개의 강의가 포함되어 있습니다.

“접근성 모범 사례 (a11y)”에서 뭘 배우나요?

장애가 있는 사용자를 포함한 모든 사용자가 구성 요소를 이용할 수 있도록 포용적인 디자인 원칙을 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 Design Systems & Component Libraries을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Design Systems & Component Libraries을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Design Systems & Component Libraries은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“접근성 모범 사례 (a11y)” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Design Systems & Component Libraries 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Design Systems & Component Libraries 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Design Systems & Component Libraries(으)로 돌아가기