Assessment: Accessibility troubleshooting

初始點(diǎn)

要開始進(jìn)行此評(píng)估，您應(yīng)該訪問 ZIP，其中包含構(gòu)成示例的文件。 將內(nèi)容解壓縮到本地計(jì)算機(jī)上某處的新目錄。

完成的評(píng)估網(wǎng)站應(yīng)如下所示:

height:457px; margin:0px auto; width:800px;">

您將看到與評(píng)估的開始狀態(tài)的顯示有一些差異/問題 - 這主要是由于標(biāo)記的差異，這又導(dǎo)致一些造型問題，因?yàn)镃SS未正確應(yīng)用。 不要擔(dān)心，你會(huì)在下一節(jié)中解決這些問題！

工程概要

對(duì)于這個(gè)項(xiàng)目，你會(huì)看到一個(gè)虛構(gòu)的自然網(wǎng)站，顯示一個(gè)關(guān)于熊的"事實(shí)"文章。 就像它，它有一些無障礙的問題 - 你的任務(wù)是探索現(xiàn)有的網(wǎng)站，并解決他們的最好的能力，回答下面的問題。

顏色

由于當(dāng)前的顏色方案，文本難以閱讀。 你可以測(cè)試當(dāng)前的顏色對(duì)比(文本/背景)，報(bào)告測(cè)試的結(jié)果，然后通過更改指定的顏色修復(fù)它？

語義HTML

1. The content is still not very accessible — report on what happens when you try to navigate it using a screenreader.
2. Can you update the article text to make it easier for screenreader users to navigate?
3. The navigation menu part of the site (wrapped in <div class="nav"></div>) could be made more accessible by putting it in a proper HTML5 semantic element. Which one should it be updated to? Make the update.

圖像

屏幕閱讀器用戶目前無法訪問這些圖片。 你能修這個(gè)嗎？

音頻播放器

1. The <audio> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?
2. The <audio> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?

形式

1. The <input> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?
2. The two <input> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.

顯示/隱藏注釋控件

顯示/隱藏注釋控制按鈕不是當(dāng)前鍵盤可訪問的。 你可以讓鍵盤可以訪問，無論是在使用tab鍵進(jìn)行聚焦還是使用返回鍵激活它？

桌子

數(shù)據(jù)表當(dāng)前不是很容易訪問 - 對(duì)于screenreader用戶來說，很難將數(shù)據(jù)行和列關(guān)聯(lián)在一起，而且該表也沒有類型的摘要來清楚顯示什么。 你能添加一些功能到你的HTML來解決這個(gè)問題嗎？

其他考慮？

你能列出兩個(gè)更多的想法的改進(jìn)，將使網(wǎng)站更容易訪問？

評(píng)定

如果您作為有組織課程的一部分參加此評(píng)估，您應(yīng)該能夠?qū)⒛墓ぷ鹘唤o您的老師/導(dǎo)師進(jìn)行標(biāo)記。 如果您是自學(xué)習(xí)的，那么您可以輕松地通過 dev-mdc 郵件列表，或者在 #mdn IRC頻道中。 org / IRC"class ="external"> Mozilla IRC 。 嘗試練習(xí)第一 - 沒有什么可以通過作弊獲得！