Eメールは、HTML 形式で書かれたり、テキスト形式で書かれたりします。
Eメールにもアクセシビリティ観点で気をつけることはあるかと思い、少し調べてみたので、調べた結果を記載します。

調べる動機

ます、Eメールのアクセシビリティについて調べようと思った動機について記載します。

メールマガジン や、ニュースレター への興味

圏外編集者 | 都築響一 | Kindle本 | 本 | Amazon を読んだ際に、都築響一さんが有料メールマガジンを知りました。
メルマガはスクロールして読めるのが良い という記載があり、確かにそれはそうだなと思って、なんとなく興味を持ったというのがあります。

また、ニュースレター　サービス Quartzが日本に上陸。世界を動かすニュースの定期購読が可能に。 | ユーザベース を読む機会があり、企業として有料ニュースレター、メールマガジンをメインのビジネスとしている企業があることを知ったことで、より興味を持ちました。

以下の参考記事に記載がありますが、GDPR が施行されたことが背景で、Webサービスがプライバシー重視になりそうで、
Web技術は使っているけれども、クローズドなメディアとしてのメールマガジン、ニュースレターは今後も一定の需要はあるようには思います。

動的メール (AMP For Email) のリリース

2019年に AMP Email - amp.dev がリリースされました。
HTML メールでは使用できなかった JavaScript や、Form 等の機能がAMPコンポーネントを使用することある程度使えるようになりました。

HTML メールでは実現できなかった入力フォームや、表示時に最新情報を取得するなども可能になるため、
メールマガジン 、ニュースレター等の再評価に拍車をかけそうに思います。

まとめる枠組み

Eメールのアクセシビリティのリンク集として、以下の観点でまとめてみました。

  • 受信側

    • メールクライアント

  • 送信側

    • アクセシビリティ 以前の対策
    • テキストメールのアクセシビリティ
    • HTML メールのアクセシビリティ
    • AMP For Email のアクセシビリティ

メールクライアントのアクセシビリティ

メールクライアントのアクセシビリティ についての文書リンクです。

アクセシビリティ 以前の対策

Eメールのアクセシビリティとして、以下のような内容は気にすべきかと思いました。

テキストメールのアクセシビリティ

テキストメールに関わる文書として以下見つけました。

HTML メールのアクセシビリティ

以下、HTMLメールのアクセシビリティ について記載された文書のリンクになります。

email-guidelines は記載内容全てがアクセシビリティに関連する項目ではありません。
個人的にアクセシビリティに関連すると思った項目を抜粋します。

email-guidelines のアクセシビリティ 関連項目

  • Lang
    ウェブベースの メールクライアント は html タグにlang 属性を付与しても削除してしまうことが多いため、
    bodyタグ内の、ブロック要素にlang 属性　を付与することでスクリーンリーダーに、確実に使用言語を伝えることができます。 

    <!DOCTYPE html>
<html lang="jp">
  <head></head>
  <body>
    <div lang="jp">
    </div>
  </body>
</html>

  • 構造化タグの使用
    HTML5 の構造化タグ<header>, <main>, <footer>, <article> や <section> は、GmailやOutlookなどの主要な電子メールクライアントでサポートされていません。
    指定したい要素の対応するimplicit ARIA roleを使用する必要があります。 

    <!-- 悪い例 -->
<header>
  <h1>Lorem ipsum</h1>
</header>

<!-- 良い例 -->
<div role="banner">
  <h1>Lorem ipsum</h1>
</div>

  • テーブルのレイアウト
    HTMLメールでは、テーブルレイアウトが多用されます。
    レイアウト調整のために使用する tableタグには、role="presentation" を付与することで、tableタグとしての意味合いを無くすことができます。
    またrole="presentation"はメールクライアントによって削除される可能性があるため、
    Outlookの条件付きコメントにのみプレゼンテーションテーブルを含めて、タグを記載します。 

    <!--[if mso]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td>
<![endif]-->
<div>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

AMP For Email のアクセシビリティ

AMP For Email については、アクセシビリティ に関する記事は見つけられませんでした。

HTML メールの制作に関連する文書リンク

以下、HTML メールの制作に関するリンク集です。

参考

その他、参考にした記事になります。

以上です。

コメント

カテゴリー

最近の投稿