Создание независимого браузера или IE альтернативная внутренняя граница кнопки для фокуса? (доступность связана) - PullRequest
Новая
       41

Создание независимого браузера или IE альтернативная внутренняя граница кнопки для фокуса? (доступность связана)

0 голосов
/ 28 августа 2018

Пара дополнительных требований, по которым я работаю:

  • Нужно быть реактивным / мобильным

  • Требуется также совместимость с Chrome, Firefox и, в идеале, Opera. 

    <button class="outline">
Lol A button
</button>

button{
  background-color: blue;
  color: white;
  padding: 15px;
}
.outline:focus{
  outline: 2px solid white;
  outline-offset: -6px;
}

JS Fiddle пример того, что я делаю сейчас

Edit:

JS Fiddle Пример проблемы, с которой я сталкиваюсь в прошлом, отвечал на подобные вопросы

Если вы посмотрите на вторую ссылку и перейдете к примерам, возможно, попытаетесь изменить некоторые внутренние границы в классе box, вы увидите, что эта опция довольно жесткая, и мне не удалось получить правильную смещение внутренней границы с достаточным зазором от внешнего края.

В частности, 2px, вероятно, будет минимальным зазором между внутренней границей и внешним краем. Предполагаемое использование - это 4-6 пикселей, так что есть действительно четкая граница, поэтому я могу создать контрастность 7,5: 1 для высокой видимости поля фокусировки. В моем конкретном случае использования это невозможно с внешней границей без нарушения цветовой схемы сайта, поэтому это действительно нежелательно.

Я сомневаюсь в том, чтобы заставить это работать как универсальное решение для 3+ типов кнопок, а также хорошо выглядеть на мобильном телефоне.

Кроме того, если правильный ответ здесь просто: «это невозможно, вам нужно сделать что-то еще полностью», это хорошо, если это действительно так. У меня нет опыта CSS, чтобы знать наверняка.

1 Ответ

0 голосов
/ 27 сентября 2018

Мне так и не удалось найти решение, подобное тому, что я искал. Вместо этого я закончил делать это: 

box-shadow: 0 0 0 2px rgb(255, 255, 255),
0 0 0 4px rgb(0, 84, 164) !important;
outline: none !important;

По сути, вы должны использовать контур, поэтому я использовал два контура, которые соответствуют цвету / внешнему виду кнопки, чтобы создать тот же эффект с расширением кнопки. Это отвечает требованиям контрастности доступности, помещая цветовую полосу между кнопкой и внешней полосой. Пока эта внутренняя полоса и кнопка достаточно различны по контрасту, а внешняя полоса соответствует кнопке или другому высококонтрастному цвету.

Не совсем то, что я хотел, но, к сожалению, не так уж много других вариантов, которые работают в контексте этой проблемы.

...