Rendere più grande l'area cliccabile dei collegamenti in linea senza influire sul layout

Question

Sto cercando di rendere l'area cliccabile dei collegamenti più grande di quella effettiva per l'accessibilità poiché per gli utenti previsti può essere difficile colpirli. Potrebbe essere appropriato circa 1,5 volte la dimensione. Questi sono collegamenti in testo normale, quindi non posso effettivamente renderli più grandi che potrebbero rovinare il layout.

Mi avvalgo delle funzionalità specifiche di HTML5, CSS3, JS o anche di Mozilla per ottenere questo risultato poiché l'ultima versione di Firefox è l'unico obiettivo, anche se i CSS/HTML di base piuttosto che tali hack sarebbero ovviamente preferibili!

Answer 1

Un'opzione che potrebbe funzionare è utilizzare lo pseudoelemento :after. Qualcosa del genere:

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

I numeri potrebbero essere modificati a piacere. L'unico lato negativo che riesco a vedere subito è se devi supportare qualcosa di pre-IE8. http://caniuse.com/#feat=css-gencontent

Ecco uno fiddle.

Answer 2

È possibile farlo utilizzando una imbottitura più grande.

Ad esempio:

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

qui si ha un esempio vivente: http://jsfiddle.net/u5kuJ/1/

Aggiornato:

Con il violino: http://jsfiddle.net/XXgqu/1/

Answer 3

Sono abbastanza sicuro che non è possibile fai quello che stai chiedendo Le uniche cose che mi vengono in mente sono l'aggiunta di padding, margin e line-height. Anche se non è la mia soluzione preferita, ma a seconda del contesto del sito, forse avere una pagina con tutti i link elencati, che ha un obiettivo più grande.

Inoltre, forse utilizzare i outline & le proprietà CSS outline-offset con buon contrasto per far sapere sono sul link.

Un'altra cosa è, le persone che hanno bisogno di un target più grande, usano la tastiera più spesso per navigare in un sito Web, per cui rendere il tuo sito più intuitivo per la tastiera può essere d'aiuto. Ad esempio, hai un'intestazione e una barra laterale, tramite codice, vengono prima del contenuto principale? Se così posizionando un collegamento skip nav, o alcuni (a seconda del layout), può anche aiutare.

Answer 4

Ho effettuato un aggiornamento alla risposta di gotohales, funzionerà con qualsiasi sia la lunghezza del testo, quindi aggiungerà un po 'di padding.

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

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

Answer 5

È possibile utilizzare la pseudo-elemento :after per riempire l'elemento, e l'utilizzo di transform e position è possibile posizionare l'imbottitura centrato sul centro dell'elemento senza influenzare altri elementi.

Sostituire padding: 30px con qualsiasi padding necessario.

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

Nota: Questo si basa sulla soluzione gotohales, che è un ottimo approccio, tuttavia utilizzando sopra ea sinistra con i valori pixel come soluzione gotohales fa richiede tenendo conto della larghezza/altezza dell'elemento siamo imbottitura altrimenti l'imbottitura sarà fuori centro.