14

リンクのクリック可能な領域を実際のアクセシビリティよりも大きくしたいと考えています。これは、対象のユーザーにとっては、リンクを押すのが難しい場合があるためです。サイズは約1.5倍が適切かもしれません。これらは通常のテキストのリンクであるため、実際に大きくすることはできず、レイアウトが混乱します。

最新のFirefoxバージョンが唯一のターゲットであるため、HTML5、CSS3、JS、またはMozilla固有の機能を使用してこれを実現しますが、もちろん、そのようなハックよりも基本的なCSS/HTMLの方がはるかに望ましいです。

4

5 に答える 5

16

動作する可能性のある1つのオプションは、:after疑似要素を使用することです。このようなもの：

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

数字は好きなように微調整できます。私がすぐに見ることができる唯一の欠点は、IE8より前の何かをサポートする必要があるかどうかです。http://caniuse.com/#feat=css-gencontent

これがフィドルです。

于 2013-03-27T14:15:55.950 に答える
8

より大きなパディングを使用してそれを行うことができます。

例えば：

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

ここに生きた例があります：http： //jsfiddle.net/u5kuJ/1/

更新しました：

あなたのフィドルで：http：//jsfiddle.net/XXgqu/1/

于 2013-03-25T09:54:26.463 に答える
1

gotohalesの回答を更新しました。テキストの長さに関係なく機能し、パディングを追加します。

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

a {
  position: relative;
}
  .biggerForMobile:before{
  content:""; 
  width:100%;
  height:100%;
  position:absolute;
  padding:12px;
  top:-10px;
  left:-10px;
}
于 2014-08-06T08:20:15.283 に答える
0

: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ソリューションのようにピクセル値で上下を使用するには、パディングする要素の幅/高さを考慮する必要があります。そうしないと、パディングが中心から外れます。

于 2014-12-05T07:22:25.230 に答える
-1

私はあなたがあなたが求めていることをすることができないとかなり確信しています。頭に浮かぶのは、パディング、マージン、行の高さを追加することだけです。それは私のお気に入りの解決策ではありませんが、サイトのコンテキストによっては、すべてのリンクがリストされたページがあり、より大きなターゲットがあります。

また、リンク上にあることを人々に知らせるために、コントラストoutlineの良い＆ CSSプロパティを使用することもできます。outline-offset

もう1つのことは、より大きなターゲットを必要とする人々は、Webサイトをナビゲートするためにキーボードをより頻繁に使用するため、サイトをよりキーボードフレンドリーにすることが役立つ場合があります。たとえば、コードを介してヘッダーとサイドバーがありますか？それらはメインコンテンツの前にありますか？その場合は、スキップナビゲーションリンク、またはいくつか（レイアウトに応じて）を配置することも役立つ場合があります。

于 2013-03-26T13:45:39.683 に答える