Outline:none의 사용

outline 속성은 요소(Element) 주위의 경계선을 설정하기 위해 사용됩니다. border 속성과는 달리 outline 속성은 요소의 크기나 레이아웃에 영향을 미치지 않습니다. 이러한 점 때문에 일반적으로 브라우저에서 outline을 활성화 상태를 나타내는데 사용합니다. IE와 Firefox는 포커스가 해당 요소로 이동하면 1px의 점선으로 된 외곽선(Outline)이 나타나게 됩니다.

외곽선이 접근성 측면에서 중요한 것은 이것이 페이지 상에 포커스 된 위치에 시각적 설명을 해주기 때문입니다. 키보드만을 사용할 수 있는 사용자의 경우, 이러한 시각적 설명없이 웹 페이지를 살펴보는 것은 불가능합니다. 그렇지만 일부는 이러한 외곽선을 보기가 좋지 않다는 이유로 다음과 같이 제거하기도 합니다.

a {
    outline: none;
}

a {
    outline: 0;
}

위의 두 가지 경우 모두 요소에서 외곽선을 제거하게 되기 때문에 해당 요소에 포커스가 이동하더라도 나타나지 않게 됩니다. 이것은 접근성 측면에서 매우 나쁜 사례가 됩니다.

물론 때로는 사용자에게 기본적인 점선형태가 아닌 특별한 포커스 효과를 주고자 할 때가 있을 것 입니다. 그런 경우에는 outline을 제거하고 다른 방법을 취할 수 있을 것입니다. 가장 적절한 방법은 다음과 같이 :focus를 이용해서 표현을 해주고 outline을 재설정하는 것입니다.

a:focus {
    border: 1px solid red;
    outline: none;
}

규칙 상세설명

규칙(Rule) ID: outline-none

이 규칙은 키보드만 사용하는 사용자에게 포커스를 이용한 시각적 설명을 보장하기 위한 규칙입니다. 다음의 경우 문제로 판단합니다.

1. outline: none 또는 outline: 0이 작성된 규칙이 :focus를 포함하지 않는 경우
2. outline: none 또는 outline: 0이 작성된 규칙이 :focus를 포함하지만 다른 속성을 포함하지 않는 경우

다음의 경우 문제로 판단합니다.

/* :focus가 없는 경우 */
a {
    outline: none;
}

/* :focus가 없는 경우 */
a {
    outline: 0;
}

/* :focus가 있지만 대체적인 보완이 없는 경우 */
a:focus {
    outline: 0;
}

다음의 경우는 정상으로 판단합니다.

/* :focus와 outline: 0이 작성되었고 대체적인 보완이 추가된 경우 */
a:focus {
    border: 1px solid red;
    outline: 0;
}

조금 더 살펴보기

• Removing the dotted outline
• http://outlinenone.com/

---

원문: https://github.com/stubbornella/csslint/wiki/Disallow-outline%3Anone