Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown conversion for ru - Cleanup - Learning Area section #8537

Merged
merged 6 commits into from
Sep 29, 2022
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<p class="summary">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>

<table class="learn-box standard-table">
<table>
<tbody>
<tr>
<th scope="row">Prerequisites:</th>
Expand Down Expand Up @@ -50,44 +50,44 @@ <h3 id="Semantic_HTML">Semantic HTML</h3>
</ol>

<div class="note">
<p><strong>Note</strong>: You'll need to update the CSS rule selectors that style the <font> tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.</font></p>
<p><strong>Note</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>

<h3 id="The_images"><font>The images</font></h3>
<h3 id="The_images">The images</h3>

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

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

<ol>
<li><font>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?</font></li>
<li><font>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?</font></li>
<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>

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

<ol>
<li><font>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?</font></li>
<li><font>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.</font></li>
<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>

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

<p><font>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?</font></p>
<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>

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

<p><font>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?</font></p>
<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>

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

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

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

<p><font>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 </font><a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">discussion thread for this exercise</a><font>, 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!</font></p>
<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>

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

<h2 id="В_этом_модуле">В этом модуле</h2>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

<p class="summary">В CSS и JavaScript есть множество возможностей для создания доступных интерфейсов. Но это обоюдоострый клинок — при неосторожном обращении они могут доступности и значительно навредить. В этой статье мы рассмотрим лучшие практики в CSS и JavaScript, которые позволят даже сложному контенту оставаться доступным настолько, насколько это возможно.</p>

<table class="learn-box standard-table">
<table>
<tbody>
<tr>
<th scope="row">Необходимые знания:</th>
Expand Down
Loading