0Pricing
HTML Academy · 강의

role button alert dialog 및 landmark

ARIA 역할을 적용해 보조 기술에 요소의 목적 전달하기

role button alert dialog 및 landmark은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

role=button

버튼이 아닌 요소를 버튼처럼 동작하게 해야 할 때 role="button"을 사용하세요(드문 경우):

<span
  role="button"
  tabindex="0"
  onclick="handleClick()"
  onkeydown="e.key==='Enter'||e.key===' ' ? handleClick() : null"
  aria-pressed="false"
>
  Toggle Feature
</span>
<!-- Better: use a real <button> element! -->
<!-- Only use role="button" when you cannot change the HTML element -->

role=alert

role="alert"은 콘텐츠 변경 사항을 화면 낭독기에 즉시 안내합니다:

<div role="alert" id="error-msg"></div>

<script>
// When injecting an error:
document.getElementById('error-msg').textContent = 'Invalid email address.';
// Screen readers announce this immediately without the user moving focus
// role="alert" implies aria-live="assertive" aria-atomic="true"
</script>

role=dialog

role="dialog"은 modal 대화상자 구성 요소를 나타냅니다:

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
  id="confirm-dialog"
  tabindex="-1"
>
  <h2 id="dialog-title">Confirm Deletion</h2>
  <p id="dialog-desc">This action cannot be undone.</p>
  <button>Cancel</button>
  <button>Delete</button>
</div>

dialog 요소와 role=dialog 비교

최신 HTML5에는 기본 제공되는 <dialog> 요소가 있습니다:

<dialog id="confirm" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Deletion</h2>
  <p>This cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<script>
document.getElementById('confirm').showModal();
</script>
<!-- Native dialog handles focus trap and Escape key automatically -->

랜드마크 역할 개요

ARIA 랜드마크 역할은 페이지를 탐색 가능한 영역으로 구성합니다:

<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<aside role="complementary">...</aside>
<footer role="contentinfo">...</footer>
<form role="form" aria-label="Search">...</form>
<section role="region" aria-label="Stats">...</section>
<!-- Note: prefer semantic HTML elements over ARIA roles
     Only add role= when using generic divs/spans -->

여러 탐색 랜드마크

페이지에 여러 nav 요소가 있을 때는 aria-label로 구분하세요:

<nav aria-label="Primary navigation">
  <ul>...</ul>
</nav>

<nav aria-label="Table of contents">
  <ol>...</ol>
</nav>

<nav aria-label="Footer links">
  <ul>...</ul>
</nav>
<!-- Screen reader landmark list shows: "Primary navigation, navigation"
     "Table of contents, navigation" etc. -->

role=status

role="status"는 긴급하지 않은 업데이트를 정중하게 안내합니다:

<!-- Use for: success messages, loading complete, items added -->
<div role="status" aria-live="polite" id="cart-status"></div>

<script>
// When item added to cart:
document.getElementById('cart-status').textContent = '3 items in cart';
// Screen reader announces this when it finishes reading current content
// Less urgent than role="alert"
</script>

role=region

role="region"은 이름이 지정된 랜드마크 영역을 만듭니다:

<section
  role="region"
  aria-labelledby="stats-heading"
>
  <h2 id="stats-heading">Site Statistics</h2>
  <dl>...</dl>
</section>
<!-- role="region" only creates a landmark IF it has an accessible name
     Without aria-label or aria-labelledby, it is not a landmark -->

role=search

role="search"는 검색 기능을 나타냅니다:

<form role="search" action="/search">
  <label for="q">Search</label>
  <input type="search" id="q" name="q">
  <button type="submit">Go</button>
</form>
<!-- role="search" landmark: screen readers list it as "Search, search"
     Users jump directly to the search form -->

role=presentation과 none

role="presentation"(별칭: role="none")은 요소에서 의미를 제거합니다:

<!-- Table used for layout (bad practice, but if inherited): -->
<table role="presentation">
  <tr><td>Layout column 1</td><td>Layout column 2</td></tr>
</table>
<!-- role="presentation" removes the table semantics
     Screen reader won't announce it as a table
     Children's semantics are also affected -->

빠른 확인

role=alert와 role=status의 차이는 무엇입니까?

복습: ARIA 역할

일반적인 ARIA 역할:

  • role="button" — 버튼이 아닌 요소를 버튼처럼 동작하게 함(tabindex와 JS를 추가합니다)
  • role="alert" — 즉시 적극적으로 안내함
  • role="dialog" — modal 대화상자(기본 제공 <dialog>를 우선 사용합니다)
  • role="status" — 정중하게 업데이트를 안내함
  • role="region" — 이름이 지정된 영역 랜드마크
  • role="search" — 검색 양식 랜드마크

자주 묻는 질문

“role button alert dialog 및 landmark” 강의는 무료인가요?

네 — “role button alert dialog 및 landmark” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“role button alert dialog 및 landmark”에서 뭘 배우나요?

ARIA 역할을 적용해 보조 기술에 요소의 목적 전달하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

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

“role button alert dialog 및 landmark” 강의는 얼마나 걸리나요?

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

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

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

이 강의의 모든 강의

  1. ARIA와 기본 HTML 중 무엇을 사용할까
  2. role button alert dialog 및 landmark
  3. aria-label aria-labelledby 및 aria-describedby
  4. aria-hidden 및 aria-live
← HTML Academy(으)로 돌아가기