React에서 웹 접근성을 높이는 시멘틱 태그 사용법 총정리

React에서 웹 접근성을 높이는 시멘틱 태그 사용법 총정리

---

왜 시멘틱 태그가 중요한가?

• 많은 사용자가 우리 앱을 편리하게 사용할 수 있게 해주는 필수 요소
• 스크린 리더 사용자와 SEO에도 도움을 주니, React 개발자라면 꼭 알아둬야 할 주제

---

시멘틱 태그 기본 개념

• <main>: 페이지의 주요 콘텐츠 (한 페이지에 하나).
• <header>: 머리글 (로고, 내비 등).
• <nav>: 내비게이션 메뉴.
• <section>: 주제별 콘텐츠 블록.
• <article>: 독립적인 콘텐츠 (포스트, 기사 등).
• <footer>: 바닥글.

---

React에서 시멘틱 태그 적용하기

큰 구조

function App() {
  return (
    <>
      <header><h1>블로그</h1><nav>...</nav></header>
      <main>
        <section>
          <h2>최신 포스트</h2>
          <article><h3>제목 1</h3><p>내용...</p></article>
          <article><h3>제목 2</h3><p>내용...</p></article>
        </section>
      </main>
      <footer><p>© 2025</p></footer>
    </>
  );
}

컴포넌트 단위 1

function Post({ title, content }) {
  return (
    <article>
      <h3>{title}</h3>
      <p>{content}</p>
    </article>
  );
}

컴포넌트 예시 1 - 블로그 포스트 목록

function BlogSection({ posts }) {
  return (
    <section>
      <h2>최신 블로그</h2>
      {posts.map(post => (
        <article key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.summary}</p>
        </article>
      ))}
    </section>
  );
}

 

상품카드

function ProductCard({ product }) {
  return (
    <article>
      <h3>{product.name}</h3>
      <p>{product.price}원</p>
      <button>구매하기</button>
    </article>
  );
}

function ProductList({ products }) {
  return (
    <section>
      <h2>추천 상품</h2>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </section>
  );
}

---

궁금증

<main>은 무조건 하나? -> 한 페이지에 하나만 써야 함. React SPA라면 라우트별로 관리.

<section>과 <article> 관계는? ->  <section>은 주제 블록이고, 그 안에 여러 <article>이 독립 콘텐츠로 들어갈 수 있음.

<section> 안에 <article> 여러 개 가능? -> 가능. <section>은 주제 블록, <article>은 그 안의 독립 콘텐츠.

 

<section> 여러 개 가능? -> 가능. 주제별로 구분할 때 사용.

---

제목 태그: <section>이나 <article>에는 <h1>~<h6>를 포함해 구조를 명확히.

ARIA: 동적 UI(모달, 토글 등)에 role과 aria-* 속성 추가.

 

<div role="dialog" aria-labelledby="modal-title">
  <h2 id="modal-title">모달</h2>
</div>

<main>
       <section>
         <h2>주요 섹션 1</h2>
         <article>
           <h3>콘텐츠 1</h3>
           <p>내용...</p>
         </article>
         <article>
           <h3>콘텐츠 2</h3>
           <p>내용...</p>
         </article>
       </section>
       <section>
         <h2>주요 섹션 2</h2>
         <p>다른 주제의 내용...</p>
       </section>
</main>

---

키보드 내비게이션

<a>나 <button> 태그를 사용해서 클릭 가능한 요소를 만들면 기본적으로 포커스 가능해져서 키보드 내비게이션이 지원

커스텀 컴포넌트에 이벤트 핸들러를 붙일 때는 tabIndex를 추가

<div tabIndex={0} onKeyDown={handleKeyDown} onClick={handleClick}>
  커스텀 버튼
</div>