HTMLにsearch要素が追加されたぞ！
先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリティの面でも率先して使用していきたいですね。 参考: The search element 2023年3月24日、HTML Standardの仕様にsearch要素が追加されました。 Add the <search> elementhttps://t.co/AlmyHd0qxI — HTML Standard (@htmlstandard) March 24, 2023 追加されたsearch要素は、下記で確認できます。 カテゴリは、フローコンテンツです。 4.4.15 The search element -HTML Standard search要素は、検索またはフィル
HTMLのdialog要素とフォーム機能 - Hatena Developer Blog
こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応
The header element | HTML5 Doctor
Recently, we have seen a growing interest in HTML5 and its adoption by web professionals. Within the HTML5 specification we can see that there have been a significant number of new elements added, one of these the <header> element is what we’ll be covering in this post. We’ll talk about when to use it, when not to use it, its must haves and must not haves. Ready? Let’s dive straight in. Updated 15
ARIA in HTML
ARIA in HTML W3C Recommendation 07 May 2024 More details about this document This version: https://www.w3.org/TR/2024/REC-html-aria-20240507/ Latest published version: https://www.w3.org/TR/html-aria/ Latest editor's draft:https://w3c.github.io/html-aria/ History: https://www.w3.org/standards/history/html-aria/ Commit history Implementation report: https://w3c.github.io/html-aria/results/implement
実践アクセシブルHTML - 可変フォントサイズとレイアウト
フォントサイズ固定に残念な思い 6月20日に、Macromedia Flash Conferenceへ行ってきました。その一番最後の時間枠は、FlashのコンクールというかコンテストというかでFlashの作品をいろいろ募集している、さまざまなサイトの紹介をするスペシャルセッションでした。こういった場では、かなり大きいスクリーンに画面を表示させて、たくさんの受講者みんなで見るというスタイルが採られるわけですが、いくら大きなスクリーンであっても小さな文字なんかを判読するのは困難です。 そのスペシャルセッションのスピーカーの方が、サイトの内容の一部を読み上げたりしながら、「あ、これはちょっと見づらいですね」などといいながら、フォントサイズを大きくしようとブラウザを操作したのですが、そのサイトは文字の大きさを固定しているようで、大きくできませんでした。ちょっと、その中のどのサイトだったかは定かでは
実践アクセシブルHTML - altはつけるだけじゃなくて
画像にalt属性を よく「画像にはalt属性をつけましょう」というフレーズを耳にするかと思いますが、これはサイトのアクセシビリティ改善における対応のうち、もっともメジャーなものであるといえます。WAIのアクセシビリティガイドラインであるWCAG1.0には「テーブルをレイアウトに使ってはいけません」というような内容の項目もありますが、これに対して「よっしゃ、テーブルを使うのをやめよう」とあっさりと決断してサックリとそのように作り変えることなど、ほとんどのサイトにおいて無茶な話でしょう。しかし「すべての画像にalt属性をつけよう」というのはアクセシビリティの対応要件に必ずといって良いほど含まれます。これなら、たとえ数千ページある規模のサイトであっても、とりあえず機械的な処理であるとか、人海戦術であるとかでも何とかなりそうだから……と思うからかもしれません。 たまにalt属性のことをaltタグと
ページをレイアウトしてみよう その1テーブルレイアウト
データシートのような表組みをWebぺージに掲載する手段は、HTMLのtableというタグを使うことである。行と列のセルを複数設定すると、ちょうど方眼紙のような体裁が作れることから、画像やテキストをWebページ上の好きな位置に表示させる代替手段に使われることもある。この方法をWebサイト制作用語で「テーブルレイアウト」という。 ■テーブルレイアウトの欠点 多くのサイトオーサリングツールがレイアウトの手段として「レイアウトグリッド」や「レイアウトテーブル」といった名前の機能を搭載している。方眼に見立てて生成したテーブルに素材を放り込むという作業手順は、紙ベースのレイアウト用ツールと操作感覚が非常に似ている。そのためデザイナーには馴染みやすく、学習もしやすい。HTMLだけでレイアウトの工夫が完結するため、サイトオーサリングツールで100%作業が完結させられる点も良いところだ。 ところがテーブルレ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://shoonm.com/2010/03/html5css3.html