Увеличение площади интерактивных ссылок, не затрагивающих макет

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

Я использую специальные функции HTML5, CSS3, JS или даже Mozilla для достижения этой цели, поскольку последняя версия Firefox является единственной целью, хотя базовый CSS/HTML, а не такие хаки, конечно, будет намного предпочтительнее!

Ответ 1

Один из вариантов, который может работать, - использовать псевдоэлемент :after. Что-то вроде этого:

a {
    position: relative
}
.bigger:after{
    content:"";
    padding: 50px;  
    position: absolute;
    left: -25px;
    top: -25px;
}

Числа могут быть изменены по своему усмотрению. Единственный недостаток, который я вижу сразу, - это то, что вам нужно поддерживать что-либо до IE8. http://caniuse.com/#feat=css-gencontent

Здесь fiddle.

Ответ 2

Вы можете сделать это, используя большее дополнение.

Например:

.a{
    padding: 20px;
    margin: -20px; //lets keep the layout
}

Здесь у вас есть живой пример: http://jsfiddle.net/u5kuJ/1/

Обновлено:

С вашей скрипкой: http://jsfiddle.net/XXgqu/1/

Ответ 3

Я сделал обновление для ответа gotohales, оно будет работать с любой длиной текста, а затем добавит пробел.

http://jsfiddle.net/vG7UY/2/

a {
  position: relative;
}
  .biggerForMobile:before{
  content:""; 
  width:100%;
  height:100%;
  position:absolute;
  padding:12px;
  top:-10px;
  left:-10px;
}

Ответ 4

Вы можете использовать псевдоэлемент :after для прокладки элемента, и используя transform и position, вы можете позиционировать отступы, центрированные по центру элемента, не влияя на другие элементы.

Измените padding: 30px на любое дополнение, которое вам нужно.

.padded-click {
  position: relative; 
}
.padded-click:after{
  padding: 30px;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

Ответ 5

Я уверен, что вы не можете делать то, что вы просите. Единственное, что приходит на ум, - это добавление отступов, маржи и высоты линии. Хотя это не мое любимое решение, но в зависимости от контекста сайта, возможно, есть страница со всеми перечисленными ссылками, которая имеет более крупную цель.

Кроме того, возможно использование свойств outline и outline-offset CSS с хорошим контрастом, чтобы люди знали об этом.

Другое дело, люди, которые нуждаются в более крупной цели, чаще используют клавиатуру для навигации по веб-сайту, поэтому помощь на вашем сайте может отличаться от клавиатуры. Например, у вас есть заголовок и боковая панель, через код, поступают ли они перед основным контентом? Если это так, возможно, также поможет skip nav или несколько (в зависимости от макета).