Was sind die größten Hürden auf Homepages für blinde Menschen?

Diese Frage ist für den Themenbereich "Fragen an eine blinde Person" - ich selbst betreibe mehrere Homepages und dort gibt es verschiedene Bereiche: einfache Texte, man kann QR-Codes fürs Handy oder digitale Visitenkarten (sogenannte vCards) erstellen, man kann Musik hören und über ein Kontaktformular mit mir Kontakt aufnehmen.

Nun frage ich als sehender Webmaster mich natürlich:

Was sind für jemanden mit Sehbeeinträchtigung eigentlich die größten Hürden auf vielen Homepages?

Um mal Beispiele zu nennen:

  • Mich kann man über ein Kontaktformular erreichen. Um SPAM zu vermeiden, muss man hierzu eine einfache Frage beantworten (ein Captcha im klassischen Sinne gibt es aber nicht).
  • Auf einer anderen Homepage habe ich eine E-Mail Adresse per Javascript eingeblendet, diese kann man aber auch durch Klick auf einen Link als Audiodatei diktiert bekommen. Nun frage ich mich: funktioniert so etwas in der Praxis bzw. wird z.B. so eine Diktierfunktion von Menschen mit Sehbeeinträchtigung überhaupt benutzt? Gibt's da Besseres außer spambot-freundlich die Mail-Adresse einfach im Klartext hinzuschreiben?
  • Im Musik-Bereich habe ich die von den meisten Browsern unterstützte Medienwiedergabe verwendet in einer Tabelle von Songs, die man sich anhören kann. Als sehender Benutzer würde ich einfach auf den Play-Button des Browsers klicken - aber wie muss ich mir das bei blinden Menschen vorstellen, gibt's da auch sowas? Oder sollte ich sowas anders lösen?

Und gibt es noch andere Dinge, die viele Webmaster mit vermutlich sogar recht wenig Aufwand ändern könnten um blinden Benutzern das Leben zu erleichtern? (anders formuliert: Wenn du als jemand mit Sehbeeinträchtigung dir von Webmastern etwas wünschen könntest, was wäre das?)

Homepage, Webseite
JS Taschenrechner, Dezimal in Binär und andersherum auch?

Hallo Zusammen,
ich bin seit knapp 3 Wochen in meiner Ausbildung und sollte einen Taschenrechner programmieren, was bis jetzt auch geklappt hat. Nun habe ich eine neue Aufgabe dazu bekommen, nämlich mit 2 Radio Buttons mir jeweils anzeigen zu lassen: Binär und Dezimal.
Ich bin absolut hilflos und freue mich über mögliche Lösungen und HIlfe. Danke im voraus.

<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Taschenrechner No. 3</title>
      <script>
         let aktuellesErgebnis = 0;
         let modus;
         let aktuelleZahl;
         function AddLetter(zahl)
         {
         if(modus == null) 
         {
         document.getElementById("textboxDisplay").value = zahl;
         modus = "Nummern";
         }
         else
         {
         document.getElementById("textboxDisplay").value += zahl;
         }
         }
         function Plus()
         {
         Hilfe();
         document.getElementById("textboxDisplay").value = "";
         modus = "Plus";
         }
         function Minus()
         {
         Hilfe();
         document.getElementById("textboxDisplay").value = "";
         modus = "Minus";
         }
         function Mal()
         {
         Hilfe();
         document.getElementById("textboxDisplay").value = "";
         modus = "Mal"
         }
         function Geteilt()
         {
         Hilfe();
         document.getElementById("textboxDisplay").value = "";
         modus = "Geteilt"
         }
         function Restwert()
         {
         Hilfe();
         document.getElementById("textboxDisplay").value = "";
         modus = "Modulo"
         }
         function Gleich()
         {
         Hilfe();
         document.getElementById("textboxDisplay").value = aktuellesErgebnis;
         modus = null;
         }
         function Hilfe()
         {
         aktuelleZahl = Number(document.getElementById("textboxDisplay").value);
         if(modus == "Plus")
         {
         aktuellesErgebnis += aktuelleZahl;
         }
         if(modus == "Minus")
         {
         aktuellesErgebnis -= aktuelleZahl;
         }
         if(modus == "Mal")
         {
         aktuellesErgebnis *= aktuelleZahl;
         }
         if(modus == "Geteilt")
         {
         aktuellesErgebnis /= aktuelleZahl;
         }
         if(modus == "Modulo")
         {
         aktuellesErgebnis %= aktuelleZahl;
         }
         if(modus == null || modus == "Nummern")
         {
         aktuellesErgebnis = aktuelleZahl;
         }
         }
         function Weg()
         {
         document.getElementById("textboxDisplay").value = "";
         aktuellesErgebnis = 0;
         modus = null;
         }
      </script>
   </head>
   <body>
      <input type="radio" name="Umrechnung" value="Binär" />
      <input type="radio" name="Umrechnung" value="Dezimal" />
      <input id="textboxDisplay" readonly />
      <input type="button" value="1" onclick="AddLetter('1')" />
      <input type="button" value="2" onclick="AddLetter('2')" />
      <input type="button" value="3" onclick="AddLetter('3')" />
      <input type="button" value="4" onclick="AddLetter('4')" />
      <input type="button" value="5" onclick="AddLetter('5')" />
      <input type="button" value="6" onclick="AddLetter('6')" />
      <input type="button" value="7" onclick="AddLetter('7')" />
      <input type="button" value="8" onclick="AddLetter('8')" />
      <input type="button" value="9" onclick="AddLetter('9')" />
      <input type="button" value="0" onclick="AddLetter('0')" />
      <input type="button" value="+" onclick="Plus()" />
      <input type="button" value="-" onclick="Minus()" />
      <input type="button" value="*" onclick="Mal()" />
      <input type="button" value="/" onclick="Geteilt()" />
      <input type="button" value="Mod" onclick="Restwert()" />
      <input type="button" value="Löschen" onclick="Weg()" />
      <input type="button" value="=" onclick="Gleich()" />
   </body>
</html>
HTML, Webseite, JavaScript, Code, Programmiersprache
Richtige Formatierung bei HTML und CSS?

Ich habe eine Frage. Ich arbeite gerade als Anfänger an einer Website und habe folgendes Problem.

So sieht die Website eigentlich aus :

So sieht sie aus nach der ersten Skalierung mit responsive Webdesign (wo nach alles richtig ist.):

Doch wenn ich ein weiteres mal skalieren möchte passiert folgender Fehler (Es soll so wie auf dem zweiten Bild aussehen nur kleiner):

HTML: <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" type="text/css">
  <title>ToDo List</title>
</head>
<body>
  <header class="site-header">
    <form action="action_page.php" method="post">
      <input type="text" id="todo-box" name="box-input" placeholder="Aufgabe eingeben" required maxlength="50" class="todo-input">
      <input type="reset" class="todo-reset todo-reset-submit">
      <input type="submit" class="todo-submit" class="todo-reset-submit">
    </form>
  </header>
  <nav class="site-nav">
  </nav>
  <main class="site-main">
    <h2>ToDo</h2>
    <p class="todo-point">Müll rausbringen</p>
    <p class="todo-point">Zimmer aufräumen</p>
    <p class="todo-point">12345678901234567890123456789012345678901234567890</p>
  </main>
  <footer class="site-footer">
  </footer>
</body>
</html>
CSS: .site-header
{
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: 20px;
}
.todo-input
{
  font-size: 20px;
  width: 180px;
  padding-left: 5px;
}
.todo-input::placeholder
{
  color: black;
}
.todo-reset, .todo-submit
{
  width: 150px;
  font-size: 20px;
  border: none;
  cursor: pointer;
}
.todo-input, .todo-reset, .todo-submit
{
  border-radius: 5px;
  background-color: rgb(251, 255, 0);
  border: none;
  height: 45px;
  transition: background-color 0.3s;
}
.todo-input:hover, .todo-reset:hover, .todo-submit:hover
{
  background-color: rgb(213, 216, 13);
}
.site-main
{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
}
.site-footer
{
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
p.todo-point
{
  margin: 3px 0;
  padding: 2px;
  border: 1mm solid black;
  border-radius: 10px;
}
@media (max-width: 520px)
{
  .todo-input
  {
    width: 480px;
    margin: 0 5px 5px 5px;
  }
  .todo-reset, .todo-submit
  {
    width: 240px;
    margin: 0 0 4px 4px;
  }
  p.todo-point
  {
    font-size: 19px;
  }
}
@media (max-width: 500px)
{
  .site-header
  {
    justify-self: unset;
  }
  .todo-input
  {
    display: flex;
    justify-content: center;
    width: 400px;
    margin: 0 5px 5px 5px;
  }
  .todo-reset-sumbit
  {
    display: flex;
    justify-content: center;
    width: 200px;
    margin: 0 0 4px 4px;
  }
}
Bild zum Beitrag
HTML, Webseite, CSS, Webdesign, Webentwicklung, Visual Studio Code

Meistgelesene Beiträge zum Thema Webseite