Webapplikationen III (Barrierefreiheit)

Dieses Mal wurde das Thema Barrierefreiheit in der Webentwicklung genauer beleuchtet und dessen Teilaspekte näher unter die Lupe genommen. Dazu wurde am Anfang geklärt, was überhaupt barrierefreies Webdesign bedeutet und inwiefern Entwickler*innen zu einer behindertengerechten Bedienung von Hard- und Software beitragen können. Anschließend wurde besprochen, wie man innerhalb von HTML barrierefrei programmieren kann und welche Tags dafür notwendig sind. Nach diesem theoretischen Input wurde das derzeitige Projekt auf etwaigen Verbesserungsbedarf untersucht. Dabei wurden barrierefreie Tags wie die verwendete Sprache (<html lang=„de“>), eine Beschreibung als Meta-Information, ein alternatives Textattribut bei Bildern (alt=„“) sowie das TabIndex-Attribut (tabindex=„“) bei Eingabefeldern und Links in den Projektdateien ergänzt. Im Anschluss daran wurde noch geklärt, inwiefern barrierefreie Formulare mit HTML gestaltet und programmiert werden können, bevor ein kleines Backend als geschützter Bereich programmiert wurde. Um zu simulieren, wie barrierefreie Formulare aussehen, wurde in phpMyAdmin eine Benutzerdatenbank erstellt, bei der die eingegebenen Passwörter mittels SHA1 verschlüsselt wurden. Schlussendlich wurde dann ein Login-Script geschrieben, mit dem man sich beim Backend verschlüsselt sowie barrierefrei anmelden konnte.


Kompetenzen

  1. Ich weiß was Barrierefreiheit bedeutet, wie man diese in IT-Systemen umsetzt und kann Hilfsgeräte dafür nennen.
  2. Ich weiß was das W3C und die WCAG sind und weshalb Standards für die Webentwicklung so wichtig sind.
  3. Ich verstehe wie Webserver und Datenbankserver im Hintergrund einer Webseite arbeiten und kenne virtuelle Applikationen.
  4. Ich verstehe wie man PHP-Funktionen aufrufen kann und kann mir über Manual-Pages der PHP-Dokumentation weiterhelfen.
  5. Ich kann kleinere PHP-Skripts erstellen und die Ergebnisse dieser mit Hilfe des echo Befehls ausgeben lassen.
  6. Ich kann Kontrollstrukturen wie Verzweigungen oder Schleifen in PHP programmieren und verstehe das Prinzip hinter ihnen.
  7. Ich kenne mich mit phpMyAdmin aus und kann darin eine kleine Datenbank oder Tabelle mit diversen Datentypfeldern erstellen.


Vertiefung

barrierefrei.php
<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Mustermann Login</title>
        <meta charset="UTF-8">
        <meta name="description" content="Beschreibung">
        <link rel="stylesheet" type="text/css" href="layout.css">
    </head>
    <body>
        <?php require_once('header.php'); ?>
        <main>
            <div class="row">
                <div class="col-12">
                    <h2>Login</h2>
                    <hr><br>
                    <form action="signin.php" method="post">
                        <label for="username"><b>Benutzername:</b></label>
                        <input type="text" placeholder="Benutzername" name="username" tabindex="4" required><br>
                        <label for="pwd"><b>Passwort:</b></label>
                        <input type="password" placeholder="Passwort" name="pwd" tabindex="5" required><br><br>
                        <label>
                            <input type="checkbox" name="remember" tabindex="6"> Merken
                        </label><br><br>
                        <button type="submit" tabindex="7">Anmelden</button>
                    </form>
                </div>
            </div>
            <?php require_once('footer.php'); ?>
        </main>
    </body>
</html>



Unterrichtsmaterialien


, , , , , , , , , , ,