【HTML】alt属性内の特殊記号・機種依存文字はどう書くのが正解？

はじめに

コードレビューをしていて、こんなコードを見かけました。
<img src="hoge" alt="Apple & Orange">

「むむむ？」
「&は特殊記号だからalt属性の中でも&って書くべきだよね？」

絶対的な自信を持って指摘ができなかったので
正解を知るためにいろいろ検証をしてみました！

検証端末はWindows10です。

検証

【1】ブラウザ上の表示

下記のようなテストHTMLを用意してブラウザで開きます。
故意に画像をリンク切れにして、altをテキストで表示させます。

test.html

<section class="box">
  <h1>記号&#58;アンパサンド&amp;</h1>

  <h2>参照なし</h2>
  <img src="fruit.png" alt="Apple & Orange">

  <h2>文字実体参照</h2>
  <img src="fruit.png" alt="Apple &amp; Orange">

  <h2>数値文字参照 10進数</h2>
  <img src="fruit.png" alt="Apple &#38; Orange">

  <h2>数値文字参照 16進数</h2>
  <img src="fruit.png" alt="Apple &#x26; Orange">
</section>

ブラウザでの表示はこのようになりました。

どの書き方でも&として表示されています
Chrome, Firefox, Edge, IE11どれも同じ表示となりました。

【2】デベロッパーツールの表示

【1】で用意したHTMLを、ブラウザのデベロッパーツールで開いてaltの中身を表示します。
デベロッパーツールでの表示はこのようになりました。

どの書き方でも&として表示されています
Chrome, Firefox, Edge, IE11どれも同じ表示となりました。

【3】Windows10 ナレーターでの読み上げ

alt属性をつける最大の理由はスクリーンリーダー（音声読み上げソフト）対応のため。
実際にスクリーンリーダーで読み上げをさせてみます。

Windows10に標準搭載されている「ナレーター」を使って確認。

Apple & Orange
読み上げ 「あっぷるあんどおれんじ」

どの書き方でも「あんど」と読み上げてくれました！

しかし...

テストでいろいろな特殊記号・機種依存文字を読ませていたところ
50μはどの書き方でも 「ごじゅう」と読み上げられてしまい
「まいくろ」をスルーする結果に

（ナレーターは精度が低いって記事をチラ見したので「なるほど」と思いました）

【4】スクリーンリーダーでの読み上げ（NVDA）

違うスクリーンリーダーではどのような結果になるのか気になったので
「NVDA」というオープンソースのスクリーンリーダーを使って確認。

Apple & Orange
読み上げ 「あっぷるあんどおれんじ」

50μ
読み上げ 「ごじゅうまいくろ」

どの書き方でも「あんど」「まいくろ」を読み上げてくれました！！

結果

特殊記号・機種依存文字は、alt属性の中でも文字実体参照・数値文字参照で書くべき！！！