투명이 투명하지 않을 때

우리는 가능한 한 액세스 가능해야 하는 구성 요소 라이브러리에서 작업하고 있습니다. 그래서 우리는 다양한 a11y 테스트를 실행하고 있으며 이러한 테스트 중 하나에서 Internet Explorer에서 특이한 방식으로 해결된 흥미로운 문제를 발견했습니다.

...하지만 먼저 배경 지식을 더 알려드리겠습니다.

다음(간체) 코드로 버튼을 개발했습니다.

<button>
  I am a button... click me!
</button>

button {
  background: #03a;
  border: 0;
  border-radius: 2px;
  box-sizing: border-box;
  color: #f8f8ff;
  display: inline-block;
  font-weight: bold;
  height: 2.5rem;
  padding: 0 1.5rem;
  text-transform: uppercase;
  transition: background 0.25s;
}

button:focus {
  outline: 1px dashed navy;
  outline-offset: 2px;
}

button:hover {
  background: #029;
}

button:active {
  background: #03b;
  color: white;
}

웹 페이지에 배치하면 다음과 같이 표시됩니다.



그리고 여러 도구를 사용하여 다양한 테스트를 실행합니다. 테스트 중 하나는 고대비 모드(HCM)에서 구성 요소를 실행하는 것으로 구성됩니다. 이를 위해 High-Contrast extension on Chrome 및 Windows에서 사용할 수 있는 기본 고대비 모드(Internet Explorer 테스트용)를 사용합니다.

Chrome에서는 결과가 만족스러웠습니다.



그러나 Internet Explorer에서 몇 가지 문제를 발견했습니다.



이는 버튼의 배경색이 페이지의 배경색과 동일하기 때문에 버튼이 아닌 일반 텍스트처럼 보일 수 있기 때문에 문제가 됩니다. 그것.)

Before someone says "why don't you just ignore IE?", let me tell you that it is not my choice, and this is part of a contract in which the client specifically requested support for IE11. Ignoring IE is not an option.

media feature like this -ms-high-contrast 을 사용하여 Internet Explorer에서 고대비 모드를 대상으로 지정하는 방법이 있습니다.

@media screen and (-ms-high-contrast: active) {
  /* High contrast styling goes here */
}

한 가지 가능한 해결책은 배경과 동일한 색상으로 버튼에 테두리를 추가하는 것입니다. 가능하지만 버튼에 여러 상태가 있고 배치, 기능 등에 따라 다른 색상으로 표시될 수 있다는 점을 고려하면 성가신 일입니다.

그리고 누군가 "투명한 테두리를 사용하면 어때?"라고 말했습니다.

우스꽝스럽게 들리죠? 투명 테두리는 고대비 모드에서도 여전히 투명합니다... 그렇지 않나요? 그러나 우리는 무엇을 잃어야 했습니까? 그래서 우리는 시도했습니다...

button {
  border: 2px solid transparent;
}

...작동했습니다!



Windows HCM은 투명 테두리를 흰색 테두리로 변환했습니다. 당신이 나에게 묻는다면 그것은 너무 이해가 되지 않습니다 – 이것에 따르면 Accessibilly article HCM에서 색상이 변경되고 배경과 다를 것이기 때문에 이런 일이 발생합니다 – 하지만 정확히 우리가 필요로 했던 것으로 받아들이겠습니다. :

box-sizing: border-box ,

를 사용하기 때문에 버튼 크기는 부정적인 영향을 받지 않습니다.

더 이상 -ms-high-contrast 기능을 사용할 필요가 없으며

투명하기 때문에 테두리가 보이지 않습니다... 투명해질 때까지.

이것이 Windows 및 IE에서 어떤 경우에는 transparent가 실제로 투명하지 않다는 것을 발견한 방법에 대한 짧은 이야기입니다. 😊

이제 웹접근성 테스트를 계속하세요! 건배!