Testen Sie Ihre Fähigkeiten: HTML-Zugänglichkeit

Ziel dieses Fähigkeitstests ist es, Ihnen zu helfen, zu beurteilen, ob Sie unseren Artikel HTML: A good basis for accessibility verstanden haben.

Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Anleitung zum Testen Ihrer Fähigkeiten. Sie können sich auch über einen unserer Kommunikationskanäle an uns wenden.

HTML-Zugänglichkeit 1

In dieser Aufgabe prüfen wir Ihr Verständnis von semantischem HTML und warum es gut für die Zugänglichkeit ist. Der gegebene Text ist ein Informationsfeld mit Aktionsschaltflächen, aber das HTML ist wirklich schlecht.

Um die Aufgabe abzuschließen, aktualisieren Sie das Markup, um geeignetes semantisches HTML zu verwenden. Sie müssen sich nicht allzu sehr darum kümmern, das exakt gleiche Erscheinungsbild und die gleiche Textgröße zu reproduzieren, solange die Semantik stimmt.

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

* {
  box-sizing: border-box;
}

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;
}

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges HTML sollte ungefähr so aussehen:

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>

Zusätzliche Punkte für:

Nur <button> verwenden, nicht <button class="button"> (wiederholten Semantik ist nicht notwendig), und den CSS-Selektor aktualisieren, um sicherzustellen, dass die Schaltfläche die Stile beibehält.
Eine ungeordnete Liste verwenden, nicht eine geordnete Liste — die Liste der Gegenstände muss eigentlich nicht in einer bestimmten Reihenfolge sein.

HTML-Zugänglichkeit 2

In der zweiten Aufgabe haben Sie ein Formular mit drei Eingabefeldern.

Um die Aufgabe abzuschließen:

Verknüpfen Sie semantisch die Eingaben mit ihren Labels.
Gehen Sie davon aus, dass diese Eingaben Teil eines größeren Formulars sein werden, und umschließen Sie sie mit einem Element, das sie alle als eine einzige verwandte Gruppe zusammenbringt.
Geben Sie der Gruppe eine Beschreibung/Titel, die alle Informationen als persönliche Daten zusammenfasst.

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;
}

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges HTML sollte ungefähr so aussehen:

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-Zugänglichkeit 3

In dieser Aufgabe müssen Sie alle Informationslinks im Absatz in gute, zugängliche Links verwandeln.

Die ersten beiden Links führen zu regulären Webseiten.
Der dritte Link führt zu einem PDF und ist groß - 8MB.
Der vierte Link führt zu einem Word-Dokument, daher benötigt der Benutzer eine Anwendung, die damit umgehen kann.

Um die Aufgabe abzuschließen, aktualisieren Sie die Links entsprechend den obigen Beschreibungen.

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>

Hinweis: Die Links im Ausgangscode haben das Attribut target="_blank" gesetzt, sodass sie, wenn Sie darauf klicken, versuchen, die verlinkten Seiten in einem neuen Tab und nicht im selben Tab zu öffnen. Dies ist nicht unbedingt eine Best Practice, aber wir haben es hier gemacht, damit die Seiten nicht im MDN Playground-Ausgabeframe <iframe> geöffnet werden und Ihr Beispielcode dabei verloren geht!

Klicken Sie hier, um die Lösung anzuzeigen

Ihr fertiges HTML sollte ungefähr so aussehen:

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-Zugänglichkeit 4

In unserer letzten HTML-Zugänglichkeitsaufgabe wird Ihnen eine Bildergalerie gegeben, die einige Zugänglichkeitsprobleme aufweist. Können Sie sie beheben?

Das Kopfzeilenbild hat ein Zugänglichkeitsproblem und die Galeriebilder ebenfalls.
Sie könnten das Kopfzeilenbild weiter ausführen und es mit CSS für eine möglicherweise bessere Zugänglichkeit implementieren. Wie würden Sie eine solche Lösung erstellen?

Aktualisieren Sie den Code, um die oben beschriebenen Probleme zu beheben.

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;
}

Klicken Sie hier, um die Lösung anzuzeigen

Die Zugänglichkeitsprobleme sind:

Das Kopfzeilenbild ist dekorativ und benötigt daher keinen Alt-Text. Die beste Lösung, wenn Sie dekorative HTML-Bilder verwenden, besteht darin, alt="" zu setzen, sodass ein Screenreader einfach nichts vorliest - anstatt einer Beschreibung oder des Bilddateinamens. Es ist nicht Teil des Inhalts.
Die Galeriebilder benötigen Alt-Text, da sie Teil des Inhalts sind.

Das aktualisierte HTML könnte ungefähr so aussehen:

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>

Es wäre möglicherweise besser, das Hintergrund-Kopfzeilenbild mit CSS-Hintergrundbildern zu implementieren. Dazu würden Sie das erste <img>-Element aus dem Markup entfernen und eine Regel zum CSS hinzufügen, wie folgt:

css

h1 {
  background: url("https://mdn.github.io/shared-assets/images/examples/star-pink_32x32.png")
    no-repeat left;
  padding-left: 50px;
}

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden