HTML 可訪問性 1
在本任務中，我們將測試您對語義 HTML 的理解，以及為什麼它對可訪問性有益。給定的文字是一個帶有操作按鈕的資訊面板，但 HTML 非常糟糕。
要完成任務，請更新標記以使用適當的語義 HTML。您不必過於擔心重現完全相同的外觀和文字大小，只要語義是好的即可。
html
<font size="7">Need help?</font> <br /><br />
If you have any problems with our products, our support center can offer you all
the help you need, whether you want:
<br /><br />
1. Advice choosing a new product
<br />
2. Tech support on an existing product
<br />
3. Refund and cancellation assistance
<br /><br />
<font size="5">Contact us now</font>
<br /><br />
Our help center contains live chat, email addresses, and phone numbers.
<br /><br />
<div class="button">Find Contact Details</div>
<br />
<font size="5">Find out answers</font>
<br /><br />
Our Forums section contains a large knowledge base of searchable previously
asked questions, and you can always ask a new question if you can't find the
answer you're looking for.
<br /><br />
<div class="button">Access Forums</div>
css
.button {
color: white;
background-color: blue;
border-radius: 10px;
width: 170px;
padding: 10px;
text-align: center;
}
點選此處顯示解決方案
您完成的 HTML 應該看起來像這樣
html
<h2>Need help?</h2>
<p>
If you have any problems with our products, our support center can offer you
all the help you need, whether you want:
</p>
<ul>
<li>Advice choosing a new product</li>
<li>Tech support on an existing product</li>
<li>Refund and cancellation assistance</li>
</ul>
<h3>Contact us now</h3>
<p>Our help center contains live chat, email addresses, and phone numbers.</p>
<button>Find Contact Details</button>
<h3>Find out answers</h3>
<p>
Our Forums section contains a large knowledge base of searchable previously
asked questions, and you can always ask a new question if you can't find the
answer you're looking for.
</p>
<button>Access forums</button>
加分項
- 僅使用
<button>，而不是<button class="button">（重複語義是不必要的），並更新 CSS 選擇器以確保按鈕仍然可以應用樣式。 - 使用無序列表，而不是有序列表——專案列表實際上不需要有任何順序。
HTML 可訪問性 2
在第二個任務中，您有一個包含三個輸入欄位的表單。
完成任務
- 將輸入欄位與其標籤進行語義關聯。
- 假設這些輸入欄位將成為一個更大的表單的一部分，並將它們包裝在一個元素中，將它們全部關聯為一個相關的組。
- 為該組提供一個描述/標題，概括所有資訊為個人資料。
html
<form>
<ul>
<li>
Name
<input type="text" name="name" />
</li>
<li>
Age
<input type="number" name="age" />
</li>
<li>
Email address
<input type="email" name="email" />
</li>
</ul>
</form>
css
form {
width: 400px;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
點選此處顯示解決方案
您完成的 HTML 應該看起來像這樣
html
<form>
<fieldset>
<legend>Personal data</legend>
<ul>
<li>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</li>
<li>
<label for="age">Age</label>
<input type="number" name="age" id="age" />
</li>
<li>
<label for="email">Email address</label>
<input type="email" name="email" id="email" />
</li>
</ul>
</fieldset>
</form>
HTML 可訪問性 3
在此任務中，您需要將段落中的所有資訊連結轉換為良好、可訪問的連結。
- 前兩個連結只是指向常規網頁。
- 第三個連結指向一個 PDF 檔案，而且很大——8MB。
- 第四個連結指向一個 Word 文件，因此使用者需要安裝某種可以處理該文件的應用程式。
要完成任務，請根據上述描述相應地更新連結。
html
<p>
For more information about our activities, check out our fundraising page
(<a href="/fundraising" target="_blank">click here</a>), education page
(<a href="/education" target="_blank">click here</a>), sponsorship pack
(<a href="/resources/sponsorship.pdf" target="_blank">click here</a>),
and assessment sheets
(<a href="/resources/assessments.docx" target="_blank">click here</a>).
</p>
注意：起始程式碼中的連結設定了 target="_blank" 屬性，因此當您單擊它們時，它們會嘗試在新標籤頁中開啟連結的頁面，而不是在同一個標籤頁中。這嚴格來說不是最佳實踐，但我們在這裡這樣做是為了讓頁面不會在 MDN Playground 的輸出 <iframe> 中開啟，從而使您的示例程式碼消失！
點選此處顯示解決方案
您完成的 HTML 應該看起來像這樣
html
<p>
For more information about our activities, check out our
<a href="/fundraising" target="_blank">fundraising page</a>,
<a href="/education" target="_blank">education page</a>,
<a href="/resources/sponsorship.pdf" target="_blank"
>sponsorship pack (PDF, 8MB)</a
>, and
<a href="/resources/assessments.docx" target="_blank"
>assessment sheets (Word document)</a
>.
</p>
HTML 可訪問性 4
在我們最後的 HTML 可訪問性任務中，您將看到一個影像庫，其中存在一些可訪問性問題。您能修復它們嗎？
- 標題圖片存在可訪問性問題，相簿圖片也存在。
- 您可以進一步改進標題圖片，並使用 CSS 來實現它，以獲得更好的可訪問性。您將如何建立這樣的解決方案？
更新程式碼以修復上述問題。
html
<header>
<img
src="https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png"
alt="A star that I use to decorate my page" />
<h1>Groovy images</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>
css
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;
}
點選此處顯示解決方案
可訪問性問題是
- 標題圖片是裝飾性的，因此不需要 alt 文字。使用裝飾性 HTML 圖片的最佳解決方案是設定
alt=""，這樣螢幕閱讀器就不會讀出任何內容——而不是描述或圖片檔名。它不是內容的一部分。 - 相簿圖片需要 alt 文字，並且它們是內容的一部分。
更新後的 HTML 可能看起來像這樣
html
<header>
<img
src="https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png"
alt="" />
<h1>Groovy images</h1>
</header>
<main>
<img
src="https://mdn.github.io/shared-assets/images/examples/ballon-portrait.jpg"
alt="a hot air balloon covered in a blue and while checked pattern" />
<img
src="https://mdn.github.io/shared-assets/images/examples/grapefruit-slice.jpg"
alt="A cross-section of the middle of a pink grapefruit" />
</main>
使用 CSS 背景圖片來實現標題背景圖片會更好。為此，您需要從標記中刪除第一個 <img> 元素，並向 CSS 新增如下規則：
css
h1 {
background: url("https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png")
no-repeat left;
padding-left: 50px;
}