H2: 同じリソースに対して隣接する画像とテキストリンクを結合する | WCAG 2.0 達成方法集
この達成方法の目的は、テキストとアイコンの両方でリンクを提供する際、キーボード利用者や支援技術の利用者にとって混乱や困難を招くような ウェブページを作らないようにすることである。様々な利用者がテキストとアイコンを使いやすいと見出していることから、両方を提供することでリンクのアクセシビリティを向上させることができる。 よくあるリンクとして、テキストとアイコンの両方が互いに隣接しながらも、別々の要素としてレンダリングされているものがある。視覚的にはそれらは単一のリンクのように見えるが、それらを同様のリンクが隣接しているものとして受け取る利用者も多い。キーボード利用者の場合、冗長なリンクを通過していくのは面倒である。支援技術の利用者にとって、連続する同様のリンクに遭遇すると混乱する可能性がある。アイコンのテキストによる代替がリンクテキストの複製である場合、スクリーンリーダーは読み上げを 2 度繰
リンクがついた画像の下線を消す方法｜web bibo
<a>タグの中に<img>タグを入れたら画像の下に下線が付いてしまいます。アフォーダンスを応用したボタンや明らかにクリックできるバナーなどに下線がつくのは好ましくないので、この下線を消す方法を紹介します。 HTMLを記述 <p><a href="http://www.webbibo.com/">CSSのTipsサイト「webbibo」<img src="./images/img_underline_01.png" /></a>でCSSのテクニックを公開しています。個人の備忘録として初めましたが、自分と同じCSSに悩まされた人にも解決していただきたく、このようなページを設けて公開しています。</p> CSSを記述 a img { margin: 0px 0px -6px 0px; border: 3px solid #FFFFFF; } →画像に付いた下線を消したサンプル 画像の周りに背景色
:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか？ 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
玄関にある記号(マーキング)一覧 : 2chコピペ保存道場
