오늘 갑자기 아주 이상한 문제를 발견했습니다. CSS, XHTML, Web 2.0 및 웹 표준에 초점을 맞춘 일부 웹사이트에서는 개요:없음 또는 개요와 같이 마우스를 클릭할 때 하이퍼링크 주변의 점선 상자(윤곽선)를 제거하는 방법을 논의하고 있습니다. 0 . 때때로 점선 프레임(윤곽선)의 기본 모양이 모양에 영향을 미칠 수 있지만 그 존재 이유는 분명 웹 사이트의 유용성을 향상시키고 특히 키보드 탐색을 사용하는 사람들에게 큰 편의를 제공하기 위한 것입니다. 의미론과 사용 편의성에 대해 논의하는 동안 우리는 항상 이에 반대되는 작업을 수행합니다.
1. 점선 상자(윤곽선)는 키보드 탐색에 편의성을 제공합니다.
나는 기사를 읽을 때 습관이 있다. 마우스를 거의 사용하지 않고 기본적으로 키보드에 의존한다. 가장 많이 사용되는 키는 Tab 키, PageUp, PageDown, Enter 및 네 개의 방향 키입니다. Tab 키는 하이퍼링크를 탐색하는 데 사용됩니다. 링크를 선택한 후 Enter를 직접 눌러 입력할 수 있습니다. 이제 Tab 키를 사용하여 이 페이지에서 효과를 확인할 수 있습니다. Tab 키가 링크에 초점을 맞추면 링크 주위에 점선 프레임(윤곽선)이 나타나 링크에 초점이 맞춰져 있고 확인 후 액세스할 수 있음을 나타냅니다. 물론 많은 사람들은 마우스를 사용하면 이렇게 편리한데 왜 키보드를 사용하느냐고 말할 수도 있습니다. 여기서 나는 몇 가지 이유를 제시하고 싶습니다.
진정한 컴퓨터 마스터가 되기 위한 기준 중 하나는 마우스를 사용하지 않고 모든 작업을 완료할 수 있는지 여부라고 합니다. 때로는 기사를 읽을 때 오른손에 커피를 들고 왼손으로 키보드를 치는 것이 독서에 영향을 미치지 않을 때가 있습니다.
특정 그룹의 특별한 요구사항 귀하의 웹사이트는 귀하만을 위한 것이 아닙니다.
링크에 집중하기 위해 Tab 키를 사용할 때의 새로운 스타일(브라우저마다 다를 수 있지만 모든 브라우저에 이 기능이 있으므로 그 필요성을 보여줍니다)
2. 더 나쁜 사용자 경험
외곽선:없음 또는 외곽선:0을 사용하여 외부 점선 프레임을 제거합니다. 링크에서 변경 사항을 볼 수는 없지만 상태 표시줄에서는 최소한 링크 정보를 볼 수 있습니다. 그러나 더 나쁜 사용자 경험은 JavsScript의 onfocus 이벤트를 사용하는 것입니다. 사용자가 링크에 초점을 맞추면 즉시 초점이 취소됩니다. 즉, 이 하이퍼링크에 초점을 맞출 수 없다는 의미이므로 마우스를 사용하지 않으면 절대 그럴 수 있습니다. 이 페이지의 링크를 방문하세요. 일부 전문가는 JQuery를 사용하여 윤곽선을 제거하는 방법을 개발했습니다. Google에서 "링크에서 점선을 제거"하면 수만 개의 결과가 나올 것입니다. 많은 사람들이 필요로 하고 연구하고 있는 것 같습니다. 그러나 그는 웹의 사용 용이성 원칙을 위반했으며 사용자 경험을 전혀 고려하지 않았습니다.
3. 대체 옵션
점선 프레임의 모양이 모양에 영향을 미칠 것이라고 정말로 생각한다면 분명히 더 나은 선택을 할 수 있습니다. 그것은 CSS에서 :focus 의사 클래스를 사용하는 것입니다. 예를 들어
a:초점 { 배경색:#f00 }
/*또는*/
a:hover, a:focus {text-꾸밈:underline;}
포커스가 실행되면 링크 배경이 빨간색 등으로 표시됩니다. 물론 필요에 따라 더 복잡한 스타일을 디자인할 수도 있고 동일한 스타일에 포커스와 마우스 오버를 설정할 수도 있습니다. 하지만 한 가지가 있습니다. 초점 트리거 메커니즘을 차단할 수는 없습니다.
따라서 적어도 초점 트리거를 차단하지 않으려면 하이퍼링크 주위의 점선 상자를 제거하지 마십시오.