Eメールは、
調べる 動機
ます、
メールマガジン や、 ニュースレター への 興味
圏外編集者 | 都築響一 | Kindle本 | 本 | Amazon を
メルマガは<wbr>スクロールして<wbr>読めるのが<wbr>良い
と
また、
以下の
Web技術は
- 参考
動的メール (AMP For Email) の リリース
2019年に
HTML メールでは
HTML メールでは
メールマガジン 、
まとめる 枠組み
Eメールの
受信側
- メールクライアント
送信側
- アクセシビリティ 以前の
対策 - テキストメールの
アクセシビリティ - HTML メールの
アクセシビリティ - AMP For Email の
アクセシビリティ
- アクセシビリティ 以前の
メールクライアントの アクセシビリティ
メールクライアントの
Outlook
- Outlook の
アクセシビリティに 関する サポート - Office サポート
Outlook のアクセシビリティ の サポート機能に 関する ページです。
- Outlook の
Thunderbird
- Thunderbird の
アクセシビリティ機能 | Thunderbird ヘルプ
Thunderbird のアクセシビリティ の サポート機能に 関する ページです。
- Thunderbird の
Mac の
メール
Mac のメールと して アクセシビリティ の ページは なかったので 関連しそうな ページの リンクを 貼って おきます。 - Macで
「アクセシビリティ」 環境設定を 設定する - Apple サポート
Mac のアクセシビリティ 環境設定に ついての 説明ページです。 - Macの
「メール」で メールを 読む - Apple サポート
Mac のメールの マニュアルページです。 - Macの
「メール」で メールを 読み上げる - Apple サポート
Mac のメールクライアントで メールを 読み上げる ための オペレーションに 関して 記載が あります。
- Macで
アクセシビリティ 以前の 対策
Eメールの
ダブルオプトイン
Eメールアドレスの認証を 確認に する ために、 一度確認メールを 送付して その メールの 確認URLの クリックを 持って、 メールアドレスの 認証を 確認と する 手法です。 IPレピュテーション メール送信サーバーの
IPアドレスに 対する 外部からの 評価です。
送信者側は直接コントロールできず、 メール送信内容や、 SPF、 DKIM、 DMARC等の 設定の 結果が 間接的に 影響します。 ドメインレピュテーション
メール送信ドメインに対する 外部からの 評価です。
送信者側は直接コントロールできず、 メール送信内容や、 SPF、 DKIM、 DMARC等の 設定の 結果が 間接的に 影響します。 SPF、
DKIM、 DMARC
SPF はIPアドレスに よる ドメイン認証、 DKIMは 電子署名に より ドメイン認証です。
DMARC は、SPF、 DKIMの 認証失敗時の メール受信時の 振る 舞いと、 レポート送信先の メールアドレスを 指定できます。 multipart/alternative
による マルチパートメール送信
AMP For Email に対応していない メールクライアント、 HTMLメールの 表示に 対応していない クライアント、 許可していない クライアントが あり、
この場合1形式のみでは、 ユーザーは メール本文を 読むことができません。
電子メールはContent-Typeヘッダに multipart/alternative
を指定する ことで メール本文を 複数持つ メールを 作成する ことができます。 メールの
購読停止を 簡単に 行えるようにする、 メールの 受信設定を わかりやすくする
Gmail 一括送信ガイドライン
に記載されている List-Unsubscribe-Post
、List-Unsubscribe
を指定すると、 ユーザーに 購読解除リンクを 表示する ことができます。
この辺りは、 Webサービス上で、 送付する トランザクションメールは サービスを 使用する 上で 必須の メールも 多いので 気に する ことは ないかもしれません。
マーケティングツールではこの機能に 対する 実装が あり、 自動で 購読解除まで 実施してくれる ツールも あります。
Webサービスで、メールの 受信設定画面が ある 場合は、 その ページへの リンクが 記載されていますが、 購読解除したい 人が すぐに できるよう 設計して おく 必要が あるかと 思います。
テキストメールの アクセシビリティ
テキストメールに
- メールと
アクセシビリティ - 有限会社時代工房
スクリーンリーダーがテキストを 読み上げる 際に 適切な 改行、 スペースが 必要な ケースが あり、 実際に スクリーンリーダーで 読まれ方を 確認するのが 良いのかと 思いました。
HTML メールの アクセシビリティ
以下、
wilbertheinen/accessible-email-documentation: A list of great articles about accessibility in email
アクセシブルなEmail に 関連する 記事や、 Podcastなどの リンク集です。 rodriguezcommaj/accessible-emails: Some accessible HTML emails, naturally.
アクセシビリティを意識した HTML メールの テンプレート Home - accessible-email.org HTML メールの
マークアップが アクセシブルかを チェックする ツール。 “アクセシビリティ” の
高い メールを デザインする ための 3原則 | SendGridブログ SendGrid の アクセシビリティ に 関連する 記事です。 情報が
伝わる HTMLメールを 目指しませんか ? | コラム | ミツエーリンクス ミツエーリンクス の HTML メールの アクセシビリティ に 関する 記事です。 Design best practices - Stacks
Stackoverflow のEmail ガイドラインで、 アクセシビリティ 関連の 説明が あります。 hteumeuleu/email-guidelines: Coding principles for HTML emails.
Email のコーディングガイドラインが まとめられた 文書です。
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 メールの 制作に 関連する 文書リンク
以下、
TedGoas/Cerberus: A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.
Stackoverflow の中の 人が 作っている フリーの HTML メールテンプレート 2017年の
HTMLメールを 取り 巻く 環境と モダン開発 | Tips Note by TAM
2017年時点でのHTML メールを 取り 巻く 環境と、 gulp で HTML メールの 作成の 作成を 省力化する 方法が 記載されています。 HTMLメール作成で
調べた ことまとめ - Qiita
HTMLメールに 関するまとめ 記事です。やはりgulp を 使ってます。 HTMLメールの
テスト工数を 短縮する - ZOZO Technologies TECH BLOG
HTML メールのテストサービスに 関する 記事です。
参考
その他、
- メールマガジン - Wikipedia
- Google Developers Japan: AMP を
使って メールの 未来を 構築する - 【AMP for email】
本番環境での AMPメール送信の 道のりは 遠い?|C-NAPS
以上です。
コメント