Comparing and contrasting ins, del, and s | HTML5 Doctor
Since the mists of HTML 2 we’ve been able to semantically indicate added or removed information using the elements <ins> and <del> respectively. While seemingly simple on the surface these elements have hidden depths. I’ll also compare and contrast <del> with <s>, recently out of font style rehab and back in HTML5. Let’s start with <ins> and <del>… Using ins and del These two elements have very si
全日本＜label＞要素マークアップ検定
19. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ 20. 人間工学的観点では、視点の動きが重要 - Path To Completion - 視点の導線は一本に。 http://www.slideshare.net/lorielue/form-design-best-practices-t
HTML 5.1 (W3C Working Draft 2013-05-28) 日本語訳
Latest Published Version: http://www.w3.org/TR/html51/ Latest Version of HTML: http://www.w3.org/TR/html/ Latest Editor's Draft: http://www.w3.org/html/wg/drafts/html/master/ Previous Versions: http://www.w3.org/TR/2014/WD-html51-20140204/ Editors: WHATWG: Ian Hickson, Google, Inc. W3C: Robin Berjon, W3C Steve Faulkner, The Paciello Group Travis Leithead, Microsoft Erika Doyle Navara, Microsoft Ed
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
HTML5 Accessibility Chops: hidden and aria-hidden | The Paciello Group Blog
As a developer and also a consultant advising developers on how to develop accessible content, it is important to have and provide up to date and practical knowledge about robust development techniques. A recent question on Stack Overflow got me thinking: What is the best method for hiding content for all users? For hiding content for some users? The standard technique for hiding content for all
フォームの入力必須項目のマークアップ | Accessible & Usable
公開日 : 2013年4月12日 (2020年8月30日 更新) カテゴリー : アクセシビリティ / ユーザビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 <label for="name">お名前 (必須)</label> <input type="text" id="name" name="name" /> 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) にフォーカスが当たるとその入力要素に紐づいたラベルが音声で読み上げられ、ラベルに包含された「必須」
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
HTML Standard 日本語訳
4.8.4 画像4.8.4.1 導入4.8.4.1.1 アダプティブ画像4.8.4.2 source、imgおよびlink 要素の共通属性4.8.4.2.1 srcset共通属性4.8.4.2.2 size属性4.8.4.3 Processing model4.8.4.3.1 When to obtain images4.8.4.3.2 Reacting to DOM mutations4.8.4.3.3 The list of available images4.8.4.3.4 Decoding images4.8.4.3.5 Updating the image data4.8.4.3.6 Preparing an image for presentation4.8.4.3.7 Selecting an image source4.8.4.3.8 Creating a source s
img要素のalt属性に何を入れるべきか？ - 血統の森+はてな
HTMLをマジメに書くにあたって、一度は考えたことがあるんじゃないだろうかテーマだと思いますが、その問いに対してW3Cがベストプラクティスの位置づけにあたる文書を発行しています。そして、この文書を訳してみましたよ、というお話。 HTML5 有用な代替テキストを提供するためのテクニック http://momdo.s35.xrea.com/web-html-test/spec/WD-html-alt-techniques-20120329.html HTML5を拡張する仕様（あるいはノートになるかもしれない）としてまとめられていますが、どのHTMLでも参考になる内容となっています。また、ISO/IEC 40500:2012にもなった*1 WCAG2.0への参照が文書中にありますが、これらをWeb上に存在する日本語訳へのリンクに書き換えています。アクセシビリティへの入門として、またJISX 83
HTML5の考察
ホーム APPENDIX HTML5の技術・政治的考察 HTML5とは何か 技術的考察 HTML5でHTMLを記述するに当たっては、当然、「新たに採用もしくは変更された要素や属性をどのように使うのか」が、焦点になります。 2010年前半でHTML5が話題に上ったとき、そこでは動画をブラウザ自体で再生できるようにするvideo要素の存在が、Adobe Flashとの対比で注目されていました。また、それ以前からもスクリプトなどを使って動的に画像をブラウザ上で描画できる、canvas要素なども関心を集めているようです。実際、遅ればせながらcanvas要素に対応したIE 9 Betaが登場した際には、canvas要素を効果的に採用した協賛サイトが多数紹介されています。 こうした、動的で応答性に優れた「Webアプリケーション」をサポートすることも、HTML5の目的になっていますが、私自身は、オーソド
Quick FAQs on input[type=date] in Google Chrome | Blog | Chrome for Developers
This article is written by a Chrome software engineer Kent Tamura. As you might have already noticed, Google Chrome supports a datepicker since Chrome 20. Just by setting the type attribute of the input element to date, the user can click the arrow button and Chrome will pop up a nice calendar widget. As we have received a lot of feedback from developers, we'd like to clarify a few things about ho
Windows 10 Mobile (Preview) の入れ方 for build 10512 - 高橋 忍のブログ- MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
HTML CSS ガイドライン – Kangaroonote
ディレクトリ構造 ディレクトリ構造、ファイル構成は案件毎に最適な方法を検討 公開ファイルと公開不要なファイル（SASS や node_modules など）は明確に分ける 特に理由がなければ下記の形にし、読み込み順とスタイルの優先度に整合性がとれるように心がける root/ ├── dist/ └──index.html └──assets/ └──css/ └──images/ └──js/ └──lib/ └── src/ └──sass/ └──style.scss └──foundation （基本的となるスタイル） └──_global_var.scss └──_mixin.scss └──_reset.scss └──_font.scss └──layout （ヘッダ、フッタ、共通ナビ、カラム構造） └──_flex.scss └──_float.scss └──_nav-ma
datalist landed in Chrome Canary | Blog | Chrome for Developers
Filling out forms sometimes feel like cumbersome thing. Giving users multiple choice yet enabling them to type freely is important. The datalist element (which just landed on Chrome Canary (M20) makes this a breeze. By using datalist, your app can define a list of suggested results users should select from. They can either select an option from the list or enter freeform text. Live demo: Options c
Perfection kills » Optimizing HTML
Why clean markup? Markup smells Additional optimizations Agressive optimizations When things go wrong Antipatterns Tools Future considerations Why clean markup? Client-side optimization is getting a lot of attention lately, but some of its basic aspects seem to go unnoticed. If you look carefully at pages on the web (even those that are supposed to be highly optimized), it’s easy to spot a good am
ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - padolsey/SIML: Simplified Markup
Basic HTML5, ARIA, and Screen Readers
More Thoughts About Blockquotes than are Strictly Required
http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/