feature image

2023年12月11日 | ブログ記事

imgタグについて色んな仕様書とかドキュメントとか眺めてみた話

この記事はアドベントカレンダー2023 11日目の記事です。
こんにちは、SysAd班21Bのmehm8128です。
なぜか前回の記事の2日後に担当を入れていたのですが、なんも書いてなかったので前日に急いで書いています。明日から冬ハッカソン始まるし週5で授業あるしで色々忙しくてピンチです。

今回はimgタグを例にして色々な仕様書とかドキュメントとかを漁ってみようと思います。

HTML Living Standard

HTML Living Standardとは、WHATWGという組織が定めている、HTMLの仕様です。
以下から見ることができます(one-page versionだとページが長いのでmultiple versionです)。

HTML Standard

この仕様からimgタグについて読んでみましょう。
imgタグは大体「4.8 Embedded content」の中の「4.8.3 The img element」に書いてありそうです。

ちなみにおそらく多くの人が普段使っているであろうMDNではこれを簡略化された説明を読むことができます。
MDNの「仕様書」の欄にHTML Living Standardへのリンクがありますね。

<img>: 画像埋め込み要素 - HTML: ハイパーテキストマークアップ言語 | MDN
<img> は HTML の要素で、文書に画像を埋め込みます。

最初におおまかな仕様が書かれています。
この欄の見方は「3.2.4 Element definitions」に書かれていました。

属するカテゴリ、どこで使えるか、子要素に何を入れられるか、属性(Attributes)は何をつけられるか、a11y的な考慮事項は何か、などですね。
chrome_3cghp5wuer
この下に、各属性のより詳細な説明があります。

最初のExampleでは、loading属性をeagerlazyに指定した場合、もしくはつけなかった場合について画像が読み込まれる順番及びWebページへのパフォーマンス的な影響について書かれています。
NoteにCLSへの対応も書いてありますね。
chrome_lmewnhpg9d

さらに下にいくと、altに文字列を指定した場合、""(空文字)を指定した場合、何も指定しなかった場合などについて場合分けされて1つずつ説明が書かれています。
chrome_olatdosp8m

その下にいくと、JavaScriptで扱うときの属性についての話が出てきました。これをIDL属性と呼ぶらしいですが、名前は初めて聞きました。

IDL (インターフェイス記述言語) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
IDL (Interface Description Language、インターフェイス記述言語) は、特定のプログラミング言語とは別にオブジェクトのインターフェイスを指定するために使用される汎用言語です。
HTML要素 - Wikipedia

次の「4.8.4 Images」に画像のサイズ指定の話や細かい処理の話が書いてありそうなのですが、だいぶマニアックな話っぽかったです。

alt属性の話は「4.8.4.4 Requirements for providing text to act as an alternative for images」にさっきのページより細かく書いてあったので、a11yに興味ある人はここを読んでみてもいいかもです。

HTML Living Standardはこのくらいにしましょう。
基本的にはMDNで十分だと思うので、MDNでよく分からなかったり納得いかなかったりしたらHTML Living Standardを見てみるのがよさそうです。
僕は最近a11yに興味があるので、「6 User interaction」はもうちょっと覗いてみたいなと思いました。

Web Content Accessibility Guidelines

では次に、そのa11yのガイドラインであるWeb Content Accessibility Guidelinesを見ていきます。
その前に、サークル内SNSであるtraQのa11yについて興味のある方はこちらの記事をお読みください(この記事の内容とは関係ないです)。

traQのa11yについて
これは夏のブログリレー2023 34日目の記事です。こんにちは、21B SysAd班のmehm8128です。 今回は部内SNSであるtraQの、a11yの現状について書いていこうと思います。本当はあまり書くことなくて別の記事にしようと思っていたのですが、他に特に書くこともなかったので頑張って書いてます。 まず、僕が前に読んだa11yの本を提示しておきます。これ1冊読んだら最低限の考え方とか知識とかは身につくので、とてもおすすめです。Webアプリケーションアクセシビリティ──今日から始める現場からの改善 (WEB+DB PRESS plus) | 伊原 力也, 小林 大輔, 桝田 草一,山本 伶 |本 | 通販 | Amazon[https://www.amazon.co.jp/Web%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%

Web Content Accessibility Guidelinesとは、W3Cという団体が定めているWebアクセシビリティのガイドラインで、現在はバージョン2.2が最新になっています。頭文字を取ってWCAGと略されます。
かなり抽象的に書かれていて、色んな団体が具体的な実装上のガイドラインを出しています。
例えばSmartHRとfreeeは以下のサイトからガイドラインを見れます。

https://smarthr.design/accessibility/
https://a11y-guidelines.freee.co.jp/

imgタグでいうと、先程のHTML Living StandardのAccessibility Considerationsの項目にはalt属性の話が書かれていたので、今回はWCAGの「Success Criterion 1.1.1 Non-text Content」を見てみます。

Web Content Accessibility Guidelines (WCAG) 2.2
Web Content Accessibility Guidelines (WCAG) 2.2 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.

chrome_56rzi5vaf3

右上に四角で囲われているリンク先から、具体的に理解するためのページに飛ぶことができるようになっています。
順に見ていきましょう。
「Understanding Non-text Content」をクリックすると、以下のWCAG 2.2 Understanding Docsというものに飛びます。このサイトではWCAGをより理解するのを手助けするために、W3Cが出している文章です。

Understanding Success Criterion 1.1.1: Non-text Content | WAI | W3C

追加情報や具体例、指標を満たすための技術的な手法、間違えられやすい失敗例なども紹介されています。
chrome_2honub4yzm

次に「How to Meet Non-text Content」をクリックすると、同じくW3Cが出している、How to Meet WCAGというクイックリファレンスに飛びます。

How to Meet WCAG (Quickref Reference)

内容としては上のUnderstanding Docsとほぼ同じなので、全体を眺めやすくしたものなのだと理解しました(間違ってたら教えてほしいです)。

chrome_igxrqxfesf

ちなみに、WAI-ARIAの規格みたいなものもあって、1.3の草案が↓から読めます。

Accessible Rich Internet Applications (WAI-ARIA) 1.3
Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive technologies in document-level markup. This version adds features new since WAI-ARIA 1.1 [wai-aria-1.1] to improve interoperability with assistive technologies to form a more consistent accessibility model for [HTML] and [SVG2]. This specification complements both [HTML] and [SVG2].

パフォーマンス

HTML Living Standardでloading属性などパフォーマンスの話が出ていました。パフォーマンスについてはWCAGのようなガイドラインは僕は知らないのですが(何かあれば教えてほしいです)、2023/11/1にweb.devで新しくパフォーマンスのラーニングコースが出たらしいというのと、MDNにもパフォーマンスのページがあるので、そのあたりを見てみるといいかもしれません(時間の都合によりあんまり読めてないので省略)。

Learn Performance | web.dev
This course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance.
Core Web Vitals | web.dev
マルチメディア: 画像 - ウェブ開発を学ぶ | MDN
画像や動画といったメディアは、平均的なウェブサイトでダウンロード量の 70% 以上を占めています。ダウンロードのパフォーマンスという観点からは、メディアを減らし、ファイルサイズを縮小することは、低いハードルであると言えます。この記事では、ウェブパフォーマンスを向上させるために画像や動画を最適化することについて見ていきます。

next/image

僕は普段サークルのプロダクトではVue.jsを書いていますが、それ以外ではNext.jsを書いているので、最後にnext/imageについて見ていきます。
next/imageはNext.js 13になったタイミングでそこそこ大きな変更(alt属性が必須になったりobjectFit属性がなくなったり)が入った記憶がありますが、最新のドキュメントはおそらくこれです。

Optimizing: Images | Next.js
Optimize your images with the built-in `next/image` component.
Components: <Image> | Next.js
Optimize Images in your Next.js Application using the built-in `next/image` Component.

next/imageではパフォーマンスを最適化するために色々と工夫がされているのですが、大体ここらへんが大きく影響してそうです。

また、上で書いたようにalt属性が必須になり、a11yへの配慮もできるようになっています。

まとめ

普段の開発ではどうしても気になるとき以外はあんまり仕様書とかまで読まないで雰囲気でやっている部分があるのですが、やっぱり仕様書までいくとちゃんと理解できそうだなーという気持ちになりました(まだ理解できてない部分はあるけど)。WCAGのUnderstanding Docsは今回初めて見つけたものなので、今度もうちょっとじっくり読んでみたいなと思いました。

あと、画像は全部英語で貼ってますけど実際は日本語に翻訳して全体を眺めてから読みたいところを見つけてから英語で読んでる感じにしてるので、読みたい部分を探すところから英語のままできるようになりたいです。

今日の担当はcat-crosswalkのみなさんです、明日の担当はいろりくんとノクナートンくんです、お楽しみにー

mehm8128 icon
この記事を書いた人
mehm8128

21B JC。SysAd班で色々やってます

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2023年12月11日
DIGI-CON HACKATHON 2023『Mikage』
toshi00 icon toshi00
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2024年6月21日
ハッカソン参加記 4班"Slide Center"
Alt--er icon Alt--er
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
2024年4月14日
Spotifyのクライアントを自作しよう
d_etteiu8383 icon d_etteiu8383
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記