두 가지 HTML 요소 세트가 알려져 있습니다.
<input disabled />,
<button tabindex="0">,
<button (click)="foo($event)"></button>
<div tabindex="0"></div>,
<p (click)="foo($event)"></p>
<li role="checkbox" (keyup)="bar($event)"></li>
올바른 요소의 첫 번째 세트:
-
<input disabled />: 양식 요소이고disabled속성이 설정되어 있으므로 올바른 요소입니다.disabled속성은 사용자 클릭 이벤트에 응답하지 않도록 입력 상자를 비활성화합니다. 따라서 비활성화된 상태에서는 사용자가 상호 작용할 수 없다는 것이 합리적입니다. -
<button tabindex="0">: 버튼 요소이고tabindex속성이 0으로 설정되어 있으므로 올바른 요소입니다.tabindex이 속성은 키보드를 통해 탐색할 때 요소의 순서를 정의합니다. 값이 0이면 키보드 탐색을 통해 요소에 초점을 맞추고 선택할 수 있음을 의미합니다. 사용자는 키보드의 Tab 키를 사용하여 이 버튼으로 포커스를 이동한 다음 Enter 또는 스페이스바를 눌러 클릭 이벤트를 트리거할 수 있습니다. -
<button (click)="foo($event)"></button>: 버튼 요소이고 클릭 이벤트 핸들러가 설정되어 있으므로 이 요소도 올바른 요소입니다(click)="foo($event)". 이는 사용자가 이 버튼을 클릭하면foo이름이 지정된 JavaScript 함수가 호출되어 이벤트 개체를 매개변수로 전달한다는 의미입니다. 이를 통해 개발자는 사용자가 버튼을 클릭할 때 사용자 정의 JavaScript 작업을 수행할 수 있습니다.
이제 두 번째 잘못된 요소 집합을 살펴보겠습니다.
-
<div tabindex="0"></div><div>: 일반적으로 사용자 상호작용보다는 레이아웃 및 콘텐츠 분리에 사용되는 요소 이므로 잘못된 요소입니다 . 속성을 0으로 설정하여 포커스 가능하게 만들더라도 요소에 클릭 이벤트에 대한 기본 동작이tabindex없기 때문에 사용자가 클릭할 때 기본 동작이나 이벤트가 트리거되지 않습니다 .<div>사용자는 이 요소가 특정 작업을 수행할 것으로 기대하지만 실제로는 어떤 방식으로도 응답하지 않기 때문에 혼란을 야기할 수 있습니다. -
<p (click)="foo($event)"></p><p>: 요소가 단락 텍스트용이고 사용자 상호 작용에 사용되어서는 안 되기 때문에 이 요소도 잘못된 요소입니다 . 클릭 이벤트 핸들러를 설정하더라도 이는 요소의 올바른 사용법이(click)="foo($event)"아닙니다 .<p>사용자는 일반적으로 단락 텍스트를 클릭할 때 사용자 정의 작업이 실행될 것이라고 기대하지 않으며 이로 인해 일관되지 않은 사용자 경험이 발생할 수 있습니다. -
<li role="checkbox" (keyup)="bar($event)"></li>: 이 요소 역시 잘못된 요소입니다.role속성이 "checkbox"로 설정되어 있지만 이는 체크박스의 역할을 가지고 있음을 나타내지만 표준 HTML 체크박스 요소(예: )가 아니기 때문입니다<input type="checkbox">. 동시에 키보드 이벤트 핸들러를 설정하는데(keyup)="bar($event)", 이는 사용자가 일반적으로 체크박스와 상호 작용할 것으로 기대하는 방식이 키보드 이벤트가 아닌 마우스 클릭을 통해서이기 때문에 부적절합니다. 이러한 일관되지 않은 동작은 사용자를 혼란스럽게 할 수 있습니다.
일반적으로 첫 번째 요소 집합은 HTML 의미 및 사용자가 기대하는 동작과 일치하기 때문에 올바른 반면, 두 번째 요소 집합은 HTML 요소 및 사용자 상호 작용의 의미를 따르지 않기 때문에 잘못된 것으로 예상됩니다. 일관되고 예측 가능한 동작으로 사용자 인터페이스를 구축하려면 HTML 요소와 속성을 올바르게 사용하는 것이 중요합니다.