まだ画像テキスト使ってるの？ アクセシビリティとSEO両立のベストプラクティス
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
1文字だけの改行の拒否
日本語の文章では任意の位置で改行できるため、レスポンシブ・ウェブ・デザインでは多くの場合、望まない位置での改行が起きる。例えば最後の1文字だけ次の行になってしまうと、読みやすさや理解度に致命的な影響を与える。例えば「？」だけ次の行に送られた場合、あるとないのでは大きく印象が変わるだろう。Twitterで@Takazudoと@oosugi20の会話を見て、やはりみな似たようなことは考えるものだと感じ、このあたりのことについて書いてみたくなった。 僕はjQueryで最後の五文字では改行が起きないようにいじったりしていた(うろ覚えで書いたもので、実際にはもっと複雑にやっていたと思う)。見出しがテキストのみの場合、最後の数文字の間に非改行ゼロ幅スペース(U+FEFF)を仕込むことで、その間で改行が起こらなくなるという仕組みだ。ここでは比較のためにクラスで判定するように書いてあるが、実際にはh1から
色覚多様性を再現するSVGフィルター
多くのウェブ制作者達が色覚多様性について考えることはまずない。せいぜいコントラストを確保したり、リンクの下線を消さないようにしたりすることで、グレースケールでもそれなりに識別できるように注意するくらいだろう。それで十分とも言えそうではあるが、それ以上考えようにも取っ掛かりがないためそれで止まっているとも言える。その取っ掛かりとして色覚多様性を再現するSVGのフィルターを作った。 Repository: Color Blindness Emulation filters.svgに含まれる8つのフィルターは、そのアルゴリズムはともかく、feColorMatrix要素を使ったごく簡単なものだ。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version
CSSの声を聞く - 思ったこと
CSS Property Advent Calendar 2013 の15日目です！ 今回は、 現在 Technical Report 段階の CSS-Speech Module を紹介します！ CSS-Speech Moduleってなに？ CSS （ Cascading Style Sheets ）は、（ HTML や XML などの）マークアップ文書から， スクリーン, 紙, 発話（ speech ）, 等々 の媒体への具現化（ rendering ）を記述するための言語である。 Speech モジュールは、作者が，発話合成を通して, 加えて 随意で音声指示も利用して，文書の音声化（ rendering ）を宣言的に制御できるようにするための、聴覚 CSS プロパティを定義する。 この標準は Voice Browser Activity との協同の下，開発された。 扱いとしては、med
Time-dimensional擬似クラスについて調べてみた - tech.o2p.jp
Time-dimensional擬似クラスについて(CSS Property Advent Calendar 2013 9日目) CSS Property Advent Calendar 20139日目の記事です。 今日は少し先を見据えて、Selectors Level 4の中から、明日のAdvent Calendar担当でもあるmyakuraさんが書いた文書、CSS4セレクタ (Selectors Level 4) の新機能で触れられていない「:current, :past, :future」の各擬似クラスについて、Working Draftで現在の最新版である2013/5/2版を参照しながら紹介します。 CSS Property Advent Calendarなのにセレクタの話になってしまいましたが、すでに2人ほどセレクタの話をしているようなので、3人目になろうと思います。 曖昧なとこ
Simple, accessible external links - Max Design
Published: 11 December 2005 The Web Content Accessibility Guidelines 1.0 state: “Clearly identify the target of each link. [Priority 2] Link text (The rendered text content of a link) should be meaningful enough to make sense when read out of context — either on its own or as part of a sequence of links. Link text should also be terse.” Web Content Accessibility Guidelines 1.0 Depending on how thi
ProjectDD
最果タヒさんがつむぐ「詩になる直前」の言葉が並んでいるのですが、むしろ展示デザインを担当された佐々木俊さんとの「詩や言葉の、無限大の表現方法を探るインスタレーション展」と言った方がしっくりくる…それくらい言葉の表現方法のバリエーションに触れることができる展示になっています。
スタイルシートスイッチstyleswitchソース-WEBデザイン BLOG
javascriptを使ってのスタイルシートスイッチソース元を紹介。 スタイルシートの切り替え・文字サイズの切り替え・ブラウザの表示幅を検知して表示を変更するものなどいろんなものがあります。スクリプトの参考に。ついでに個人的にスタイルシートの切り替えを導入しているサイトを少し紹介。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
-ms-high-contrast media feature (Internet Explorer)