キーボード操作を意識したHTML/CSSコーディング
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。（よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない） ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
阿部寛のサイトを高速化する - Qiita
ちまたで阿部寛のサイトが早いと話題になってます。 dev.toと阿部寛のホームページどっちが速いですか？ dev.toと阿部寛のホームページについてちゃんと計測させてくれ 阿部寛のサイトはベストを尽くしてるのか？ それを調べるために、阿部寛のサイトを高速化させてみたいと思います。 目指すべきスピード 最速はローカルのファイルへのアクセスだと思うのでこれを目指したいと思います。 file:///C:/abe_hiroshi/index.html ChromeのDeveloper Toolでレンダリング完了が「173ms」でした。 まぁここまでは無理だな… 阿部寛のサイトはどんなもん？ 速度はwebpagetest.orgで測ってみます。 レンダリング完了時間は「359ms」です。はえーな S3でホスティングしてみる サーバーを立てるほどでもないので、S3でWebホスティングしてそこにhtml
「target="_blank"」をやめた - PLAYNOTE
リンク先に target="_blank" を指定するのをやめた。 今までは全部丁寧に target="_blank" していたんだが、ブログ板のMovable Typeスレで「target="_blank"はウザい」「いや、あったいい」「いやウザい」「俺好き」みたいな論争があって、調べてみたらW3C的には非推奨、それどころかXHTML1.1以降では廃止されてるそうだ（参考: 駄的HTML改善計画 - 「target属性の利便性」）。 W3C信者の一人としてW3C勧告には従わねばならない、という忠誠心が働く一方、「でも target="_blank" 便利だしなぁ」という思いも。はてなアンケートによれば target="_blank" 好き派は嫌い派を上回ってるし、Shift＋クリックで新窓開けるのを知らない人もいるし…。 最後に俺の背中を押したのはこの一言だった。 「私はバカな閲覧者は勝
target属性の利便性 | kuruman.org
target属性はa要素や、link要素に指定する事ができた、ウィンドウを支配する属性です。 しかしながら、target属性はHTML4 Transitionalで非推奨、HTML4 Strictや、XHTML 1.1では完全に抹消されました。 何故でしょうか? その理由を他の文書も参考にしながら解き明かしてゆこうと思います。 これは非常に単純なリンクに *target属性* を指定したものです。 リンク集などで多くのサイトに利用されています。 また、target="_top"の指定はフレームを使用した文書の場合は必須となるはずです。 フレームに読み込まれた際に都合の良い様、target="_top"が元から指定されているCGIスクリプトもあるほどです。 それが良いかどうかは別として…。 定義されている仕様 フレームもtarget属性同様、HTML4ではFramesetのみで使用可、XHT
First Annual Naked Day: April 05
./with Imagination A JavaScript, CSS, XHTML web log focusing on usability and accessibility by Dustin Diaz Thursday, March 30th, 2006 Update!! // Some where along the lines the is_naked_day function wasn’t working across all PHP configurations. There is now an updated naked_day function which is recommended for you to use That’s right, I’m starting the first annual CSS Naked Day. In the spirit of
lockエラー | 月額200円からのレンタルサーバー JSN
以前書いた画像置換に関して、はてなの方でもいろいろとコメントをいただいたので、気になるものをピックアップしてみました。 ・yakonyan：<span></span>はない… ・sac3937：前半言ってる事はわかるけど<span></span>っていうのは生理的に嫌な感じ。と思ったらそういう人も多いみたいで安心。 ・chaperatta：CSSの画像置換で、画像OFFのときに文字が消えない方法（だけど空タグを使うのがあまり納得できない？？ ・urajima：text-indent:-9999pxは確かに使いたくないがかといって空タグはもっと使いたくないなぁ、もうちょっと他の方法探してみよ。 ・makitani：んで空タグを推奨ってのは変でないかい？ ・monochromebox：何故imgではダメなのかを一考してみたい。空のspan使用は本末転倒でしょう。 ・rusica：「画像置換」は
Dive Into Accessibility
この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility（英語版）をダウンロードする HTML（英語版）をダウンロード PDF（英語版）をダウンロード Dive Into Accessibilityを読む 目次 掲載された順序のままにならべてある、すべての情報はこちら。はじめてココ の文を読むときにおすすめの読み方。 人に基づいた情報分類 ここではどんな人に役立つかによって、情報が分けられています。 障碍に基づいた情報分類 ここではどういった障碍があるときに役立
W3C - W3Cの仕様書等の文書の日本語訳集
注意 日本語翻訳集は w3c-translators@w3.org メーリングリスト上で報告された日本語翻訳文書へのリンクを集めたものです． リンクされた翻訳はボランティアによって行われたものです． またこれらの翻訳には誤りが含まれる可能性もあります． 正式なものはあくまでも英語版ですので， この点をご理解頂いた上でご利用下さい． またコピーライトに関する情報を含め，W3Cの文書の翻訳に関しての一般的な情報や， 翻訳の際のヘルプは， http://www.w3.org/Consortium/Translation/にあるW3C翻訳ページ(英語版) をご覧下さい． TR集 勧告 ・ 勧告案 ・ 勧告候補 ・ 草案 ・ 技術ノート その他の文書等 FAQ集 ・ その他 TR集 勧告 HTML 4 (勧告) http://www.asahi-net.or.jp/~bd9y-ktu/html4re
html テキストを DOMDocument にする - サバニFRP
Firefox 2.0 の FeedView 用 XPCOM を使えば、XML として正しくない HTML テキストから、DOMDocument を作れるみたい。 var htmlSource = "<p>foo<p>bar"; var doc = document.implementation.createDocument("", "", null); doc.appendChild(doc.createElement("root")); var unescapeHTML = Components.classes["@mozilla.org/feed-unescapehtml;1"] .getService(Components.interfaces.nsIScriptableUnescapeHTML); var fragment = unescapeHTML.parseFragment
Web2.0ナビ: 意外と知られていない？rel="nofollow"について
いいね！ 8 ツイート B! はてブ 256 Pocket 16 「rel=nofollow」をご存知だろうか？おそらく、このブログを読んでくださっている方の多くは、そんなの知っているという人が多いのかもしれないが、意外と！？知らない人が非常に多かったので、参考までに。 『rel=nofollow』というのは、実はただのHTMLで、リンクタグ<a>の属性です。 <a href=”https://www.web-20.net/” rel=”nofollow”> GoogleやYahoo,MSNといった大手検索エンジンはリンク属性に「rel=nofollow」がついているサイトへのリンクは、ページランク等の集計対象に含みません。 これはブログのコメント欄や、トラックバックスパムを防止するための機能で、一般的にトラックバックやコメントからのリンク属性には「rel=nofollow」がついています
css Zen Garden：CSS デザインの美
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マージンの相殺について：CSS | Tech de Go
フッターを画面の下に表示〜CSSテクニック〜
やってしまいがちなテクニック