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

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

HTML Living Standard

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

HTML Standard

WHATWG

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

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

<img>: 画像埋め込み要素 - HTML: ハイパーテキストマークアップ言語 | MDN

<img> は HTML の要素で、文書に画像を埋め込みます。

MDN Web Docs

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

属するカテゴリ、どこで使えるか、子要素に何を入れられるか、属性(Attributes)は何をつけられるか、a11y的な考慮事項は何か、などですね。

この下に、各属性のより詳細な説明があります。

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

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

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

IDL (インターフェイス記述言語) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

IDL (Interface Description Language、インターフェイス記述言語) は、特定のプログラミング言語とは別にオブジェクトのインターフェイスを指定するために使用される汎用言語です。

MDN Web Docs

HTML要素 - Wikipedia

ウィキメディア財団Contributors to Wikimedia projects

次の「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%

東京工業大学デジタル創作同好会traPmehm8128

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.

W3CAlastair Campbell

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

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

W3C

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

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

How to Meet WCAG (Quickref Reference)

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

ちなみに、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].

W3CAdobe

パフォーマンス

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.

web.dev

Core Web Vitals | web.dev

web.dev

マルチメディア: 画像 - ウェブ開発を学ぶ | MDN

画像や動画といったメディアは、平均的なウェブサイトでダウンロード量の 70% 以上を占めています。ダウンロードのパフォーマンスという観点からは、メディアを減らし、ファイルサイズを縮小することは、低いハードルであると言えます。この記事では、ウェブパフォーマンスを向上させるために画像や動画を最適化することについて見ていきます。

MDN Web Docs

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.

Next.js

Components: <Image> | Next.js

Optimize Images in your Next.js Application using the built-in `next/image` Component.

Next.js

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

• WebP・Avifへの変換
  • 画像サイズを削減できます
• static importしたローカル画像はnext側でサイズを計算してくれるため、heightとwidthの明示的な指定が不要
  • 前まで必須だった気がするのですが、いつの間にか不要になっていたらしいです: https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images
  • heightとwidthは指定することによってCLSを防ぐことができます
• デフォルトでloading="lazy"、decoding="async"がつく
  • priorityというpropsを渡すことでloading="eager"にしたり、fetchpriority="high"(ちょっと前までpriority hintsって呼ばれてたもの)がつく
• キャッシュ
  • ここらへんに書いてありそうですがあんまり読めてないです: https://nextjs.org/docs/app/api-reference/components/image#caching-behavior
• なんか色んなサイズの画像を作ってくれてviewportの幅に対していい感じになるようにしてくれる
  • srcsetとかsizesとか色々あってよく分かってないです

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

まとめ

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

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

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