表のキャプションは `<caption>` か `<figcaption>` か
HTML においてまとまりを持った自己完結の図版や文章にキャプションを付ける場合、 <figure> 要素の子要素として <figcaption> 要素を使うことで表現できます。それとは別に表の場合は専用の <caption> 要素が HTML 3.2 やそれ以前から存在します。 両者は似た面も多いものの歴史的経緯もあり、使い方が異なります。 <caption> 要素の歴史 <figcaption> 要素 表のキャプションはどちらを使えばよいのか <caption> 要素の歴史 § HTML で表が定義されたのは1993年の HTML+ が最初です。この時点ですでに <caption> 要素は存在しましたが、この時の table は現在のものとは大きく異なる仕様で、とくに <tr> 要素はrow separatorであり、まるで <hr> 要素のように行を区切るためのものとして定義されてい
`<aside>` 要素のアクセシビリティマッピングが変更
W3C が公開している HTML Accessibility API Mappings 1.0において、2022年4月4日付で <aside> 要素のアクセシビリティマッピングが変更されました。 Suggest <aside> should map to complementary with restrictions · Issue #86 · w3c/html-aam aside mapping revisions by scottaohara · Pull Request #350 · w3c/html-aam 本記事ではなぜこのような変更が行われたのか、 Web 制作者が注意すべき点を含めて確認してゆきます。 <aside> 要素はセクショニングコンテンツなので、 <section> や <article>, <nav> 要素と同じく比較的自由な場所に配置できます。 以下は HTML
インクルーシブHTML+CSS & JavaScript 本を読んだ
本の概要や制作秘話などは翻訳者を含む他の方のブログや Amazon レビュー等で多く語られているので、ここでは自分が読んで共感した部分、異論のある部分、誤りの指摘などをいくつか。 多くのサイトでページヘッダーの左上にサイトロゴを置き、トップページへのリンクを設定することが行われていますが、その際のロゴ画像の代替テキストについてこんな記述が。 画像をリンクにする場合は、代替テキスト（altの値）には画像の説明ではなくリンク先を書くべきです。つまり、「プロジェクトのロゴ」では不十分です。「プロジェクトのホーム」か、単に「ホーム」とするのが適切です。 Kindle の位置No.2797-2799 で、提示されたコード例はこのようになっています。 確かに、原則論としては画像リンクの代替テキストはリンク先の意味を記すのが適切でしょう。 しかし、代替テキストの役割は画像にアクセスできない環境において同
Retina 対応のために img 要素の width, height 属性を再び付けるようにした
みなさんは img 要素に width, height 属性を付けていますか? 私は、ダイヤルアップ接続で画像を1枚1枚ゆっくり表示していた悠遠の時代は書いていましたが、ここしばらくはよほど重い画像をたくさん表示するページでもない限り、付けることはしていませんでした。 ところで、昨今は高解像度ディスプレイの普及に伴い、ウェブページに埋め込む画像も srcset 属性で高解像度版を用意したり、アイコン類は SVG にするなどの対応が求められるようになってきています。 その際、 Firefox において srcset 属性が設定された高解像度画像を横並びにすると、画像の右側におかしな空白が生じてしまいます。具体的にはこんなコード。 <style> ul { margin: 0; padding: 0; display: flex; } li { display: block; } </styl
Twitter の画像の説明文は視覚障害者だけでなくすべてのユーザーのために入れよう
3月下旬、 Twitter の画像投稿時にスマホアプリから説明文を設定できるようになりました。 より多くの方に画像をお届けするために(blog.twitter.com) 画像の説明文を入力する画面オリジナル画像 日本の公式ブログや各ニュースサイトの報道では、「視力が弱い方」「目の不自由なユーザー」というアピールが目立ちますが、この機能は視覚障害者のためだけに向けたものではありません。 外出先でスマホから画像をツイートする時、わざわざ説明文を入力するのは面倒でしょう。私も何度かやってみましたが、正直言ってかったるいです。ただ、「自分のフォロワーには視覚障害者はいないからまったく関係のない機能だ」とは思っていただきたくなく、この記事を書きます。 なぜ視覚障害者のためになるのか 誰のための機能か どのような説明を書けばいいのか まとめ なぜ視覚障害者のためになるのか § 画面を目で見ることが困難
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
