탭 : 복잡한 ™

주니어 프론트 엔드 개발자가 JavaScript를 배우면 스위칭 클래스 이름을 마스터 링하는 것이 빠르고 효과적인 기술입니다.

 const button = document.querySelector ( ". my-button");
const element = document.querySelector ( ". content");

button.addeventListener ( "클릭", function () {
  요소 .classlist.toggle ( "Sparkles");
});

이 트릭을 사용하여 탭을 만들 수 있습니다.

간단한 구현

클래스 이름을 전환하는 기술을 마스터 한 경우 탭 인터페이스를 구축해야합니다. 클릭 이벤트를 처리하려면 코드를 추가하기 만하면 다음과 같은 간단한 탭을 구현합니다.

이 탭은 완전히 사용할 수 있습니다. 앵커 링크를 사용하여 링크와 탭 영역 사이의 점프 링크를 생성하는데, 이는 의미 적으로 합리적입니다. 탭은 키보드를 통해 액세스 할 수 있고 초점 스타일이 있으며 리턴 키를 사용하여 활성화 할 수 있습니다.

그러나 이것으로 충분합니까? 완벽한 탭?

쉽지 않습니다

문제는 키보드 처리를 위해 특별한 처리를하지 않으며 탭 인터페이스에는 키보드 처리가 필요할 수 있다는 것입니다. Heydon Pickering은 다음을 설명합니다.

같은 페이지에 대한 링크와 달리 탭은 사용자를 연관된 컨텐츠 영역/패널로 이동하지 않습니다. 컨텐츠를 시각적으로 표시합니다. 이는 매번 페이지 상단으로 돌아 오지 않고 다른 영역을 전환하려는 사용자 (스크린 리더를 사용하는 사용자 포함)에게 유리합니다.

이로 인해 불행한 부작용이 발생합니다. 사용자가 키보드를 통해 영역으로 이동하고 내부 컨텐츠와 상호 작용하려면 모든 탭을 현재 탭의 오른쪽으로 순차적으로 통과해야합니다.

탭 인터페이스에 고려해야 할 다른 많은 행동 측면이 있음이 밝혀졌습니다. Heydon의 설명에서 탭 키는 실제로 탭 자체에서 해당 탭과 관련된 내용으로 점프하여 초점을 이동하는 방법으로 사용될 수 있습니다. Shift Tab은 초점을 다시 가져옵니다. 그런 다음 화살표 키를 사용하여 탭을 변경하십시오. 이 모든 것이 더 많은 JavaScript와 일부 HTML조차도 포커스 상태를 허용해야합니다. 그리고 일부 aria-* 속성, 나는 그들이 왜 중요한지 설명 할 수있는 충분한 전문 지식이 없습니다.

최종 결과는 다음과 같습니다.

따라서 문제는 다음과 같습니다. 클래스 이름을 웹에 전환하는 기술은 이러한 측면을 고려하지 않기 때문에 웹에 유해합니까? 기본 도구를 사용하면 웹의 접근성이 손상됩니까? 나는 모른다. 이 문제는 나에게 너무 큽니다. 그러나 이것은 생각할 가치가있는 질문입니다.

근육 기억

우리가 첫 데모와 같은 탭을 쓰는 법을 처음 배우면, 아무도 우리를 비판하지 않는 한, 우리는 그것을 반복해서 사용할 것입니다. 여러 번 해냈기 때문에 약 3 분 만에 데모를 썼습니다. 이 탭을 만드는 것은 확실히 내 근육 기억의 일부입니다.

많은 사람들은 JavaScript 프레임 워크가 웹에서 스컬지라고 생각합니다. 왜냐하면 그들은 최악의 접근성의 시대를 이끌고 있기 때문입니다. 그러나 탭 구축의 근육 기억이 사전 제작 된 탭 UI를 사용하는 것이라면 모든 올바른 기능을 제공하고 스타일을 주로 남겨두면 어떻게해야합니까?

이것은 REACH UI 탭입니다 (RECT를 사용한다고 가정합니다 ...).

나는 당신에게 당신의 프로젝트를 무료 탭을 얻기 위해 반응하도록 당신의 프로젝트를 전환하도록 요구하지는 않지만 React는 이미 거대합니다. 그러한 좋은 모드가 사실상 선택이되면, 그 효과는 접근성에 대한 순이익 일 수 있습니다. 적어도 나에게는 가능합니다. 359 번째로 수동으로 탭 인터페이스를 작성하지 못하게 할 수 있습니다.

위 내용은 탭 : 복잡한 ™의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!