버튼 태그가 궁금한 경우

CSS 및 JavaScript 의 세계에서 개발자는 모든 HTML 태그를 만들 수 있습니다. 우리 개발자들은 이것에 대해 많은 자부심을 가지고 있지만 접근성에 대해서는 잊고 있습니다.

이 블로그에서는 버튼의 올바른 구현을 살펴보겠습니다.

문제

위의 이미지에서 어떤 버튼이 실제로 html 태그button를 사용하고 있는지 확인할 수 있습니까?

최종 사용자의 경우 모든 것이 button처럼 보이므로 아무런 차이가 없지만 단점은 접근성이 작동하지 않는다는 것입니다. 위의 코드를 입력해 봅시다.

<section>
        <button class="submitButton">Click Here</button>
        <p class="submitButton">Click Here</p>
        <a class="submitButton" href="#">Click Here</a>
        <span class="submitButton">Click Here</span>
        <div class="submitButton">Click Here</div>
</section>

CSS 및 JavaScript의 힘을 볼 수 있습니다. span , a , div 를 button 처럼 보이게 만들 수 있습니다. 접근성을 수정할 수 있습니까? 그래 우리는 할 수있어.

버튼 사용 사례

자, 이것을 만드는 데 어느 것이 사용됩니까?
<a href="#" onClick="">Add to Cart</a><button onClick="">Add to Cart</button>
이제 button 세계로 들어가 봅시다. 리디렉션이 아닌 작업이 있을 때마다 버튼을 사용하십시오. 예: 양식 제출, 장바구니에 항목 추가, 팝오버 취소 등
button 대 a를 이해하려면 위의 사용 사례만 이해하면 됩니다.

버튼과 자율성

링크
설명


꼬리표
<button>click here</button> 또는 <input type="button" />
역할<button>Click here</button> 또는 <input type="button" />를 사용하지 않는 경우 role='button'를 사용하십시오. 예: <div role="button"></div>
유형
유형 속성submit 및 버튼 포함reset에 대한 두 가지 값이 있습니다. 기본적으로 type는 submit뿐입니다. type에 button를 넣지 않으면 기본 유형은 submit가 됩니다.

이벤트button 클릭 이벤트로 누르기, 호버 이벤트가 기본입니다. 다른 태그를 사용하여 버튼처럼 작동하는 경우 aria-pressed 및 aria-* 관련 속성을 사용하십시오.

스크린 리더
태그가 버튼이면 보조 기술에 대한 역할을 명시적으로 부여할 필요가 없습니다. 그렇지 않으면 역할을 사용하여 스크린 리더에서 액세스할 수 있도록 합니다.

건반
기본적으로 버튼은 포커스 가능한 요소입니다. 따라서 기본 흐름을 재정의하지 않는 한 키보드 포커스를 줄 필요가 없습니다.


버튼에 이미지 요소가 포함된 경우 해당 alt 속성을 설정해야 합니다. 아이콘이 포함된 경우 대신 aria-label을 사용하여 아이콘을 설명합니다.

접근성 수정

button 의 사용 사례를 항상 기억하십시오. 버튼은 기본적으로 접근성을 지원합니다. 예: 키보드 포커스, 스크린 리더 등에 대해 걱정할 필요가 없습니다.


div , span 또는 기타와 같은 다른 태그를 사용해야 하는 상황이 있는 경우 접근성을 지원하고 추가 코드를 작성하여 버튼처럼 작동하고 접근성을 지원합니다.

따라서 버튼으로 작동하는 div는 코드의 모양입니다.

<div role="button" tabindex="1" id="btn" class="submitButton">Click Here</div> 

버튼 및 이미지

이미지를 버튼으로 사용하는 경우 alt 태그를 제공하세요. 그렇지 않으면 스크린 리더가 버튼이 무엇인지 이해할 수 없습니다. (스크린 리더는 볼 수 없음을 기억하십시오).

<button><img src="date.png" alt="click here"/></button>

텍스트 태그가 있는 버튼

텍스트 태그를 button 태그로 래핑하는 경우 화면 판독기가 텍스트 요소를 선택하지 않습니다. 그들은 그것을 button로만 간주할 것입니다.

<button><h1>Click here</h1></button>

추신: 여기서는 의미 없는 태그를 사용하도록 권장하지 않습니다. 여기에서는 접근성을 위해 코드를 수정하도록 권장합니다. 항상 시맨틱 코드를 ​​먼저 사용하십시오. 그럴 수 없다면 수정 사항을 적용하여 액세스할 수 있도록 합니다.

요약:

시맨틱 태그 버튼을 항상 사용하십시오.

동작이 발생하는 곳에 버튼을 사용하고 리디렉션이 발생하는 곳에 태그를 사용하십시오.

role를 사용하여 의미 없는 태그가 보조 기술용 버튼처럼 작동하도록 합니다.

이벤트, 키보드 지원(포커스), aria-* 등을 사용하여 보조 도구에 대해 비의미적 태그에 액세스할 수 있도록 합니다.