透明でないとき

6034 ワード
a11y css html テキストリンク
我々は、可能な限りアクセス可能なコンポーネントライブラリに取り組んでいます.それで、私たちは異なったA 11 Yテストを走らせています、そして、それらのテストの間、我々は独特の方法で解決された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;
}
これは、Webページに配置されたときにこのようになります.

そして、いくつかのツールを使用して別のテストを実行します.テストの1つは高コントラストモード(HCM)でコンポーネントを実行することから成ります.そのためには、Windowsで利用できるネイティブハイコントラストモード(Internet Explorerのテスト用)と同様にHigh-Contrast extension on 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.


Internet Explorerでハイコントラストモードをターゲットにする方法はmedia feature like this -ms-high-contrast を使用します.
@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でいくつかのケースで透明性が本当に透明でないということを発見した方法の短い話です.😊
    今、オフのWebアクセシビリティテストを続行するには!乾杯!
    • ドラキュラと一貫した開発者の旅🧛‍♂️
    JavaScriptの文字列を反転する方法