툴팁 모범 사례

이 안내서는 접근성 전문가의 선도적 인 툴팁에 대한 모범 사례를 요약합니다. 툴팁 이해 툴팁은 UI 요소에 대한 간단한 텍스트 힌트를 제공하며 호버 또는 초점에 나타납니다. 간결한 정의 : UI 컨트롤에 대한 보충적이고 설명적인 텍스트를 제공하는 비 모달 오버레이. 결정적으로 액세스 가능한 툴팁에는

만 설명 텍스트 만 포함되며 대화식 요소가 없습니다. 상호 작용이 필요한 경우 대화 상자를 대신 사용하십시오 2 개의 도구 팁 유형

툴팁은 두 가지 주요 목적을 제공합니다

아이콘 레이블링 :

간단한 레이블 (하나 또는 두 단어)의 경우

속성을 ​​사용하십시오. 추가 컨텍스트 (예 : 알림 카운트)의 경우 공간 분리 된 ID 목록을 제공합니다.

문맥 설명 :

더 긴 설명의 경우 를 사용하십시오. 아이콘 자체에는 액세스 가능한 이름이 필요하며 요소 내에 숨겨진 텍스트로 이상적으로 포함됩니다.

Essential do와 Do n'ts do :

1. 적절하게 또는 를 사용하십시오 aria-labelledby 현재 화면 리더 지원이 제한되어 있어도

   를 사용하십시오. 미래의 지원이 향상 될 수 있습니다. 마우스 오버/포커스에서 열고 마우스 아웃/블러에 닫습니다 컨텐츠를 호버링 할 때 툴팁 해고를 방지하십시오 Escape Key (WCAG 1.4.13)를 통해 키보드 폐쇄를 활성화합니다

   <button aria-labelledby="notification-count notification-label">
       <span id="notification-count">3</span>
       <span id="notification-label">Notifications</span>
   </button>
   <div role="tooltip" id="tooltip-label">Notifications</div>

   do n't :

2. 속성을 ​​사용하십시오 (접근성 문제가 중대한 문제가 있습니다) (도구 팁은 interactive) 툴팁 내에 필수 컨텐츠를 배치하십시오. 스크린 리더는 관련 ARIA 속성을 무시할 수 있습니다 aria-describedby 제한 및 대안 툴팁은 본질적으로 호버와 초점이 부족하여 장치를 터치 할 수 없습니다. 최상의 솔루션은 종종 레이블 또는 설명을 디자인에 직접 통합하는 것입니다. 광범위한 컨텐츠 (대화식 요소 포함)의 경우 토글 팁 또는

   요소를 고려하십시오. "I"아이콘으로 종종 표시되는 토글 팁은 를 사용하여 살아있는 영역 내에서 정보를 공개합니다.

   <button aria-describedby="tooltip-description">
       <span style="display:none;">Notifications</span>
       <span aria-hidden="true">?</span>
   </button>
   <div role="tooltip" id="tooltip-description">View and manage notification settings</div>

   토글 팁에 대한 자세한 내용은 아래의 리소스를 참조하십시오
추가 읽기

팝 오버와 대화 (Zell Liew) 사이의 관계를 명확하게 설명합니다 툴팁 및 토글 팁 (포함 구성 요소) WCAG 2.1 (Sarah Higley) 시대의 툴팁

Aria-Label, Aria-Labelledby 및 Aria-Describedby (Léonie Watson)에 대한 짧은 참고 일부 HTML 대화 상자 요소 (Chris Coyier)가있는 일부 실습

위 내용은 툴팁 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!