折り畳み UI のスクリーンリーダー対応 | Accessible & Usable
公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって
HTMLで「table-layout:fixed」つかってもTableが崩れる場合の対応方法 | 蒼いねずみのお仕事
ですが、同じCSSを使っていてもこんな感じでレイアウトが崩れてしまう場合があります。 （なぜか、中見出しが「100px」になっていない） 見出し これは最初にcolspanが出てきてしまうと、残念ながらこのように崩れてしまいます。 それでは、なぜcolspanで「table-layout:fixed」の効果がなくなってしまうのでしょうか。 これは、「table-layout:fixed」の仕組みが最初の＜tr＞行でレイアウトを決めて固定化してしまう仕組みになっているからなのです。 ですので、最初の行に「colspan=”3″」があると、その時点でcolspanでまとめられてしまった＜td＞列は、きれいに3等分されて「fixed（固定化）」してしまったのです。（最初の行移行では、「table-layout:fixed」の効果はない） この現象を防ぐには、どうすればいいのかというと最初に表示す
CSSで旋風を巻き起こす。 - Qiita
<div class="dust_devil"> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> <
wkhtmltopdf
What is it? wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line tools to render HTML into PDF and various image formats using the Qt WebKit rendering engine. These run entirely "headless" and do not require a display or display service. There is also a C library, if you're into that kind of thing. How do I use it? Download a precompiled binary or build from source Create your HTML
Images, Tables, and Mysterious Gaps - Archive of obsolete content | MDN
This is an archived page. It's not actively maintained. The techniques described this article are no longer best practices for Web-based development. It is now preferable to use CSS for layout. However, these techniques may be relevant when the developer cannot assume that users have a modern browser, such as for HTML-based e-mail messages. Almost no matter when you started creating Web pages, odd
HTMLをレイヤー別けしたPSDに変換するキャプチャーソフト Page Layers が神 | fladdict
Page Layersは、すごいウェブのキャプチャアプリ。なんとキャプチャするサイトを、DIVやIMG要素ごとにレイヤー分割したPSDにしてくれるのだ！ これは素敵と言わざるをえない。 ビデオをみれば使い方は一目瞭然。URLを入力して保存ボタンを押すだけで、なんでも構造化したPSDにしてくれる。 Mac専用アプリで、AppStoreで$28.99。これは買いだと思います。 Web関係者は必須的な。
swfobject.js がアレな話 - ほむらちゃほむほむ
もばいる全盛感のある世間的には今更，FLASH なんてどうでもいいし，swfobject.js 自体 2009年から更新されてないから，こんな古いものをと言われかねないような話ではあるものの，日本語での言及をあまり見てないし，つい先日もさる通信キャリアがトップページでやらかしてて多分知られてないんだろうなと思ったので書こうと思った次第． swfobject.js とは何か この記事の対象読者にとっては説明するまでもない話とはおもうけど一応前置きとして説明しておくと，swfobject.js は FLASH を web ページに埋め込むための JavaScript のライブラリ．クロスブラウザ対応してたり，面倒な HTML-tag のお作法を覚えなくても良くなったりとでデファクトスタンダードな感じのモノ．2007年とちょい古いがリクルートMTL の SWFObject v2.0 ドキュメント
EmacsWiki: Zen Coding
Zen Coding refers to a neat way to write markup quickly. The following blogs provide summary and examples: http://www.456bereastreet.com/archive/200909/write_html_and_css_quicker_with_with_zen_coding/http://mondaybynoon.com/2009/08/17/the-art-of-zen-coding-bringing-snippets-to-a-new-level/ (skip the cruft about snippets)EmmetZen Coding has been renamed to Emmet and includes an expanded feature set
にひりずむ::しんぷる - HTML::Filter::Callbacks の紹介
追記あり Yuji Shimada / HTML-Filter-Callbacks - search.cpan.org charsbar さんにパッチを送ったら、「commit bit 付けたから自分でリリースしてちょ」って言われたので、先ほど 0.07 をリリースしました。 それはさておき、このモジュールについての情報があんまり世の中に無いようなので、いい機会なので紹介しようかと思います。 このモジュールを使えば 不要なタグの除去 url の変換 属性の追加、削除 text の置き換え などなどが簡単にできます。 似たようなモジュールとして、HTML::Scrubber というのが昔からあって、よく使われてますが、長年メンテされていなかったり*1、インターフェースがとてもわかりにくかったり*2して、今から使うのは気が引けますが、HTML::Filter::Callbacks は大変直感的
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
HTML5のscript要素 | Torisugariの日記 | スラド
"HTML5 script要素"というキーワードで検索すると、async属性（及びdefer属性）に注目している人が多いようです。確かに、こういう細かい挙動も、ひいてはビジターの快・不快(いわゆるUser Experience)に影響を与えるので、決して軽んじていいわけではありませんが、これを使いこなせるほど重い処理をスクリプトにやらせるのか、と考えると、AJAX万歳な時代の趨勢に漠然とした不安を覚えます。 ところで、私が個人的に注目しているのは、script要素の中身です。4.01では、 The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
正しいコメントを書こう
HTML文書の中で、ソースを読みやすくするため、コメントをセクションの区切りとして用いている人は少なくないでしょう。しかし、コメントの書式は正しく理解されていないことが多く、誤った用法を頻繁に見かけます。実際に支障が出ることは少ないのですが、厳密なブラウザでは内容が読めなくなってしまうこともあり、注意が必要です。 コメントのきちんとした定義はHTMLのバージョンによって微妙に異なりますが、基本的には コメントは <!-- 注釈の文 --> という形式で、これ以上余計なハイフンを使っちゃだめ と理解しておくのがよいでしょう。（2016現在ではHTMLなら少し緩和されることになりそうです） HTML 2.0で定義されていたコメント HTML 2.0の場合、RFC 1866の"3.2.5. Comments"において次のように定義されていました： To include comments in a
hxxk.jp - DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )
DOCTYPE スイッチについて再度まとめ 以前 DOCTYPE スイッチについての検証とまとめと一覧表という記事で DOCTYPE スイッチについてまとめましたが、あれから 2 年弱が経過したので、改めてまとめてみようと思います。 まとめるまでの話がけっこう長いので、一覧表だけ参照したい ! という場合は DOCTYPE スイッチの一覧表をご覧ください。 DOCTYPE スイッチとは何か そもそも DOCTYPE スイッチとは何か、というのがまず書くべきところですが、これは私が書かずとも良質のリソースが各種ありますのでそのリンクのみまとめておきます。 !DOCTYPE スイッチ 各UAのDOCTYPEスイッチについて - CSS Dencitie Mozilla's DOCTYPE sniffing - MDC Mozilla's DOCTYPE sniffing - MDC ( 日本語
本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
第1回 そろそろ本気で学びませんか？ | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない（と思う）。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
