Skip to content

Commit

Permalink
convert to markdown for two sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@yin1999
yin1999 committed Jul 6, 2022
1 parent 45f4d6e commit dcdde27
Show file tree
Hide file tree
Showing 26 changed files with 2,846 additions and 3,216 deletions.
119 changes: 56 additions & 63 deletions files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,99 +3,92 @@ title: 'Assessment: Accessibility troubleshooting'
slug: learn/Accessibility/Accessibility_troubleshooting
translation_of: Learn/Accessibility/Accessibility_troubleshooting
---
<div>{{LearnSidebar}}</div>
{{LearnSidebar}}{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div>

<p>In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.</p>
In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.

<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">先决条件：</th>
<td>基础的计算机知识，对 HTML,CSS 和 JavaScript 有基础的理解，理解<a href="/zh-CN/docs/Learn/Accessibility">本课程的前期内容</a>。</td>
</tr>
<tr>
<th scope="row">目标：</th>
<td>理解可访问性的基础知识。</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row">先决条件：</th>
<td>
基础的计算机知识，对 HTML,CSS 和 JavaScript 有基础的理解，理解<a
href="/zh-CN/docs/Learn/Accessibility"
>本课程的前期内容</a
>。
</td>
</tr>
<tr>
<th scope="row">目标：</th>
<td>理解可访问性的基础知识。</td>
</tr>
</tbody>
</table>

<h2 id="开始之前">开始之前</h2>
## 开始之前

<p>To get this assessment started, you should go and grab the <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP containing the files that comprise the example</a>. Decompress the contents into a new directory somewhere on your local computer.</p>
To get this assessment started, you should go and grab the [ZIP containing the files that comprise the example](https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true). Decompress the contents into a new directory somewhere on your local computer.

<p>The finished assessment site should look like so:</p>
The finished assessment site should look like so:

<p><img src="assessment-site-finished.png"></p>
![](assessment-site-finished.png)

<p>You will see some differences/issues with the display of the starting state of the assessment — this is mainly due to the differences in the markup, which in turn cause some styling issues as the CSS is not applied properly. Don't worry — you'll be fixing these problems in the upcoming sections!</p>
You will see some differences/issues with the display of the starting state of the assessment — this is mainly due to the differences in the markup, which in turn cause some styling issues as the CSS is not applied properly. Don't worry — you'll be fixing these problems in the upcoming sections!

<h2 id="项目简要">项目简要</h2>
## 项目简要

<p>For this project, you are presented with a fictional nature site displaying a "factual" article about bears. As it stands, it has a number of accessibility issues — your task is to explore the existing site and fix them to the best of your abilities, answering the questions given below.</p>
For this project, you are presented with a fictional nature site displaying a "factual" article about bears. As it stands, it has a number of accessibility issues — your task is to explore the existing site and fix them to the best of your abilities, answering the questions given below.

<h3 id="颜色">颜色</h3>
### 颜色

<p>The text is difficult to read because of the current color scheme. Can you do a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors?</p>
The text is difficult to read because of the current color scheme. Can you do a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors?

<h3 id="Semantic_HTML">Semantic HTML</h3>
### Semantic HTML

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

<div class="note">
<p><strong>备注：</strong> You'll need to update the CSS rule selectors that style the tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.</p>
</div>
> **备注：** You'll need to update the CSS rule selectors that style the tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.
<h3 id="The_images">The images</h3>
### The images

<p>The images are currently inaccessible to screenreader users. Can you fix this?</p>
The images are currently inaccessible to screenreader users. Can you fix this?

<h3 id="The_audio_player">The audio player </h3>
### The audio player

<ol>
<li>The <code>&lt;audio&gt;</code> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?</li>
<li>The <code>&lt;audio&gt;</code> 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?</li>
</ol>
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?

<h3 id="The_forms">The forms</h3>
### The forms

<ol>
<li>The <code>&lt;input&gt;</code> 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?</li>
<li>The two <code>&lt;input&gt;</code> 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.</li>
</ol>
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.

<h3 id="The_showhide_comment_control">The show/hide comment control</h3>
### The show/hide comment control

<p>The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?</p>
The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?

<h3 id="The_table">The table</h3>
### The table

<p>The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?</p>
The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?

<h3 id="Other_considerations">Other considerations?</h3>
### Other considerations?

<p>Can you list two more ideas for improvements that would make the website more accessible?</p>
Can you list two more ideas for improvements that would make the website more accessible?

<h2 id="Assessment">Assessment</h2>
## Assessment

<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">discussion thread for this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the [discussion thread for this exercise](https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691), or in the [#mdn](irc://irc.mozilla.org/mdn) IRC channel on [Mozilla IRC](https://wiki.mozilla.org/IRC). Try the exercise first — there is nothing to be gained by cheating!

<p>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p>
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

<h2 id="In_this_module">In this module</h2>
## In this module

<ul>
<li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
<li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
<li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
<li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
<li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
<li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
<li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
</ul>
- [What is accessibility?](/en-US/docs/Learn/Accessibility/What_is_accessibility)
- [HTML: A good basis for accessibility](/en-US/docs/Learn/Accessibility/HTML)
- [CSS and JavaScript accessibility best practices](/en-US/docs/Learn/Accessibility/CSS_and_JavaScript)
- [WAI-ARIA basics](/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
- [Accessible multimedia](/en-US/docs/Learn/Accessibility/Multimedia)
- [Mobile accessibility](/en-US/docs/Learn/Accessibility/Mobile)
- [Accessibility troubleshooting](/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting)
Loading

0 comments on commit dcdde27

Please sign in to comment.