CSS에서 요소 숨기기: 접근 가능한 방법

UI에서 요소를 숨기는 것은 흔한 일이지만, 접근 가능한 방식으로 그렇게 하면 의도치 않게 일부 사용자를 제외하는 일이 발생하지 않습니다. 이 기사에서는 세 가지 시나리오를 다룹니다.

1. 스크린 리더에서 요소를 숨깁니다.
2. 스크린 리더에만 요소를 표시합니다.
3. 스크린 리더를 포함한 모든 사용자에게 요소를 숨깁니다.

각 섹션에는 코드 예제와 실제 사용 사례가 포함되어 있습니다

---

스크린 리더에서 요소 숨기기

눈이 있는 사용자에게는 요소가 표시되지만 스크린 리더에서는 요소가 숨겨지도록 하려면 aria-hidden="true" 속성이나 CSS를 사용할 수 있습니다.

<div aria-hidden="true">This content is hidden from screen readers.</div>

사용 사례

1. 배경 이미지 숨기기
2. 의미 있는 정보를 전달하지 않는 장식적인 아이콘이나 시각적 요소.

<button>
  <span aria-hidden="true">+</span>
  Add Item
</button>

스크린 리더에만 요소 표시

화면 판독기에는 요소가 표시되지만 시력이 있는 사용자에게는 표시되지 않게 하려면 '시각적으로 숨김' 기술을 사용할 수 있습니다. Tailwind CSS는 이러한 목적으로 사전 빌드된 sr 전용 유틸리티 클래스를 제공합니다.

<div>



<p>Writing the sr-only class in CSS would look like this<br>
</p>

<pre class="brush:php;toolbar:false">.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

사용 사례

1. 텍스트를 시각적으로 표시하지 않고 입력과 같은 대화형 요소에 레이블을 지정하는 경우:
   

   <label for="username" class="sr-only">Username</label>
   <input type="text">
   
   

2. Providing additional information for screen reader users using aria-describedby
   

   <div class="sr-only">
   
   
   <li><p><strong>Hiding Input Elements for Custom Radio Buttons</strong><br>
   When creating custom radio buttons (or checkboxes), you often hide the native input element and replace it with a visually styled element. To do this accessibly, the hidden input must remain visible to screen readers.</p></li>
   
   
   <h2>
     
     
     Hiding Elements from All Users
   </h2>
   
   <p>To completely hide an element from both sighted users and screen readers, you can use display: none or visibility: hidden.<br>
   </p>
   
   <pre class="brush:php;toolbar:false">.hidden {
     display: none;
     /* or visibility: hidden; */
   }
   

   수업 적용:
   

   <div>
   
   
   
   <h2>
     
     
     TL;DR
   </h2>
   
   <p>다음은 다양한 CSS 속성이 다양한 유형의 사용자 가시성에 어떤 영향을 미치는지 요약한 표입니다.</p>
   <div><table>
   <thead>
   <tr>
   <th><strong>CSS Attribute</strong></th>
   <th><strong>Hides for All Users</strong></th>
   <th><strong>Hides for Sighted Users</strong></th>
   <th><strong>Hides for Screen Readers</strong></th>
   <th><strong>Notes</strong></th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>display: none</td>
   <td>✅</td>
   <td>✅</td>
   <td>✅</td>
   <td>Completely removes the element from the visual and accessibility tree.</td>
   </tr>
   <tr>
   <td>visibility: hidden</td>
   <td>✅</td>
   <td>✅</td>
   <td>✅</td>
   <td>Hides the element visually but keeps it in the layout and accessibility tree.</td>
   </tr>
   <tr>
   <td>opacity: 0</td>
   <td>❌</td>
   <td>✅</td>
   <td>❌</td>
   <td>Makes the element fully transparent but still visible to screen readers and interactive.</td>
   </tr>
   <tr>
   <td>clip: rect(0, 0, 0, 0)</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Commonly used in the "visually hidden" technique; removes visual rendering but accessible.</td>
   </tr>
   <tr>
   <td>position: absolute; width: 1px; height: 1px;</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Used with the "visually hidden" technique; keeps elements accessible to screen readers.</td>
   </tr>
   <tr>
   <td>aria-hidden="true"</td>
   <td>❌</td>
   <td>❌</td>
   <td>✅</td>
   <td>Removes the element from the accessibility tree but leaves it visually present.</td>
   </tr>
   <tr>
   <td>overflow: hidden</td>
   <td>❌</td>
   <td>✅ (if out of bounds)</td>
   <td>❌</td>
   <td>Hides content visually if it overflows the container but does not affect screen readers.</td>
   </tr>
   <tr>
   <td>height: 0; width: 0;</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Hides content visually while keeping it accessible to screen readers.</td>
   </tr>
   <tr>
   <td>z-index: -1</td>
   <td>❌</td>
   <td>✅</td>
   <td>❌</td>
   <td>Moves the element behind others, making it invisible to sighted users but screen reader-accessible.</td>
   </tr>
   <tr>
   <td>opacity: 0; pointer-events: none;</td>
   <td>✅</td>
   <td>✅</td>
   <td>❌</td>
   <td>Makes an element fully transparent and non-interactive, but accessible to screen readers.</td>
   </tr>
   </tbody>
   </table></div>
   
   
             </div>