<aside>에 헤딩, 스크린리더 대응 마크업 (SEO)

<aside>에는 헤딩이 꼭 필요할까?

<aside> 요소 안에 헤딩을 마크업 해야 합니다. 이를 위해 <h1>~<h6> 요소 중 적절한 헤딩을 선택해 사용할 수 있습니다. 헤딩을 마크업하면 스크린 리더 사용자가 <aside> 내용이 부가적인 콘텐츠임을 쉽게 이해할 수 있게 됩니다. 대신 <aside>의 헤딩은 css를 사용하여 브라우저에서는 보이지 않도록 하는 것이 좋습니다.

다음은 예시 페이지의 코드입니다.

<head>
  <meta charset="UTF-8">
  <title>Example Page with Aside</title>
  <style>
      /* CSS to hide the heading */
      .visually-hidden {
        position: absolute !important;
        height: 1px;
        width: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        clip: rect(0 0 0 0);
        overflow: hidden;
      }
   </style>
</head>
<body>
  <header>
    <h1>Header</h1>
  </header>
  <main>
    <h1>Main Content</h1>
    <section>
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </section>
    <section>
      <h2>Section 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </section>
    <aside>
      <h3 class="visually-hidden">Aside Content Heading</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </aside>
  </main>
  <footer>
    <h4>Footer</h4>
  </footer>
</body>

화면에는 보이지 않지만 스크린리더에서 읽을 수 있도록 하는 방법

1) 스크린리더 전용 텍스트:

HTML 요소의 aria-label, aria-labelledby 속성, 또는 visually-hidden 클래스를 사용하여 스크린리더에게만 읽히는 텍스트를 추가할 수 있습니다.

<!-- aria-label -->
<button aria-label="Close">X</button>

<!-- aria-labelledby -->
<label id="username-label">Username:</label>
<input type="text" aria-labelledby="username-label">

<!-- visually-hidden class -->
<span class="visually-hidden">This text is hidden from view but read by screen readers.</span>

2) 레이아웃 텍스트:

화면에 보이지는 않지만 페이지 레이아웃을 조정하기 위해 사용할 수 있는 텍스트입니다. 일반적으로 display: none 속성이나 visibility: hidden 속성을 사용하여 숨김 처리합니다.

<!-- display: none -->
<div style="display: none;">This text is hidden from view but used for layout purposes.</div>

<!-- visibility: hidden -->
<span style="visibility: hidden;">This text is hidden from view but used for layout purposes.</span>

3) 대체 텍스트:

이미지나 비디오 등의 미디어 요소에 대체 텍스트를 제공하여 스크린리더 사용자가 해당 콘텐츠에 대한 정보를 얻을 수 있도록 합니다. 대체 텍스트는 alt 속성이나 <img> 요소의 자식 요소로 추가할 수 있습니다.

<!-- alt attribute -->
<img src="example.jpg" alt="An example image.">

<!-- child element -->
<figure>
  <img src="example.jpg">
  <figcaption>An example image.</figcaption>
</figure>

화면에도 보이지 않고 스크린리더에도 읽히지 않으려면?

1) Skip Navigation 링크:

접근성을 개선하기 위해 주요 내용 이전에 Skip Navigation 링크를 추가하여, 스크린리더 사용자가 내용을 건너뛰고 주요 컨텐츠로 바로 이동할 수 있도록 합니다. 이 링크는 CSS를 사용하여 화면에 보이지 않도록 숨길 수 있습니다.

<a href="#main-content" class="visually-hidden focusable">Skip to main content</a>

2) aria-hidden 속성:

화면에 보이지 않는 요소 중에서 스크린리더에서도 읽히지 않도록 하고 싶은 경우, 해당 요소에 aria-hidden="true" 속성을 추가할 수 있습니다.

<div aria-hidden="true">This content will not be read by screen readers</div>

3) role="presentation" 속성:

레이아웃 등 시각적인 목적으로 사용되는 요소인 경우, 스크린리더에서 읽히지 않도록 role="presentation" 속성을 추가할 수 있습니다.

<div role="presentation">
  <img src="example.png" alt="Example Image">
  <p>This text is part of the layout and should not be read by screen readers.</p>
</div>

저작자표시 (새창열림)

iroiro