[Safari] 웹접근성 향상을 위한 Tab 키 하이라이트 표시 설정 방법

웹접근성을 높이기 위해 키보드 탐색을 사용하는 사용자들을 위한 중요한 기능 중 하나는 Tab 키를 통한 요소 간의 이동입니다.

이를 시각적으로 확인하기 위한 하이라이트 표시 설정에 대해 알아보겠습니다.

Safari 브라우저 설정 확인하기

대부분의 웹 브라우저는 기본적으로 Tab 키를 사용하여 요소에 포커스를 이동할 수 있게 지원하며, 이때 기본적인 시각적 표시를 제공합니다. 그러나 이 기능이 제대로 동작하지 않을 경우, 브라우저 기본 설정(단축키 cmd + , )을 확인해 보세요.

고급 탭을 클릭하여 Tab을 눌러 웹 페이지에 있는 각 항목을 하이라이트를 체크해 줍니다.

 

고급 > Tab을 눌러 웹 페이지에 있는 각 항목을 하이라이트 체크하기

 

 

 

설정을 적용한 후에는 실제로 브라우저에서 테스트를 진행해 봅시다.

Tab 키를 사용하여 요소 간에 포커스를 이동하면서 설정한 하이라이트가 제대로 나타나는지 확인하세요.

Tab키로 하이라이트가 표시된 채로 탐색이 가능해짐

 

 

웹 브라우저들은 기본적으로 링크나 폼 요소 등에 대한 키보드 포커스를 시각적으로 나타내기 위한 기본 스타일을 제공합니다.

이는 사용자가 키보드 탐색 시, 현재 위치를 파악할 수 있도록 시각적 도움을 줍니다.

 

하지만 이러한 기본 스타일은 브라우저마다 조금씩 차이가 있습니다.

 

웹 개발자가 직접 하이라이트 스타일을 설정하고자 할 때는 추가적인 CSS를 사용하여 기본 스타일 대신, 원하는 디자인으로 변경할 수 있습니다. CSS를 활용한 하이라이트 스타일링은 다음 포스팅에서 이어서 진행하도록 하겠습니다.

 

이렇게 웹접근성 향상을 위한 Tab 키 하이라이트 표시 설정 방법에 대해서 알아보았습니다.

 

 

 

작업 생산성을 높여주는 확장 프로그램 : Prettier(프리티어) 설정법

 

 

[CSS] Animation 속성 정리, 참고 사이트 추천

 

[git] github pages로 나만의 포트폴리오 웹페이지 배포해보기

 

스크립트 선언 위치

 

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

 

[HTML] video vs iframe, 어떤 것이 더 적합할까?