Barrierefreie Websiteüberschrift (HTML)?

Hi, ich wollte meiner Website etwas mehr Barrierefreiheit verschaffen und da kam unter anderem der Wunsch eine ordentliche <h1>-Überschrift anstatt dem Logo als Bild einzufügen. Jedoch würde ich das Bild gerne behalten. Meine erste Idee war die <h1>-Überschrift direkt über das Bild zu schreiben und per hidden-Attribut oder CSS-Befehl unsichtbar zu machen, also zu verstecken, aber bringt das überhaupt was oder wird eine versteckte Überschrift von Blindenprogrammen z.B. ignoriert?

Zweite Idee war das Bild zum Kindelement von <h1> zu machen und und den Text auf dem Logo ins alt-Attribut zu schreiben (wie bisher auch), ggf. noch in Klammern "Logo" dahinter zu schreiben.

Welche Idee ist besser bzw. habt ihr bessere/andere Vorschläge?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

14.01.2024, 20:38

Meine erste Idee war die <h1>-Überschrift direkt über das Bild zu schreiben und (...) zu verstecken

Dann brauchst du keine Überschrift.

(...) wird eine versteckte Überschrift von Blindenprogrammen z.B. ignoriert?

Ja.

Zweite Idee war das Bild zum Kindelement von <h1> zu machen (...)

Ein Logo ist ein dekoratives Element, keine Überschrift. Der Wert des alt-Attributs bleibt leer.

Welche Idee ist besser bzw. habt ihr bessere/andere Vorschläge?

Keine deiner Ideen ist gut.

Setze Überschriften mit Sinn. Sie sind dazu da, den folgenden Inhalt prägnant zu beschreiben oder zusammenzufassen. So würde eine h1-Überschrift beispielsweise auf einer Artikelseite das allgemeine Thema einleiten (konkretes Beispiel: Eine Seite mit Informationen über den Seitenbetreiber könnte die Überschrift Impressum erhalten).

Bezüglich der Positionierung würde ich empfehlen, eine Überschrift nicht in die Navigationsleiste zu schieben, sondern eher eine eigene Sektion (darunter) einzubauen.

DodgeRT

14.01.2024, 20:01

ein logo bindest doch als img ein, oder? dann kannst auch alt oder titel im bild verwenden, des können glaub ich die blindensoftwaren lesen

Master643

Beitragsersteller

14.01.2024, 20:03

Aber es hieß halt eine <h1>-Überschrift wäre besser.

DodgeRT

14.01.2024, 20:06

@Master643

für die suchmaschinenerfassung ist sie auf jeden fall besser.

wobei ne überschrift ja eigentlich auch was anderes als ein logo ist.

Ähnliche Beiträge

Wie diesen Code im input-Feld einfügen?

Einen schönen Abend zusammen,

hat jemand eine Idee wie ich diesen Unicode (🔎) in die input Suchleiste einfügen könnte ?

ich habe es bei CSS sou versucht:

input{

background-image: url(🔎);

Meine zweite Idee war ein Bild in meinen Dateien abzuspeichern und diese ebenfalls wie angeführt zu verlinken.

background-image: url(Bild 1);

Leider funktioniert es nicht, hat jemand eine Lösung für dieses Problem ?

Ich würde gerne darauf hinweisen, dass ich versuche eine Lupe im Suchfeld einzufügen.

...zum Beitrag

Audio Tag Ton abspielen mit Button verknüpfen?

Hallo,

ich habe herausgefunden dass, es nicht mehr erlaubt ist das Ton automatisch abgespielt wird. (Dies bezüglich habe ich keinen Fix gefunden.)

Ich benutze das "Audio Attribut", und wenn ich mute eingebe funktioniert autoplay.

Nun, ist es möglich einen Button mit diesem Audio-Tag zu verknüpfen? Meine Idee wäre es den sehbaren Audio Tag mit "hidden" zu verstecken und mit Hilfe des "verknüpften Buttons" den Sound einzuschalten. Somit spielt der Sound synchron mit der Video ab, ohne auf Play klicken zu müssen.

Idee:

Ein Video mit einem Lautsprecher in der Mitte dahinter verbirgt sich das Audio Attribute mit "hidden" und wird sofort abgespielt durch autoplay, man klickt auf den Lautsprecher in der Mitte und man hat Sound.

...zum Beitrag

Wann kann man JavaScript gut?

Also, ich kann von APIs Daten abrufen. Voice Recorder, Wetter Webseite etc.

Slideshows kann ich auch programmieren. Ist auch einfach. Node.js kann ich nicht und json habe ich noch nicht ganz verstanden.

HTML und CSS beherrsche ich richtig gut.

Wann würdet ihr sagen, dass man gut JavaScript Code schreiben kann?

...zum Beitrag

Wird HTMX JavaScript nutzlos machen?

...zum Beitrag

Warum passiert das mit meinem HTML Code?

Folgendes: ich bin gerade dabei eine Schriftart von Google-fonts in ein HTML Dokument du importieren. Das Problem ist, dass der ganze Code anders formatiert wird, sobald ich den Link einfüge. Fast so, als ob kein schließender Tag vorhanden ist.

Das Dokument in dem das Problem zuallererst aufgetreten ist ist lang, weswegen ich ein kleines Beispiel in einem eigens dafür verwendeten Code hinzufüge, es ist überall das selbe.

Kann mir jemand sagen, ob diese Farbänderung nach dem </head> normal sind? Wenn nein, was sollte ich ändern?

...zum Beitrag

Warum verschiebt <!Doctype html> meine img's?

Wenn ich meine HTML- Seite erstelle, dann passen die Bilder, doch wenn ich <!Doctype html> in meinen Code mit aufnehme, dann verschieben sich alle img-Tags um 5px nach oben.

...zum Beitrag

HTML Seite zentrieren und Seitenränder einstellen?

Hallo, ich habe meine Startseite zentriert und will auch, dass die Seite wie bei den meisten Webseiten in der Mitte platziert ist und nicht auf der ganzen Seite, also wie z.B. hier:

Könnt ihr mir helfen, welchen Befehl ich dafür verwenden muss?

Wenn ich das Fenster verkleinere oder im Handy aufrufe, sollte die sich dann anpassen.

Danke im Voraus.

...zum Beitrag

Erstellte website nicht aufrufbar?

Bin Anfänger im Thema Webseiten und programmieren und habe mir mal ein Tutorial angeschaut. In dem wurde mir erzählt, dass ich mit dem Editor und HTML eine Website erstellen kann. Wenn ich aber nach abspeichern des Editors etc. den Link, der in der Suchtleiste bei Chrome steht bei einem anderen Gerät eingebe, finde ich diese Seite nicht. Ich hatte auch nicht erwartet, dass das erstellen von einer Website auf diese Weise funktioniert, aber was fehlt mir, dass diese Seite, auch wenn es nur eine Testseite sein soll im Internet aufrufbar ist?

...zum Beitrag

HTML/JS Icon Link lädt zu lange?

Hey,

ich lade meine Icons über diesen Link:

<script src="https://kit.fontawesome.com/03a9efeaa3.js" crossorigin="anonymous"></script>

Dieser Link ist im head. Mein anderer script-Tag ist im body und lautet so:

<script type="module" src="./JS/main.js"></script>

Nun habe ich das Problem, dass wenn ich meine Seite neu lade, es lange lädt und dann abstürzt.

Die Konsolenausgabe sieht so aus:

Was kann ich tun?

...zum Beitrag

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zum Beitrag

wass Macht Dieser Code?

<!DOCTYPE html> <html> <head> <title>Zufällige Geschichte und Bananen-Animation</title> <style> .story { font-size: 20px; margin-bottom: 20px; } .banana { width: 100px; height: 200px; position: absolute; bottom: 0; left: 0; animation: eatCars 5s infinite linear; } .car { width: 50px; height: 30px; position: absolute; bottom: 0; animation: moveCar 5s infinite linear; } @keyframes eatCars { 0% { left: 0; } 100% { left: 100%; } } @keyframes moveCar { 0% { left: 0; } 100% { left: -50px; } } </style> </head> <body> <button onclick="getRandomStory()">Zufällige Geschichte</button> <button onclick="startBananaAnimation()">Banane füttern</button> <div class="story"></div> <div class="banana"></div> <div class="car"></div> <div class="car"></div> <div class="car"></div> <script> const stories = [ "Es war einmal...", "In einer weit entfernten Galaxie...", "Ein kleines Mädchen fand...", ]; function getRandomStory() { const storyElement = document.querySelector('.story'); const randomIndex = Math.floor(Math.random() * stories.length); storyElement.textContent = stories[randomIndex]; } function startBananaAnimation() { const banana = document.querySelector('.banana'); banana.style.display = 'block'; } </script> </body> </html>

...zum Beitrag

Welche programier Sprache für Audio Software?

Moin, ich würde gerne einen eigenen audio Software (Daw) coden. Die sollte sowohl auf Mac als auch Linux und Windows funktionieren. Noch hab ich davon aber keine Ahnung (nur HTML, CSS, Javascript Kenntnisse) und wollte daher mal fragen welche programierSprache bzw. Kombination aus Programmiersprachen ihr mir empfehlen könnt.

Schonmal im voraus vielen dank.

...zum Beitrag

wie kann man in JavaScript eine Funktion erstellen, die eine zufällige Zahl generiert?

Hi Leute!

Wie kann ich ich JavaScript eine Funktion erstellen, die jede Zahl zufällig von 1 bis 16 auswählt, jedoch darf keine mehrmals vorkommen.

Vielen dank im voraus🙂

...zum Beitrag

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

@media only screen and (max-width: 359px) {

#primary .content-container {

padding-left: 10px !important;