HTML 대화 상자 요소: 접근성 및 사용 용이성 향상

HTML 대화 상자 요소: 접근성 및 사용 용이성 향상

대화 상자는 웹이든 기본 애플리케이션이든 애플리케이션에 추가되는 공통 구성 요소입니다. 전통적으로 웹에서 이를 구현하는 표준 방법이 없었기 때문에 다양한 웹 애플리케이션에서 일관되게 작동하지 않는 임시 구현이 많이 발생했습니다. 일반적으로 기대되는 기능은 구현의 복잡성으로 인해 대화 상자에서 누락되는 경우가 많습니다.

그러나 이제 웹 브라우저는 표준 대화 상자 요소를 제공합니다.

대화 상자 요소를 사용하는 이유는 무엇입니까?

네이티브 대화 상자 요소는 대화 상자, 모달 및 기타 비모달 대화 상자의 구현을 간소화합니다. 이는 이미 브라우저에 구운 대화 상자에 필요한 많은 기능을 구현함으로써 이를 수행합니다.

이는 상호 작용에 관한 사용자 기대가 충족되는지 확인하여 애플리케이션에 액세스할 수 있도록 할 때 개발자의 부담을 줄이고 잠재적으로 일반적인 대화 상자 구현을 단순화할 수 있으므로 도움이 됩니다.

기본 사용법

새

를 사용하여 대화상자 추가 단 몇 줄의 코드만으로 태그를 구현할 수 있습니다.

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

그런 다음 닫으려면 대부분의 다른 모달 작동과 마찬가지로 대화 상자에서 .close() 메서드를 호출하거나 Esc 키를 눌러 닫으면 됩니다. 또한 페이지의 나머지 부분을 어둡게 하고 상호 작용을 방해하는 배경이 어떻게 나타나는지 확인하세요. 깔끔해요!

접근성 및 포커스 관리

모든 사용자가 웹 애플리케이션에 액세스할 수 있도록 하려면 포커스를 올바르게 처리하는 것이 중요합니다. 일반적으로 활성 대화 상자를 표시할 때 현재 포커스를 활성 대화 상자로 이동해야 하지만 대화 상자 요소는 자동으로 완료됩니다.

기본적으로 초점은 대화상자에서 초점을 맞출 수 있는 첫 번째 요소에 설정됩니다. 해당 속성이 닫기 <버튼> 요소.

.showModal() 메서드를 사용하여 대화 상자를 열면 대화 상자 ARIA 역할이 대화 상자 요소에 암시적으로 추가됩니다. 이는 스크린 리더가 모달이 나타났음을 이해하고 그에 따라 화면이 작동할 수 있도록 도와줍니다.

대화 상자에 양식 추가

대화 상자에 양식을 추가할 수도 있으며 양식에 대한 특별한 메서드 값도 있습니다. <양식> 메서드가 대화 상자로 설정된 요소를 사용하면 양식은 표준 가져오기 및 게시 양식 메서드와 다른 몇 가지 다른 동작을 갖게 됩니다.

우선, 이 새로운 방법에서는 외부 HTTP 요청이 이루어지지 않습니다. 대신 양식이 제출되면 양식 요소의 returnValue 속성이 양식의 제출 버튼 값으로 설정됩니다.

이러한 예시 형식은 다음과 같습니다.

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

원하는 응답이 서버에서 돌아오면 대화 상자에서 .close() 메소드를 사용하여 수동으로 닫을 수 있습니다.

배경 강화

대화상자 뒤의 배경은 기본적으로 대부분 반투명한 회색 배경입니다. 그러나 해당 배경은 ::backdrop 의사 요소를 사용하여 완전히 사용자 정의할 수 있습니다. 이를 사용하면 그라디언트, 이미지 등을 포함하여 원하는 값으로 배경색을 설정할 수 있습니다.

또한 일반적으로 구현되는 기능인 배경화면을 클릭하면 모달이 닫히도록 할 수도 있습니다. 기본적으로 <대화상자> 요소는 우리를 위해 이 작업을 수행하지 않습니다. 이 작업을 수행하기 위해 대화 상자에 몇 가지 변경 사항을 적용할 수 있습니다.

먼저 사용자가 대화 상자에서 클릭하면 이를 알 수 있도록 이벤트 리스너가 필요합니다.

<form>



<p>The form element with the example-form id will have its returnValue set to Submit.</p>

<p>In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted.</p>

<p>You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog.</p>

<p>In this case, you can call event.preventDefault() in the submit event listener like so:<br>
</p>

<pre class="brush:php;toolbar:false">exampleForm.addEventListener('submit', (event) => {
  event.preventDefault();
});

이 이벤트 리스너만 보면 이상해 보이네요. 배경화면이 아닌 대화상자를 클릭할 때마다 대화상자가 닫히는 것처럼 보입니다. 그것은 우리가 하고 싶은 것과 정반대입니다. 불행하게도 클릭 이벤트는 대화 상자 자체의 일부로 간주되므로 배경에서 이를 수신할 수 없습니다. 이 이벤트 리스너를 추가하면 페이지의 아무 곳이나 클릭하면 대화 상자가 닫히게 됩니다.
이를 수정하려면 대화 상자를 효과적으로 마스크하고 대신 클릭을 수신하는 다른 요소로 대화 상자 콘텐츠의 내용을 래핑해야 합니다. 간단한

요소로 가능합니다!

dialog.addEventListener('click', (event) => {
  if (event.target === dialog) {
    dialog.close();
  }
});

래핑 div를 인라인 블록 요소로 만들어 여백을 포함할 수 있으며, 패딩을 상위 대화 상자에서 래퍼로 이동하면 대화 상자의 패딩된 부분에서 발생한 클릭이 이제 대신 래퍼 요소와 상호 작용합니다. 기각되지 않도록 보장합니다.

결론

대화 상자 요소를 사용하면 합리적인 기본 동작으로 구현을 단순화하고, 자동 ARIA 역할 할당을 사용하여 화면 판독기와 같은 보조 기술이 필요한 사용자의 접근성을 향상하고, 양식 요소에 대한 맞춤형 지원을 제공하고, 유연성을 제공함으로써 대화 상자 및 모달 생성에 상당한 이점을 제공합니다. 스타일링 옵션.

위 내용은 HTML 대화 상자 요소: 접근성 및 사용 용이성 향상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!