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">
   
   

3. Hiding Input Elements for Custom Radio Buttons
   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.

Hiding Elements from All Users

To completely hide an element from both sighted users and screen readers, you can use display: none or visibility: hidden.


.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>


          

            
        

위 내용은 CSS에서 요소 숨기기: 접근 가능한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!