確認テスト: HTML のアクセシビリティ

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

<font size="7">お困りですか？</font> <br /><br />
弊社製品に関して何かお困りのことがございましたら、サポートセンターが以下のいずれのご要望にもお応えいたします。
<br /><br />
1. 新製品の選び方のアドバイス
<br />
2. 既存製品のテクニカルサポート
<br />
3. 返金およびキャンセルに関するご案内
<br /><br />
<font size="5">お問い合わせください</font>
<br /><br />
ヘルプセンターでは、ライブチャット、メールアドレス、電話番号をご利用いただけます。
<br /><br />
<div class="button">連絡先を参照</div>
<br />
<font size="5">答えを探す</font>
<br /><br />
「フォーラム」コーナーには、検索可能な過去の質問が多数掲載されたナレッジベースが用意されています。もしお探しの答えが見つからない場合は、いつでも新しい質問を投稿することができます。
<br /><br />
<div class="button">フォーラムへアクセス</div>

.button {
  color: white;
  background-color: blue;
  border-radius: 10px;
  width: 170px;
  padding: 10px;
  text-align: center;
}

<form>
  <ul>
    <li>
      名前
      <input type="text" name="name" />
    </li>
    <li>
      年齢
      <input type="number" name="age" />
    </li>
    <li>
      メールアドレス
      <input type="email" name="email" />
    </li>
  </ul>
</form>

form {
  width: 400px;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

<p>
  私たちの活動に関する詳細については、資金調達ページ（<a href="/fundraising" target="_blank">ここをクリック</a>）、教育ページ（<a href="/education" target="_blank">ここをクリック</a>）、スポンサーシップ・パック（<a href="/resources/sponsorship.pdf" target="_blank">ここをクリック</a>）、評価シート（<a href="/resources/assessments.docx" target="_blank">ここをクリック</a>）をご覧ください。
</p>

<header>
  <img
    src="https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png"
    alt="ページを飾るために使っている星" />
  <h1>素敵な画像</h1>
</header>
<main>
  <img
    src="https://mdn.github.io/shared-assets/images/examples/ballon-portrait.jpg" />
  <img
    src="https://mdn.github.io/shared-assets/images/examples/grapefruit-slice.jpg" />
</main>

body {
  width: 400px;
  margin: 0 auto;
}

main img {
  display: block;
  width: 250px;
  margin: 20px auto;
  box-shadow: 5px 5px 0 black;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}