Barrierefreie Quiz App programmieren – Anleitung

Ich in diesem Blogartikel erkläre ich wie Sie mit HTML, CSS und Javascript eine barrierefreie progressive Quiz App programmieren können.

Multiple Choice Quiz – Was ist das?

Kennen Sie die Fernsehsendungen „Wer wird Millionär?“, „Gefragt – Gejagt“ oder „Quizduell – Der Olymp“. In diesen Fernsehsendungen wird eine Frage gestellt und es gibt 3 oder 4 Antwortmöglichkeiten. Diese Art von Quiz nennt sich Multiple Choice Quiz. In diesem Blogartikel erkläre ich Ihnen wie Sie einen barrierefreien Multiple Choice Quiz mit HTML, CSS und Javascript programmieren können. Für Entwickler die Grundkenntnisse in der Programmiersprache Javascript besitzen, ist es sehr einfach mehrere Quiz-Apps mit unterschiedlichen Themen zu programmieren.

Was ist ein barrierefreies Quiz?

Ein barrierefreies Quiz ist ein Quiz dass auch von Menschen mit unterschiedlichen körperlichen Einschränkungen und Behinderung genutzt werden kann. In diesem Blogartikel wird gezeigt wie ein barrierefreies Quiz mit HTML, CSS und JavaScript programmiert wird.

Ziel des Blogartikels

Das Ziel des Blogartikels ist es, Ihnen eine Anleitung zu geben, mit der Sie sehr schnell barrierefreie progressive Quiz Apps selbst programmieren können mit unterschiedlichen Themen und unterschiedlichen Aussehen. Los geht es! So sieht die App aus die wir jetzt gemeinsam programmieren:

Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android
Die barrierefreie App Marlems Quiz gestartet auf einem Smartphone mit Betriebssystem Android

Die Entwicklungsumgebung um progressive Web Apps zu programmieren

Entwicklungsumgebung ist ein Programm, das Entwicklern hilft, Computerprogramme zu schreiben. Ich benutze Visual Studio Code um barrierefreie progressive Web Apps zu programmieren. Visual Studio Code ist barrierefrei und kann somit auch von blinden Menschen genutzt werden. Visual Studio Code können Sie hier kostenlos herunterladen: Download Visual Studio Code

Wichtiger Hinweis!

Um den barrierefreien Quiz programmieren zu können, müssen Sie nicht extra Visual Studio Code installieren, wenn Sie es noch nicht gemacht haben. Im Abschnitt „Die barrierefreie Quiz-App zusammenbauen“ nutzen wir den Texteditor von Windows!

Achja, App ist die Abkürzung von Application oder auf Deutsch Applikation.

Barrierefreie Quiz App – HTML

Hier kommt das HTML unserer barrierefreien Quiz-App. Ich werde nur die Sachen erklären die mit der Barrierefreiheit der Quiz App zu tun haben. Wenn Sie allgemeine Fragen zu HTML, CSS oder Javascript haben, fragen Sie die Künstliche Intelligenz ChatGPT! 90% aller Programmierprobleme löse ich auch mit ChatGPT! Was ich natürlich auch erkläre, wie Sie aus Ihrer barrierefreien Web-Anwendung eine progressive Web App machen.


<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Marlems Quiz</title>
	<meta name="Description" Content="Marlems Quiz - Barrierefrei raten">
	<meta name="robots" content="index">
	<link rel="stylesheet" href="style.css">
	<link rel="manifest" href="manifest.webmanifest">
        <link rel="icon" sizes="200x200" href="marlemsquiz200.png"> 
        <link rel="apple-touch-icon" sizes="120x120" href="marlemsquiz120.png"> 
        <link rel="apple-touch-icon" sizes="152x152" href="marlemsquiz152.png"> 
        <link rel="apple-touch-icon" sizes="180x180" href="marlemsquiz180.png"> 
    <meta name="theme-color" content="#00ccff">
</head>

<body>
	<div id="app-container">
		<div id="grid-container">
		<button id="btn-start" aria-label="Quiz starten">START</button>
		<div id="bertwertung-antwort"></div>
		<button id="btn-weiter" aria-label="Nächste Aufgabe">WEITER</button>
		</div>
			<div id="frage"></div>
			<button id="a1" class="antwort" aria-label="Antwort 1"></button>
			<button id="a2" class="antwort" aria-label="Antwort 2"></button>
			<button id="a3" class="antwort" aria-label="Antwort 3"></button>	

			<div id="einstellungen">
				<label for="automatisch-weiter" accesskey="a"><span class="buchstabeUnterstrichen">A</span>utomatisch zur n&auml;chsten Frage</label>
				<input type="checkbox" id="automatisch-weiter" name="automatischWeiter" value="automatischWeiter">
			</div>
	</div>
	
	<script src="mquiz.js" defer></script>
	<script>
		if ('serviceWorker' in navigator) {
		navigator.serviceWorker.register('sw.js').then(function(reg) {
		// Registrierung erfolgreich
		console.log('Registrierung erfolgreich.');
		}).catch(function(error) {
		// Registrierung fehlgeschlagen
		console.log('Registrierung fehlgeschlagen mit ' + error);
		});
		};
		</script>
</body>
</html>

Die HTML-Datei heißt bei mir „index.html“.

Barrierefreiheit im HTML

Folgende 2 Kriterien der Barrierefreiheit werden im HTML umgesetzt:

Schaltflächen sind auf Computer und Laptops per Tabulatortaste erreichbar

Schaltflächen sind auf Computer und Laptops per Tabulatortaste erreichbar. Eine progressive Web App kann auf Computern und Laptops im Browser ausgeführt oder installiert werden. Wenn eine Person blind ist, hat sie keine Möglichkeit, den Mauszeiger gezielt an eine bestimmte Position zu bewegen. Blinde Personen können keine Computermaus bedienen. Deshalb ist es wichtig, dass Schaltflächen oder andere Bedienelemente per Tabulatortaste erreichbar sind. Da in der Quiz-Application die Schaltflächen mit dem HTML-Button-Tag programmiert werden, muss kein zusätzlicher Code eingebaut werden, um die Erreichbarkeit per Tabulatortaste sicherzustellen.

Schaltflächen benötigen einen Beschreibungstext für Screenreader

Blinde Menschen lassen sich alles vorlesen, was auf dem Bildschirm oder Display angezeigt wird. Diese Vorlesefunktion heißt „Screenreader“. Die bekanntesten Screenreader heißen: Sprachausgabe, NVDA, Jaws, Orca, Talkback und VoiveOver. Damit blinde Menschen wissen, was passiert, wenn Sie auf eine Schaltfläche klicken benötigt jede Schaltfläche einen Beschreibungstext. Dieser wird mit dem Attribut aria-label gesetzt.

Beispielcode für barrierefreie Schaltflächen

Hier der HTML-Code für barrierefreie Schaltflächen:


<button id="btn-start" aria-label="Quiz starten">START</button>
<button id="btn-weiter" aria-label="Nächste Aufgabe">WEITER</button>

Barrierefreie Quiz App – CSS

CSS, ausgeschrieben Cascading Style Sheet, wird dazu verwendet das Aussehen der HTML-Tags zu bestimmten. Bei einer progressive Web App ist es wichtig, dass sie auf unterschiedlichen Display-Größen immer gleich gut aussieht. Diese Eigenschaft nennt sich „responsive Webdesign“. Die Umsetzung von responsive Webdesign wird auch mit CSS gemacht. Hier der Komplette CSS-Code der barrierefreien Quiz-App:


:root {
  --white: #ECECEC;
  --button-bg: #0000FF;
  --button-font-disabled: #629AFF;
}

* {
  box-sizing: border-box;
}
html{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
  Arial, sans-serif, "Apple Color Emoij", "Segoe UI Emoji","Segoe UI Symbol";
}

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font-size: 1.3em;
}

#app-container {
  max-width: 96vw;
  overflow: hidden;
  margin: 1rem auto;
}

#grid-container {
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  grid-template-rows: 4.5em;
  gap: 0 10px;
  grid-template-areas: "btnStart bertwertungantwort btnWeiter";
}

#grid-container .btnStart {
  grid-area: btnStart;
}

#grid-container .bertwertungantwort {
  grid-area: bertwertungantwort;
}

#grid-container .btnWeiter {
  grid-area: btnWeiter;
}

#frage {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: solid black 3px;
  border-radius: 10px;
  padding: 10px;
  margin: 5px 0 2px 0;
}

.antworten {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.antwort {
  width: 100%;
  overflow: hidden;
  background-color: var(--button-bg);
  color: var(--white);
  border: solid rgb(0, 0, 0) 0px;
  padding: 1rem;
  margin: 0px;
  margin-bottom: 3px;
  font-size: 1.3em;
  text-align: left;
}

button {
  display: grid;
  place-items: left;
  color: var(--white);
  background-color: var(--button-bg);
  padding: 0px;
  margin: 0px;
  font-size: 1.3em;
}

button[disabled] {
  background-color: var(--button-bg);
  color: var(--button-font-disabled);
}


#btn-start, #btn-weiter {
  display: flex;
  align-items: center;
  justify-content: center;
}


#bertwertung-antwort {
  overflow: hidden;
  color: rgb(0, 0, 0);
  border: solid rgb(0, 0, 0) 1px;
  border-radius: 10px;
  padding: 5px;
  margin: 0px;
  margin-top: 5px;
}

#einstellungen {
  display: flex;
  align-items: center;
  padding: 5px;
  margin: 0px;
  background-color: white;
}

#automatisch-weiter {
  transform: scale(3);
  margin: 20px 20px 20px 20px;
}

.buchstabeUnterstrichen {
  text-decoration: underline;
}

/*        M E D I A  Q U E R I E S  */

@media screen and (min-width: 280px) and (min-height: 653px) {
  #grid-container {
    grid-template-rows: 7.5em;
  } 
}

@media screen and (min-width: 320px) and (min-height: 658px) {
  #grid-container {
    grid-template-rows: 9.0em;
  } 
}

@media screen and (min-width: 360px) and (min-height: 640px) {
  #grid-container {
    grid-template-rows: 7.6em;
  } 
}

@media screen and (min-width: 768px) and (min-height: 1024px) {
  #grid-container {
    grid-template-rows: 4.5em;
  } 
}

@media screen and (min-width: 1280px) and (min-height: 800px) {
  #grid-container {
    grid-template-rows: 4.5em;
  } 
}

/* Barrierefreiheit */
.antwort:focus,
#btn-start:focus,
#btn-weiter:focus {
  background-color: yellow;
  color: black;
}

@media screen and (forced-colors: active) {
  
  button, .antwort {
    border: 3px solid white;
  }

  .antwort:focus,
  #btn-start:focus,
  #btn-weiter:focus {
    border: 7px solid white;
    transition: border-width 0.2s, background-color 0.2s, color 0.2s; 
  }
}

Die CSS-Datei heißt bei mir „style.css“.

Barrierefreiheit im CSS

In diesem Abschnitt erkläre ich welche Kriterien der Barrierefreiheit im CSS umgesetzt wurde.

Schriftgröße relative angeben, damit sie angepasst werden kann

Für Menschen mit einer Sehbehinderung ist es wichtig, dass die Schriftgröße einer progressive Web App vergrößert, im Fachchinesisch „gezoomt“ werden kann. Das zoomen funktioniert, wenn Sie die progressive Web App im Browser Google Chrome ausführen oder wenn Sie die Application installieren.


body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font-size: 1.3em;
}

Die Schriftgröße wird in der Einheit em angegeben. EM ist eine relative Einheit und deswegen kann die Schriftgröße vergrößert werden.

Das aktive Bedienelement muss gut erkennbar sein

Für Menschen mit einer Sehbehinderung ist es wichtig, dass sie gut erkennen können, welches Bedienelement das aktive ist. Im Fachchinesisch: Welches Bedienelement den Fokus hat. Meine Lieblingsmethode um dieses Ziel zu erreichen ist, dass ich dem aktiven Bedienelement eine Gelbe Hintergrundfarbe zuweise. Hier der entsprechende CSS-Code:


.antwort:focus,
#btn-start:focus,
#btn-weiter:focus {
  background-color: yellow;
  color: black;
}

Barrierefreier Farbkontrast

Für Menschen mit Farbfehlsichtigkeit ist es wichtig, dass genügend Farbkontrast zwischen Schrift und Hintergrundfarbe vorhanden ist. Den Farbkontrast auf Barrierefreiheit testen können Sie mit der kostenlosen Software „Colour Contrast Analyzer (CCA)“ . In der Quiz App wurden alle Farbkontraste mit dem Colour Contrast Analyzer (CCA) auf Barrierefreiheit überprüft. Spannend ist folgendes: Die Schaltflächen besitzen eine weise Schrift und einen blauen Hintergrund. Wenn eine Schaltfläche den Fokus erhält, die aktive Schaltfläche ist, hätte sie eine weise Schriftfarbe und eine Gelbe Hintergrundfarbe. Der Farbkontrast zwischen weis und gelb wäre zu gering. Deswegen sorge ich mit folgender CSS-Anweisung, dass der Schaltfläche eine schwarze Schriftfarbe und eine Gelbe Hintergrundfarbe zu gewiesen wird.


.antwort:focus,
#btn-start:focus,
#btn-weiter:focus {
  background-color: yellow;
  color: black;
}

Abfrage des Kontrast-Designs

Im Betriebssystem Windows können Kontrast-Designs eingestellt werden:
Einstellungen -> Barrierefreiheit -> Kontrast-Designs. Menschen mit Sehbehinderung und Menschen mit einer Farbfehlsichtigkeit nutzen solch ein Kontrast-Design. Wenn ein Kontrast-Design aktive ist, kann es sein, dass Schaltflächen oder Rahmen die zur optischen Orientierung dienen nicht mehr erkennbar sind. Das führt dazu, dass die progressive Web Application nicht bedienbar ist. Cool ist, dass es mit CSS möglich ist, Kontrast-Designs abzufragen und danach Anpassungen zu machen, die dafür sorgen, dass die App auch bei aktiven Kontrast-Designs bedienbar ist. Hier der CSS-Code:


@media screen and (forced-colors: active) {
  
  button, .antwort {
    border: 3px solid white;
  }

  .antwort:focus,
  #btn-start:focus,
  #btn-weiter:focus {
    border: 7px solid white;
    transition: border-width 0.2s, background-color 0.2s, color 0.2s; 
  }
}

Barrierefreie Quiz App – Javascript

Hier der komplette Javascript-Code:


const btnStart = document.getElementById("btn-start");
const btnWeiter = document.getElementById("btn-weiter");
const anzBewertungAntwort = document.getElementById("bertwertung-antwort");
const btnAntwort1 = document.getElementById("a1");
const btnAntwort2 = document.getElementById("a2");
const btnAntwort3 = document.getElementById("a3");
const antwortButtons = [btnAntwort1, btnAntwort2, btnAntwort3];
const chbboxAutomatischWeiter = document.getElementById("automatisch-weiter");
const mobileNeinJa = "ontouchstart" in document.documentElement;

let aktuelleFrageIndex = 0; // Starten Sie mit der ersten Frage
let falschBeantworteteFragen = 0; // Zählen Sie die falsch beantworteten Fragen
let antwortgegeben = false;

let frageMitAntworten = [
  {
    frage:
      "Mit welcher Programmiersprache wurde dieses barrierefreie Quiz programmiert?",
    antworten: [
      "Java", //Index 0
      "Javascript", // Index 1
      "Python", //Index 2
    ],
    richtigeAntwort: 1,
  },
  {
    frage: "Eine App ist barrierefrei, wenn ",
    antworten: [
      "Die App für Menschen mit körperlichen Einschränkungen gut zu bedienen ist", // Die richtige Antwort
      "Die App für Kinder gut zu bedienen ist",
      "Die App für Senioren gut zu bedienen ist",
    ],
    richtigeAntwort: 0,
  },
  // Fügen Sie hier weitere Fragen hinzu
];

// Eventlistener für den Start-Button
btnStart.addEventListener("click", startQuiz);
btnStart.addEventListener("keydown", function (event) {
  if (event.key === "Enter") {
    startQuiz(); // Der Index der Antwort 1 ist 0
  }
});

// Eventlistener für den WEITER-Schalter
btnWeiter.addEventListener("click", zurNaechstenFrage);

btnWeiter.addEventListener("keydown", function (event) {
  if (event.key === "Enter") {
    zurNaechstenFrage(); // Der Index der Antwort 1 ist 0
  }
});

antwortButtons.forEach((button, index) => {
  button.addEventListener("click", function () {
    if (!antwortgegeben) {
      ueberpruefeAntwort(index);
      antwortgegeben = true;
      antwortButtonsDeaktiveren();
    }
  });

  button.addEventListener("keydown", function (event) {
    if (event.key === "Enter") {
      ueberpruefeAntwort(index);
    }
  });
});

document.addEventListener("keydown", function (event) {
  if (event.key === "s") {
    startQuiz();
  } else if (event.key === "w") {
    zurNaechstenFrage();
  } else if (parseInt(event.key)) {
    let keyNumber = parseInt(event.key);
    if (keyNumber > 3) {
      anzBewertungAntwort.style.color = "white";
      anzBewertungAntwort.style.backgroundColor = "red";
      anzBewertungAntwort.innerHTML = "Nur Zahlen 1-3 sind erlaubt!";
      anzBewertungAntwort.ariaLabel = "Nur Zahlen 1-3 sind erlaubt!";
    } else {
      ueberpruefeAntwort(keyNumber - 1);
    }
  } else if (event.altKey || event.key === "Tab" || event.code === "Space") {
  } else {
    anzBewertungAntwort.style.color = "white";
    anzBewertungAntwort.style.backgroundColor = "red";
    anzBewertungAntwort.innerHTML = "Tastaturkürzel sind nur s und w!";
    anzBewertungAntwort.ariaLabel = "Tastaturkürzel sind nur s und w!";
  }
});

// Funktion, um die erste Frage anzuzeigen
function startQuiz() {
  aktuelleFrageIndex = 0;
  falschBeantworteteFragen = 0;
  antwortButtonsAktiveren();
  weiterButtonAktiveren();
  frageAnzeigen(frageMitAntworten[aktuelleFrageIndex]);
  anzBewertungAntwort.textContent = "";
  anzBewertungAntwort.style.backgroundColor = "white";

  btnStart.textContent = mobileNeinJa ? "Start" : "Start (S)";
  btnWeiter.textContent = mobileNeinJa ? "Weiter" : "Weiter (W)";
  
}


// Initial anzeigen der ersten Frage
startQuiz();

// Funktion zur Überprüfung der Antwort
function ueberpruefeAntwort(antwortIndex) {
  antwortButtonsDeaktiveren();
  let aktuelleFrage = frageMitAntworten[aktuelleFrageIndex];

  if (antwortIndex === aktuelleFrage.richtigeAntwort) {
    anzBewertungAntwort.textContent = "Richtig!";
    anzBewertungAntwort.style.color = "black";
    anzBewertungAntwort.style.backgroundColor = "#10ae3d";
  } else {
    anzBewertungAntwort.textContent =
      "Falsch! Richtig: " +
      aktuelleFrage.antworten[aktuelleFrage.richtigeAntwort];
    anzBewertungAntwort.style.color = "white";
    anzBewertungAntwort.style.backgroundColor = "red";
    falschBeantworteteFragen++; // Erhöhen Sie die Anzahl der falsch beantworteten Fragen
  }

  if (chbboxAutomatischWeiter.checked) {
    window.setTimeout(function () {
      antwortButtons.forEach((btn) => (btn.style.backgroundColor = "blue"));
      btnWeiter.focus();
      zurNaechstenFrage();
    }, 2000);
  }
}

// Funktion, um zur nächsten Frage zu wechseln
function zurNaechstenFrage() {
  antwortgegeben = false;
  aktuelleFrageIndex++; // Erhöhen Sie den Index, um zur nächsten Frage zu gelangen

  // Überprüfen Sie, ob es noch Fragen gibt
  if (aktuelleFrageIndex < frageMitAntworten.length) {
    // Rufen Sie die frageAnzeigen-Funktion mit der nächsten Frage auf
    antwortButtonsAktiveren();
    frageAnzeigen(frageMitAntworten[aktuelleFrageIndex]);
  } else {
    // Zeigen Sie eine Nachricht mit den Ergebnissen an, wenn alle Fragen beantwortet wurden
    zeigeErgebnisse();
  }
}

// Funktion zum Anzeigen der Ergebnisse
function zeigeErgebnisse() {
  anzBewertungAntwort.style.color = "black";
  anzBewertungAntwort.style.backgroundColor = "white";

  let anzahlFragen = frageMitAntworten.length;
  let richtigBeantworteteFragen = anzahlFragen - falschBeantworteteFragen;
  let ergebnisText = `${anzahlFragen} Fragen. ${falschBeantworteteFragen} falsch beantwortet.`;
  anzBewertungAntwort.innerHTML = ergebnisText;
  weiterButtonDeaktiveren();
}

function antwortButtonsDeaktiveren() {
  antwortButtons.forEach((btn) => btn.setAttribute("disabled", "disabled"));
}

function antwortButtonsAktiveren() {
  antwortButtons.forEach((btn) => btn.removeAttribute("disabled"));
}

function weiterButtonDeaktiveren() {
  btnWeiter.setAttribute("disabled", "");
}

function weiterButtonAktiveren() {
  btnWeiter.removeAttribute("disabled");
}

// Funktion, um eine Frage und die möglichen Antworten anzuzeigen
function frageAnzeigen(frageMitAntworten) {
  anzBewertungAntwort.textContent = "";
  anzBewertungAntwort.style.backgroundColor = "white";
  document.getElementById("frage").textContent = frageMitAntworten.frage;
  document.getElementById("frage").ariaLabel = frageMitAntworten.frage;

  frageMitAntworten.antworten.forEach((antwort, index) => {
    const buttonText = mobileNeinJa ? antwort : `${antwort} (${index + 1})`;
    antwortButtons[index].textContent = buttonText;
    antwortButtons[index].ariaLabel = buttonText;
  });
}

Meine Javascript-Datei heißt: „mquiz.js“ .

Barrierefreiheit im Javascript

In diesem Abschnitt erkläre ich welche Kriterien der Barrierefreiheit in Javascript umgesetzt wurde.

Screenreadertauglichkeit

Bei der Quiz-Application werden die Beschriftungen von Schaltflächen und anzeigen von Meldungen dynamisch erzeugt. Damit Screenreader dies lesen können müssen diese Texte zusätzlich mit dem Attribut ariaLabel gesetzt werden: Javascript-Codestelle 1:


  anzBewertungAntwort.innerHTML = "Nur Zahlen 1-3 sind erlaubt!";
  anzBewertungAntwort.ariaLabel = "Nur Zahlen 1-3 sind erlaubt!";

Javascript-Codestelle 2:


  anzBewertungAntwort.innerHTML = "Tastaturkürzel sind nur s und w!";
  anzBewertungAntwort.ariaLabel = "Tastaturkürzel sind nur s und w!";

Javascript-Codestelle 3:


  document.getElementById("frage").textContent = frageMitAntworten.frage;
  document.getElementById("frage").ariaLabel = frageMitAntworten.frage;

Javascript-Codestelle 4:


    antwortButtons[index].textContent = buttonText;
    antwortButtons[index].ariaLabel = buttonText;

Tastaturbedienbarkeit auf PC und Laptop

Eine progressive Web App kann auf PCs und Laptops ausgeführt werden. Hier ist es für blinde und sehbehinderte Menschen geschickt, wenn wichtige App-Funktionen per Tastenkürzel ausführbar sind.

Funktion Taste
Start s
Weiter w
Antwort 1 1
Antwort 2 2
Antwort 3 3

Tastaturkürzel festlegen


document.addEventListener("keydown", function (event) {
  if (event.key === "s") {
    startQuiz();
  } else if (event.key === "w") {
    zurNaechstenFrage();
  } else if (parseInt(event.key)) {
    let keyNumber = parseInt(event.key);
    if (keyNumber > 3) {
      anzBewertungAntwort.style.color = "white";
      anzBewertungAntwort.style.backgroundColor = "red";
      anzBewertungAntwort.innerHTML = "Nur Zahlen 1-3 sind erlaubt!";
    } else {
      ueberpruefeAntwort(keyNumber - 1);
    }
  } else if (event.altKey || event.key === "Tab" || event.code === "Space") {
  } else {
    anzBewertungAntwort.style.color = "white";
    anzBewertungAntwort.style.backgroundColor = "red";
    anzBewertungAntwort.innerHTML = "Tastaturkürzel sind nur s und w!";
  }
});

Erklärung

Um in Javascript Tastenkürzel zu definieren wird das Keydown-Ereignis des Dokumentes verwendet. In event.key wird gespeichert welche Taste gedrückt wurde. Die Leertaste (=Space) muss mit event.code abgefragt werden.

Tastaturkürzel in der App-Oberfläche anzeigen

Damit der App-Nutzer weiß, welche Tastenkürzel in der Application hinterlegt sind, muss dafür gesorgt werden, dass die Tastenkürzel auf der App-Oberfläche dargestellt werden. Dies erledigt folgender Javascript-Code. In der function startQuiz():


  btnStart.textContent = mobileNeinJa ? "Start" : "Start (S)";
  btnWeiter.textContent = mobileNeinJa ? "Weiter" : "Weiter (W)";

In der function frageAnzeigen(frageMitAntworten):


frageMitAntworten.antworten.forEach((antwort, index) => {
    const buttonText = mobileNeinJa ? antwort : `${antwort} (${index + 1})`;
    antwortButtons[index].textContent = buttonText;
  });

Tastaturkürzel nur auf PC und Laptop anzeigen

Progressive Web Apps können auf Computer / Laptops und Mobilgeräte eingesetzt werden. Auf Mobilgeräte (Smartphone, Iphone, Tablet, Ipad) können keine Tastenkürzel angewandt werden, auf Computer / Laptops schon. Deswegen muss im Javascript-Code dafür gesorgt werden, dass die Tastaturkürzel nur angezeigt werden, wenn die progressive Web App auf einem Computer oder Laptop gestartet wird. Das Abfragen auf welchem Gerät die progressive Web App gestartet wurde wird gelöst mit folgendem Javascript-Code: Konstante deklarieren:


  const mobileNeinJa = "ontouchstart" in document.documentElement;

Code in function startQuiz():


  btnStart.textContent = mobileNeinJa ? "Start" : "Start (S)";
  btnWeiter.textContent = mobileNeinJa ? "Weiter" : "Weiter (W)";

Code in function frageAnzeigen(frageMitAntworten):


  frageMitAntworten.antworten.forEach((antwort, index) => {
    const buttonText = mobileNeinJa ? antwort : `${antwort} (${index + 1})`;
    antwortButtons[index].textContent = buttonText;
  });

Soweit zur Barrierefreiheit der Quiz-App.

Benutzerfreundlichkeit

Benutzerfreundlichkeit ist in Deutschland eher bekannt unter dem Begriff Usability. Usability bedeutet, dass die Bedienung der Application einfach ist und wenn der Anwender etwas falsch macht, dass er einen Hinweis bekommt was er falsch gemacht hat. Im Abschnitt Benutzerfreundlichkeit möchte ich 2 Sachen erklären:

  1. Das deaktivieren von Schaltflächen
  2. Der Hinweis, wenn ein Anwender eine Taste drückt für die kein Tastaturkürzel definiert ist

Das deaktivieren von Schaltflächen

Wenn im Quiz eine Frage (richtig oder falsch) beantwortet wurde, macht es keinen Sinn, dass der App-Anwender die Frage nochmals beantworten kann. Deswegen müssen die Antwort-Schaltflächen nach Beantwortung einer Frage deaktiviert werden. Wenn das Quiz zu Ende ist und dem Anwender mitgeteilt wurde wieviel Fragen es insgesamt waren und wieviel er davon falsch beantwortet hat, macht es keinen Sinn, dass der Anwender nochmals auf die Schaltfläche „Weiter“ klicken oder Tippen kann. Deswegen muss die Schaltfläche „Weiter“ deaktiviert wird werden. Dieses Deaktivieren von Schaltflächen gehört zur Usability. Um Schaltflächen deaktiviert dazustellen wird CSS-und Javascript-Code benötigt.

Schaltflächen deaktiviert darstellen – CSS

Um eine Schaltfläche deaktiviert darzustellen gibt es folgendes CSS: Deklarieren von CSS-Variablen:


:root {
  --white: #ECECEC;
  --button-bg: #0000FF;
  --button-font-disabled: #629AFF;
}

Hier kommt das CSS für die deaktivierten Schaltflächen:


button[disabled] {
  background-color: var(--button-bg);
  color: var(--button-font-disabled);
}

Schaltflächen deaktiviert darstellen – Javascript

Damit das deaktivieren der Schaltflächen ausgeführt wird, benötigen Sie folgende Javascript-Funktionen:


function antwortButtonsDeaktiveren() {
  antwortButtons.forEach((btn) => btn.setAttribute("disabled", ""));
}

function antwortButtonsAktiveren() {
  antwortButtons.forEach((btn) => btn.removeAttribute("disabled"));
}

function weiterButtonDeaktiveren() {
  btnWeiter.setAttribute("disabled", "");
}

function weiterButtonAktiveren() {
  btnWeiter.removeAttribute("disabled");
}

Barrierefreie Quiz App – Das Web-Manifest

Das Web-Manifest ist eine Textdatei im JSON-Format. Das Web-Manifest bestimmt das Aussehen der App:


{
  "lang": "de-DE",	
  "name": "Marlems Quiz - Barrierefrei raten",
  "short_name": "Marlems Quiz",
  "description": "Barrierefrei raten",
  "background_color": "#00ccff",
  "theme_color": "#00ccff",
  "display": "standalone",
  "orientation": "any",
  "scope": "/",
  "start_url": ".",
  "icons": [{
        "src": "marlemsquiz200.png",
        "type": "image/png",
        "sizes": "200x200",
        "purpose": "any maskable"},
        {
         "src": "marlemsquiz512.png",
         "type": "image/png",
         "sizes": "512x512",
         "purpose": "any maskable"}]
}
}

Die Datei für das Webmanifest heißt „manifest.webmanifest“.

  • „lang“: Dieser Eintrag gibt die Sprache der Anwendung an, in diesem Fall Deutsch (Deutschland).
  • „name“: Der Name der Anwendung, der auf dem Startbildschirm oder in der Taskleiste angezeigt wird. Hier ist es „Marlems Quiz – Barrierefrei raten“.
  • „short_name“: Dies ist ein kürzerer Name oder eine Abkürzung der Anwendung, die auf kleineren Bildschirmen oder in begrenzten Platzverhältnissen verwendet wird. Hier ist es „Marlems Quiz“.
  • „description“: Eine kurze Beschreibung der Anwendung, die oft zusammen mit dem Namen angezeigt wird. In diesem Fall beschreibt sie die Art der Anwendung, nämlich „Barrierefrei raten“.
  • „background_color“: Die Hintergrundfarbe der Anwendung. In diesem Fall ist sie als Hexadezimalcode „#00ccff“ für ein hellblaues Farbschema festgelegt.
  • „theme_color“: Die Hauptfarbe, die für das Design der Anwendung verwendet wird. Hier ist sie ebenfalls „#00ccff“, was auf ein konsistentes Farbschema hinweist.
  • „display“: Diese Einstellung legt fest, wie die Anwendung angezeigt wird. „standalone“ bedeutet, dass die Anwendung als eigenständige Applikation geöffnet wird und nicht im Browser-Fenster erscheint.
  • „orientation“: Dies gibt die erlaubten Bildschirmorientierungen für die Anwendung an. „any“ bedeutet, dass die Anwendung in jeder Orientierung genutzt werden kann (z.B., Hoch- oder Querformat).
  • „scope“: Dies definiert den Anwendungsbereich (Scope) der PWA. Hier ist er auf „/“ festgelegt, was bedeutet, dass die PWA auf der Hauptdomain des Servers verfügbar ist.
  • „start_url“: Die Start-URL oder der Einstiegspunkt der Anwendung. In diesem Fall zeigt der Punkt „.“ auf das Root-Verzeichnis der Anwendung.
  • „icons“: Dies ist ein Array von Symbolen oder Icons, die für die Anwendung verwendet werden. Jedes Icon enthält die folgenden Eigenschaften:
    • „src“: Der Pfad zum Icon-Bild.
    • „type“: Der Dateityp des Icons, hier „image/png“.
    • „sizes“: Die Größe des Icons in Pixeln.
    • „purpose“: Der Verwendungszweck des Icons. „any maskable“ bedeutet, dass das Icon für verschiedene Zwecke genutzt werden kann, einschließlich als App-Symbol.

App-Icon erstellen und einbinden

Damit auf jedem Betriebssystem in dem Sie eine progressive Web App installieren können ein App-Icon angezeigt wird, benötigen Sie 5 Bilddateien im png-Format. Die Bilddateien müssen folgende Größen haben:

  • 120×120
  • 152×152
  • 180×180
  • 200×200
  • 512×512

Ich habe folgende Bilddateien für App-Icons:

  • marlemsquiz120.png
  • marlemsquiz152.png
  • marlemsquiz180.png
  • marlemsquiz200.png
  • marlemsquiz512.png

Ein Teil der App-Icons müssen in die Datei index.html:


<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Marlems Quiz</title>
	<meta name="Description" Content="Marlems Quiz - Barrierefrei raten">
	<meta name="robots" content="index">
	<link rel="stylesheet" href="styles.css">
	<link rel="manifest" href="manifest.webmanifest">
        <link rel="icon" sizes="200x200" href="marlemsquiz200.png"> 
        <link rel="apple-touch-icon" sizes="120x120" href="marlemsquiz120.png"> 
        <link rel="apple-touch-icon" sizes="152x152" href="marlemsquiz152.png"> 
        <link rel="apple-touch-icon" sizes="180x180" href="marlemsquiz180.png"> 
    <meta name="theme-color" content="#00ccff">
</head>

Zwei App-Icons müssen in der Webmanifest:


{
  "icons": [{
        "src": "marlemsquiz200.png",
        "type": "image/png",
        "sizes": "200x200",
        "purpose": "any maskable"},
        {
         "src": "marlemsquiz512.png",
         "type": "image/png",
         "sizes": "512x512",
         "purpose": "any maskable"}]
}
}

Die barrierefreie Quiz-App zusammenbauen

Damit auch Menschen die nicht so fit in Web-Programmierung sind ein Erfolgserlebnis haben, erkläre ich hier wie die barrierefreie Quiz-App zusammenbauen. Anleitung für das Betriebssystem Windows: Um die Code-Dateien zu speichern benötigen Sie den Texteditor von Windows. Dieser heißt „notepad“. Öffnen Sie den Windows-Explorer und erstellen Sie einen Ordner Marlems-Quiz . Bewegen Sie sich im Blogartikel zur Überschrift „Barrierefreie Quiz App – HTML“. Markieren Sie mit der Computermaus den HTML-Code. Kopieren Sie den markierten HTML-Code mit der Tastenkombination Strg+c in die Zwischenablage. Öffnen Sie den Texteditor von Windows und fügen den HTML-Code mit der Tastenkombination Strg+v ein. Speichern Sie die Datei im Ordner Marlems-Quiz unter dem Namen index.html . Bewegen Sie sich im Blogartikel zur Überschrift „Barrierefreie Quiz App – CSS“. Markieren Sie mit der Computermaus den CSS-Code. Kopieren Sie den markierten CSS-Code mit der Tastenkombination Strg+c in die Zwischenablage. Öffnen Sie den Texteditor von Windows und fügen den CSS-Code mit der Tastenkombination Strg+v ein. Speichern Sie die Datei im Ordner Marlems-Quiz unter dem Namen style.css . Bewegen Sie sich im Blogartikel zur Überschrift „Barrierefreie Quiz App – Javascript“. Markieren Sie mit der Computermaus den Javascript -Code. Kopieren Sie den markierten Javascript -Code mit der Tastenkombination Strg+c in die Zwischenablage. Öffnen Sie den Texteditor von Windows und fügen den Javascript -Code mit der Tastenkombination Strg+v ein. Speichern Sie die Datei im Ordner Marlems-Quiz unter dem Namen mquiz.js . Bewegen Sie sich im Blogartikel zur Überschrift „Barrierefreie Quiz App – Das Web-Manifest“. Markieren Sie mit der Computermaus den JSON-Code. Kopieren Sie den markierten JSON-Code mit der Tastenkombination Strg+c in die Zwischenablage. Öffnen Sie den Texteditor von Windows und fügen den JSON-Code mit der Tastenkombination Strg+v ein. Speichern Sie die Datei im Ordner Marlems-Quiz unter dem Namen manifest.webmanifest . Die App-Icons benötigen Sie nicht um Ihre barrierefreie Quiz-App auf der Festplatte zu testen. Den Service Worker den wir im nächsten Abschnitt erstellen, benötigen Sie auch nicht um Ihre barrierefreie Quiz-App auf der Festplatte zu testen. Nachdem Sie obige Schritte erfolgreich umgesetzt haben machen Sie einen Doppelklick mit der Computermaus auf die Datei index.html und Sie können Ihre Quiz-App testen.

Service Worker erstellen

Der Service Worker sorgt dafür dass Ihre Quiz Applikation in unterschiedlichen Betriebssystemen installierbar ist und das Ihre Quiz Applikation auch genutzt werden kann, wenn Ihr Smartphone, Iphone, Tablet oder Ipad keine Verbindung zum Internet hat. So erstellen Sie einen Service Worker: Öffnen Sie im Betriebssystem Windows die Eingabeaufforderung. Sie heißt auch CMD. gehen Sie mit dem Befehl cd in den Ordner in dem Ihre gespeicherten Dateien sind. Beispiel


cd C:\Projekte\Apps\HTML\Marlems Quiz

Als erstes müssen Sie die Google Workbox installieren:


C:\Projekte\Apps\HTML\Marlems Quiz>npm install workbox-cli --global


C:\Projekte\Apps\HTML\Marlems Quiz>workbox wizard
? Please enter the path to the root of your web app: .
? Which file types would you like to precache? docx, html, webmanifest, png, js, css
? Where would you like your service worker file to be saved? sw.js
? Where would you like to save these configuration options? workbox-config.js
? Does your web app manifest include search parameter(s) in the 'start_url', other than 'utm_' or 'fbclid' (like '?source=pwa')? No
To build your service worker, run

  workbox generateSW workbox-config.js



C:\Projekte\Apps\HTML\Marlems Quiz>workbox generateSW workbox-config.js

Jetzt wurden 4 Dateien erstellt. Die Dateien heißen nicht immer gleich. Bei mir heißen Sie:

  • C:/Projekte/Apps/HTML/Marlems Quiz/sw.js
  • C:/Projekte/Apps/HTML/Marlems Quiz/sw.js.map
  • C:/Projekte/Apps/HTML/Marlems Quiz/workbox-d52b1230.js
  • C:/Projekte/Apps/HTML/Marlems Quiz/workbox-d52b1230.js.map

Damit der Service Worker registriert werden kann, muss folgender Code in die Datei index.html:

Wenn Sie den obigen HTML-Code markieren und kopieren, ist dieser Javascript-Code schon enthalten. Sie müssen also diesen Code nicht ein zweites Mal in die Datei index.html kopieren. Mir war nur wichtig Ihnen zu erklären, dass Sie nach dem Sie einen Service Worker erstellt haben, dafür sorgen müssen, dass der Service Worker in der Datei index.html registriert werden muss.

Die barrierefreie Quiz App validieren

Wir haben hart gearbeitet! Trotzdem sollten wir überprüfen ob wir alles richtig gemacht haben. Das machen wir mit Google Lighthouse. Gerne! Hier ist eine schrittweise Anleitung, wie du das Tool Google Lighthouse im Google Chrome-Browser öffnen kannst:

  • Starte den Browser Google Chrome
  • Öffnen Sie im Browser Google Chrome unsere Quiz App: Marlems Quiz
  • Öffnen Sie die Entwicklertools: Klicken Sie das Dreipunkt-Menüsymbol (?) in der oberen rechten Ecke des Chrome-Browserfensters. Wählen Sie „Weitere Tools“ aus dem Dropdown-Menü und dann „Entwicklertools“ oder drücke einfach die Tastenkombination `Strg+Shift+I` (Windows/Linux).
  • In den Entwicklertools öffnet sich ein neues Fenster oder eine Leiste am unteren oder rechten Rand des Bildschirms. Klicke auf die Registerkarte „Lighthouse“. Falls du die Lighthouse-Registerkarte nicht siehst, klicke auf das Menüsymbol „>>“ in den Entwicklertools und wähle „Lighthouse“ aus der Liste der verfügbaren Werkzeuge aus.

Sie sehen jetzt die Seite Lighthouse-Bericht erstellen. Achten Sie darauf, dass bei „Modus“ „Navigation (Standard)“ angehakt ist. Bei „Gerät“ muss „Mobil“ angehakt sein. Bei Kategorien sollten alle Optionen angehakt sein. Wenn das alles stimmt, klicken Sie auf die Schaltfläche „Seitenaufbau analysieren“. Google Lighthouse analysiert unsere Quiz-App.

Leistung Barrierefreiheit Best Practices SEO PWA
99 100 92 100 100

Dieses Ergebnis ist fast perfekt! Wir haben gute Arbeit gemacht! Hier ein Screenshot von Google Lighthouse:

Marlems Quiz validiert mit Google Lighthouse. Leistung: 99, Barrierefreiheit:100, Best Practices: 92, SEO: 100, PWA: Alles richtig
Pro Kategorie gibt es 100 Punkte. die barrierefreie progressive Web App „Marlems Quiz“ ist fast perfekt.

Die Quiz-App muss jetzt ins Web

Sie sollten jetzt in Ihrem App-Ordner auf der Festplatte folgende Dateien haben:

  • index.html
  • manifest.webmanifest
  • marlemsquiz.png
  • marlemsquiz120.png
  • marlemsquiz152.png
  • marlemsquiz180.png
  • marlemsquiz200.png
  • marlemsquiz512.png
  • mquiz.js
  • style.css
  • sw.js
  • sw.js.map
  • workbox-config.js
  • workbox-d52b1230.js
  • workbox-d52b1230.js.map

Die Dateien vom Service Worker können bei Ihnen anders heißen. Jetzt müssen die Dateien ins Internet.

Dateien per FTP ins Internet hochladen

Wenn Sie Web-Space (=Speicherplatz im Internet) haben, können Sie mit einer FTP-Software diese Dateien in ein Verzeichnis auf Ihrem Web-Space hochladen. Ich nutze die FTP-Software „FileZilla“. ich habe das gemacht, hier ist das Quiz das wir gerade gemeinsam programmiert haben: Marlems Quiz !

Netlify App

Öffnen Sie den Browser Ihrer Wahl und öffnen die Webseite Netlify App . Ziehen Sie mit der Computermaus den Ordner in dem die Dateien von Ihrer App gespeichert ist, per Drag & Drop auf die Webseite mit dem Kreis. Alternative können Sie auch den Link „browse to upload“ anklicken und so den Ordner hochladen. Es kann sein, dass das hochladen beim ersten Mal nicht klappt, dann versuchen Sie es erneut. Es ist wichtig, dass Sie im Browser kein Werbeblocker aktiviert haben, sonst klappt das hochladen des Ordners nicht. Wenn das hochladen funktioniert hat sehen Sie eine Erfolgsmeldung „Your Site is live“ und es wird eine Webadresse angezeigt über die Sie Ihre Web App erreichen können. Die Web Adresse können Sie auf Ihrem Smartphone, Iphone, Computer, Laptop, Ipad und Tablet öffnen.

Die Quiz-App installieren in unterschiedliche Betriebssysteme

Ich erkläre ich wie Sie die Quiz-App in unterschiedliche Betriebssysteme installieren können.

Die Quiz-App installieren im Betriebssystem Android

Hier eine Installationsanleitung für das Betriebssystem Android.

Menü mit Menüpunkt "App installieren" im die App "Marlems Quiz" auf dem Android Smartphone zu installieren
Menü mit Menüpunkt „App installieren“ im die App „Marlems Quiz“ auf dem Android Smartphone zu installieren
  1. Öffnen Sie den Google Chrome Browser auf Ihrem Android-Gerät
  2. Öffne die PWA-Website: www.marlem-software.de/MarlemsQuiz/
  3. Navigieren Sie auf der Website zur gewünschten PWA oder Webanwendung
  4. Nachdem Sie die PWA geöffnet haben, tippen Sie auf das Menüsymbol (drei vertikale Punkte) in der oberen rechten Ecke des Chrome-Browsers, um das Menü zu öffnen
  5. Im Dropdown-Menü sollte es eine Option geben, die „Zum Startbildschirm hinzufügen“ oder „App installieren“ heißt. Dies kann je nach Chrome-Version variieren
  6. Tippen Sie auf diese Option, um die PWA auf Ihrem Startbildschirm zu installieren
  7. Sie können den Namen der PWA anpassen, falls gewünscht, und dann auf „Hinzufügen“ oder „Installieren“ tippen, um die PWA auf Ihrem Startbildschirm zu platzieren
  8. Nach der Installation finden Sie die PWA wie jede andere App auf Ihrem Startbildschirm. Sie können sie öffnen, ohne den Browser zu öffnen

So sieht es aus, wenn die App in Android installiert ist:

Das App-Icon von der App "Marlems Quiz" im Betriebssystem Android
Das App-Icon von der App „Marlems Quiz“ im Betriebssystem Android

Die Quiz-App installieren im Betriebssystem Windows 11

Hier eine Installationsanleitung für das Betriebssystem Windows 11.

Die App "Marlems Quiz" installieren im Browser Google Chrome im Betriebssystem Windows 11
Die App „Marlems Quiz“ installieren im Browser Google Chrome im Betriebssystem Windows 11
  1. Starte Google Chrome: Stelle sicher, dass du Google Chrome auf deinem Windows 11-Computer installiert hast und öffne ihn, falls er noch nicht geöffnet ist.
  2. Öffne die PWA-Website: www.marlem-software.de/MarlemsQuiz/
  3. Öffne das Menü mit den drei Punkten: Klicke in der oberen rechten Ecke des Chrome-Fensters auf das Symbol mit den drei vertikalen Punkten (auch als „Hamburger-Menü“ bezeichnet), um das Chrome-Menü zu öffnen.
  4. Gehe zu „Marlems Quiz – Barrierefrei raten installieren …“
  5. Bestätige die Installation: Nachdem du auf „Installieren“ wird die App installiert.
  6. PWA öffnen: Nach der erfolgreichen Installation kannst du die PWA über das Startmenü von Windows 11 öffnen. Es gibt aber auch ein App-Icon auf dem Desktop.

Die Quiz-App installieren im Betriebssystem Ubuntu

Hier ist eine Installationsanleitung für das Betriebssystem Ubuntu.

Die barrierefreie App "Marlems Quiz" im Linux-Betriebssystem Ubuntu installieren
Die barrierefreie App „Marlems Quiz“ im Linux-Betriebssystem Ubuntu installieren
  1. Starte den Webbrowser Google Chrome, auf deinem Ubuntu-Computer installiert hast, und öffne ihn, falls er noch nicht geöffnet ist.
  2. Öffne die PWA-Website: Besuche die PWA-Website, indem du folgenden Link in die Adressleiste deines Browsers eingibst und die Seite aufrufst: www.marlem-software.de/MarlemsQuiz/
  3. Öffne das Browser-Menü: Klicke in der oberen rechten Ecke des Browser-Fensters auf das Symbol, das normalerweise als drei horizontalen Linien oder als Menü-Icon dargestellt wird, um das Browser-Menü zu öffnen.
  4. Wähle „App installieren…“ aus dem Menü.
  5. Bestätige die Installation: Nachdem du auf „App installieren…“ geklickt hast, wird die App installiert.
  6. PWA öffnen: Nach der erfolgreichen Installation kannst du die Progressive Web App über das Anwendungsmenü deines Ubuntu-Systems öffnen. Du findest sie unter den installierten Anwendungen.

Die Quiz-App installieren im Betriebssystem IOS

Hier die Installation der Quiz-App im Betriebssystem IOS:

Barrierefreie App Marlems Quiz im Apple-Betriebssystem IOS installieren
Barrierefreie App Marlems Quiz im Apple-Betriebssystem IOS installieren
  1. Öffne den Safari-Browser: Tippe auf das Safari-Symbol auf deinem iOS-Gerät, um den Safari-Browser zu öffnen.
  2. Öffne die PWA-Website: Besuche die PWA-Website, indem du folgenden Link in die Adressleiste deines Browsers eingibst und die Seite aufrufst: www.marlem-software.de/MarlemsQuiz/
  3. Öffne das Teilen-Menü: Tippe auf das Teilen-Symbol, das normalerweise als Quadrat mit einem Pfeil nach oben in der unteren Symbolleiste des Browsers dargestellt ist. Dies öffnet das Teilen-Menü.
  4. Wähle „Zum Home-Bildschirm hinzufügen“: Scrolle im Teilen-Menü nach unten und wähle die Option „Zum Home-Bildschirm hinzufügen“ oder „Zum Startbildschirm hinzufügen“.
  5. Bestätige die Installation: In einem Popup-Fenster kannst du den Namen der PWA anpassen, wenn gewünscht. Klicke anschließend auf „Hinzufügen“ oder „Fertig“, um die Quiz-App auf deinem Startbildschirm zu installieren.
  6. PWA öffnen: Nach der erfolgreichen Installation findest du das PWA-Symbol auf deinem Startbildschirm. Tippe auf das Symbol, um die Progressive Web App zu öffnen und zu verwenden.

Die Quiz App anpassen

Ich hoffe Sie sind so begeistert von meiner Quiz App, dass Sie Lust haben ihren eigene Quiz App zu programmieren. Für Leute die in Sachen CSS und Javascript nicht so fit sind, zeige ich in diesem Abschnitt wie es geht.

Die Fragen anpassen

Andere oder neue Fragen: Die Fragen und Antworten des Quiz werden in einem Array von Objekten gespeichert:


let frageMitAntworten = [
  {
    frage:
      "Mit welcher Programmiersprache wurde dieses barrierefreie Quiz programmiert?",
    antworten: [
      "Java", //Index 0
      "Javascript", // Index 1
      "Python", //Index 2
    ],
    richtigeAntwort: 1,
  },
  {
    frage: "Eine App ist barrierefrei, wenn ",
    antworten: [
      "Sie für behinderte Menschen gut zu bedienen ist", // Die richtige Antwort
      "Sie für Kinder gut zu bedienen ist",
      "Sie für Senioren gut zu bedienen ist",
    ],
    richtigeAntwort: 0,
  },
  // Fügen Sie hier weitere Fragen hinzu
];

Eine Frage ein Objekt:


{
    frage:
      "Mit welcher Programmiersprache wurde dieses barrierefreie Quiz programmiert?",
    antworten: [
      "Java", //Index 0
      "Javascript", // Index 1
      "Python", //Index 2
    ],
    richtigeAntwort: 1,
  },

Sie können die Texte der Frage und den möglichen Antworten anpassen. Bei richtigeAntwort müssen Sie angegeben welche Antwort die richtige ist. Wichtig: Der Index eines Javascript-Arrays beginnt mit 0. Wenn „Java“ die richtige Antwort wäre müsste bei richtigeAntwort eine 0 stehen. Um das Quiz mit einer neuen Frage zu ergänzen, legen Sie ein neues Objekt an.

Die Farben anpassen

Die Farben werden zunächst im CSS gesetzt. Das bedeutet Sie müssen die Datei „Style.css“ ändern. Beim Anpassen der Farben muss die Barrierefreiheit beachtet werden. Es muss genügend Farbkontrast zwischen Hintergrundfarbe und Schriftfarbe sein. Dies können Sie mit der kostenlosen Colour Contrast Analyzer (CCA) überprüft werden. Überall in der CSS-Datei wo Sie color oder background-color finden, werden Farben gesetzt. Für die wichtigsten Farben habe ich CSS-Variablen deklariert:


:root {
  --white: #ECECEC;
  --button-bg: #0000FF;
  --button-font-disabled: #629AFF;
}

Bestimmte Farbänderungen geschehen in der Quiz-App dynamisch. Dann wird das mit Javascript gemacht. Codebeispiel:


document.addEventListener("keydown", function (event) {
  if (event.key === "s") {
    startQuiz();
  } else if (event.key === "w") {
    zurNaechstenFrage();
  } else if (parseInt(event.key)) {
    let keyNumber = parseInt(event.key);
    if (keyNumber > 3) {
      anzBewertungAntwort.style.color = "white";
      anzBewertungAntwort.style.backgroundColor = "red";
      anzBewertungAntwort.innerHTML = "Nur Zahlen 1-3 sind erlaubt!";
    } else {
      ueberpruefeAntwort(keyNumber - 1);
    }
  } else if (event.altKey || event.key === "Tab" || event.code === "Space") {
  } else {
    anzBewertungAntwort.style.color = "white";
    anzBewertungAntwort.style.backgroundColor = "red";
    anzBewertungAntwort.innerHTML = "Tastaturkürzel sind nur s und w!";
  }
});

Hier werde Farben mit .style.color und .style.color gesetzt. Passen Sie die Farben der Quiz-App nach Ihren Wünschen an, aber beachten Sie die Barrierefreiheit.

Schlussbemerkung

Ich hoffe Sie haben jetzt Lust barrierefreie progressive Web Apps zu programmieren!

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS.

Schreibe einen Kommentar