액세스 가능한 UI에 Popover API를 사용하는 방법

Popover API는 초점 트래핑, 불활성 배경, 탈출 키 해고 및 추가 자바 스크립트 또는 ARIA 마크 업없이 ARIA 역할을 자동으로 처리하여 접근 가능한 모달 같은 요소를 생성하는 복잡성을 해결합니다. 2. Popover 속성과 PopoverToggletarget을 사용하여 Auto, Modal 및 Hint의 세 가지 유형으로 가시성을 제어합니다. 여기서 Modal은 대화 상자 및 비 블로킹 팁에 대한 힌트에 이상적입니다. 3. showpopover (), hidepopover () 및 togglePopover ()와 같은 JavaScript 메소드는 고급 상호 작용을위한 프로그래밍 방식 제어를 허용합니다. 4. 접근성 혜택에는 자동 초점 관리, 키보드 지원 및 ARIA Reliance 감소가 포함되어 스크린 리더 해석이 더욱 신뢰할 수 있습니다. 5. 모범 사례에는 눈에 보이는 닫기 버튼 제공, 팝 오버 내부의 시맨틱 HTML 사용, 중첩 방지 및 키보드 및 스크린 리더로 테스트하는 것이 포함됩니다. 6. 브라우저 지원은 Chrome and Edge 114에서 제공되며 Firefox 및 Safari가 개발 중이며 기능 감지를 사용하여 이전 브라우저의 폴백 또는 폴리 필이 필요합니다. 7. API는 독창성을 보장하기 위해 우아한 폴백과 실수 테스트를 통해 간단한 모달 또는 힌트에 권장되는 간단한 모달 또는 힌트에 권장되는 디탈 오버레이에 대한 접근 가능한 오버레이를 향한 단계입니다.

Popover API는 복잡한 Aria 및 JavaScript와의 레슬링없이 대화 상자, 툴팁 또는 측면 패널과 같은 액세스 가능하고 모달 같은 요소를보다 쉽게 만들 수있는 새로운 웹 플랫폼 기능입니다. 기본적으로 보일러 플레이트를 줄이고 접근성을 향상 시키도록 설계되었습니다. 현대적이고 접근 가능한 UI를 구축하는 경우 Popover API는 이해하고 사용할 가치가 있습니다.

액세스 가능한 인터페이스를 만드는 데 효과적으로 사용하는 방법은 다음과 같습니다.

Popover API가 해결하는 것

이 API 전에 개발자는 수동으로 관리해야했습니다.

• 포커스 트래핑
• 모달 배경 ( "비활성"배경)
• 탈출 키 처리
• ARIA 역할 및 속성 ( aria-modal , role="dialog" )
• 클릭 아웃 사이드 해고

이 모든 것은 접근성에 필수적이지만 잘못되기 쉽습니다. Popover API는 이것의 대부분을 자동으로 처리합니다.

기본 구문 및 행동

API는 가시성을 제어하기위한 새로운 popover 속성과 JavaScript 방법 세트를 소개합니다.

 <div id = "my-popover"popover>
  <p> 이것은 팝 오버입니다! </p>
  <버튼> 닫기 </button>
</div>

<버튼 popovertoggletarget = "my-popover"> 토글 팝 오버 </button>

이 두 줄만으로 :

• 버튼을 클릭하면 팝 오버가 표시/숨어 있습니다.
• 배경 내용은 불활성이됩니다 (초점이 맞지 않음).
• 탈출을 누르면 팝 오버가 닫힙니다.
• 포커스는 팝 오버 안에 자동으로 갇혀 있습니다.

JavaScript 또는 Aria가 필요하지 않습니다.

팝 오버의 유형

동작을 정의하기 위해 값으로 popover 속성을 사용하십시오.

 <!-외부를 클릭하거나 탈출을 누를 때 숨어 있습니다->
<div popover = "auto"> 자동 팝 오버 </div>

<!-모달 : 블록 배경, 명시 적 닫기가 필요합니다->
<div popover = "modal"> Modal Popover </div>

<!-비 모달 : 배경은 대화식->
<div popover = "힌트"> 힌트 팝 오버 </div>

액세스 가능한 UI의 경우 modal 가장 일반적이며 (예 : 대화 상자) hint 툴팁 또는 비 블로킹 팁에 대해 작동합니다.

JavaScript로 팝 오버를 제어합니다

더 많은 제어를 위해 방법을 사용할 수도 있습니다.

 const popover = document.getElementById ( 'my-popover');

// 보여주다
popover.showpopover ();

// 숨다
popover.hidepopover ();

// 토글
popover.togglepopover ();

간단한 토글링 (예 : 호버 표시 또는 양식 검증 후) 이외의 논리가 필요할 때 유용합니다.

접근성은 상자 밖에서 이점입니다

Popover API는 접근성을 향상시킵니다.

• ✅ 자동으로 초점을 관리합니다
• ✅ 비활성 콘텐츠 비활성 만들기 ( inert 속성과 같은)
• ✅ 키보드 내비게이션 및 해고 지원
• ARIA에 대한 의존도 감소 (오류의 공간이 적음)

예를 aria-modal="true" , 스크린 리더는 popover="modal" role="dialog" 모달 대화 상자로 취급합니다.

액세스 가능한 UI를위한 모범 사례

Popover API를 최대한 활용하려면 :

• 항상 눈에 보이는 긴밀한 제어를 제공하십시오
  Escape가 작동하더라도 일부 사용자 (특히 Touch 또는 Screen Reader 사용자)는 명확한 "Close"버튼이 필요합니다.

• 팝 오버 내부에서 시맨틱 HTML을 사용하십시오
  <section> 에서 대화 상자 내용을 래프하거나 적절한 제목을 사용하십시오. 예를 들어:

   <div popover = "modal">
    <H2> 삭제 확인 </h2>
    <p>이 항목을 삭제하고 싶습니까? </p>
    <버튼> 삭제 </버튼>
    <버튼 popovertoggletarget = "my-popover"> 취소 </button>
  </div>

• 팝 오버를 피하십시오
  사양은 그것을 금지하지는 않지만 초점과 사용자 기대를 혼란스럽게 할 수 있습니다.

• 키보드 및 스크린 리더로 테스트하십시오
  API를 사용하더라도 실제 사용자 흐름을 테스트하십시오. 포커스가 팝 오버로 들어가고 닫은 후 올바르게 반환해야합니다.

브라우저 지원 및 폴백

2024 년 현재 Popover API는 Chrome and Edge (버전 114)에서 지원되며 Firefox 및 Safari가 작동합니다.

지원되지 않는 브라우저의 경우 폴백이 필요합니다. 진보적 인 향상을 고려하십시오.

 if (!
  // ARIA 및 Manual Focus Management와의 폴백을 구현합니다
  setupfallbackDialog ();
}

또는 Open UI Popover Polyfill과 같은 가벼운 폴리 필드를 사용하십시오.

Popover API는 제어를 희생하지 않고 접근 가능한 오버레이 생성을 단순화합니다. 아직 모든 사용자 정의 대화 상자에 대한 완전한 대체물은 아니지만 많은 사용 사례, 특히 간단한 모달 또는 힌트의 경우 견고하고 접근성 우선 솔루션입니다.

기본적으로 : 가능한 경우 popover 사용하고 실제 사용자와 테스트하고 우아하게 뒤로 물러납니다. 기본적으로보다 액세스 할 수있는 웹 UI를 향한 단계입니다.

위 내용은 액세스 가능한 UI에 Popover API를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!