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 Fragesteller 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

Fragesteller

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.

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Wie neben h1 einen button setzen?

Guten Abend,

ich würde gerne einen button neben meiner h1 Überschrift einbauen, habe von float bis zu display: inline es versucht. Mit einer div-Box funktionierte es auch nicht, hätte jemand eine Idee was ich dafür verwenden muss ?

...zur Frage

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.

...zur Frage

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.

...zur Frage

Web-Animation und Prozessvisualisierung?

Ich benötige Hilfe für ein Projekt, bei dem Zustände grafisch abgebildet werden sollen, siehe das Bild im Anhang. Es geht darum, dass wenn sich Zustände und Variablen in Javascript ändern, dies grafisch dargestellt werden soll.

Bis jetzt habe ich es so gemacht, dass es für alle möglichen Zustände ein Bild gibt. Das Problem ist, wenn das System expandiert, läuft das immer mehr aus dem Ruder, was die Erstellung der jeweiligen Zustände angeht. Das heißt, für jeden Zustand, muss ich 2^n Bilder erstellen.

Das Bild zeigt eine vereinfachte und minimalistische Darstellung, wie der Prozess abgebildet werden sollte. Dabei sollten dann, je nach Zustand, die jeweiligen Aktoren dargestellt werden.

Meine Frage ist, ob es einfachere oder elegantere Möglichkeiten gibt, dieses Prozessabbild für HTML mittels JS oder CSS zu animieren?

An SVG hatte ich auch schon gedacht, damit wird es aber noch viel komplizierter, wenn man damit noch nicht so viel Erfahrung hat.

...zur Frage

Wieso funktioniert das stylen des div-Conatiners nicht?

Guten Abend zusammen,

wie ihr aus meinen vorherigen Fragen herauslesen könnt, übe ich gerade das programmieren. Ich habe jetzt sehr viel über das stylen (css) bzw. positionieren des div-containers recherchiert. Es taucht immer wieder das selbe Problem bei mir auf:

Es funktioniert nicht, spricht: ich kann weder das Element positionieren noch in irgendeiner Form stylen.

Unten ist mein Beispiel; wie immer kopiere ich nur den wichtigsten Code um euch den Rest zu ersparen. Hierbei wird nur das <h1> ausgegeben und leider nichts weiteres. Ich müsste noch erwähnen, dass ich mit Visual Studio programmiere und dabei einmal eine Seite mit index.html programmiere und stylen auf einem weiterem Fenster im Visual Studio tue.

Das ist der Code im Fenster index.html:

<body>

<h1>Hallo</h1>

</div>

</body>

Das ist der Code im Fenster sytle.css (wobei die Überschrift seltsamerweise rot angestrichen ist und daneben die Zahl 5 steht; ich weiß leider nicht ob das etwas zu bedeuten hat):

#Hallo {

width: 100px;

height:150px

position: relative;

top: 70px;

left: 80px;

background: blue;

}

Eventuell hat jemand von euch eine Idee wo das Problem liegen könnte.

Vielen Dank für eure Mühen im voraus !

...zur Frage

CSS führt zur Trennung von...?

Ich bin der Meinung: Inhalt und Gestaltung.

Struktur kann man nämlich mit CSS auch gestalten...

...zur Frage

Wird HTMX JavaScript nutzlos machen?

...zur Frage

HTML/ wie ist der code für Leerzeichen?

...zur Frage

CSS/HTML h1 komplett in die Mitte des Dokuments zentrieren?

Weiß jemand wie ich bei meinem HTML Dokument meine Überschrift so wie bei dem Bild in die Mitte bekomme? Habe bei vielen Seiten gesucht, unter anderem auch bei w3school, hab aber nicht wirklich etwas gefunden. Wäre cool, wenn sich jemand bei so etwas auskennt :3

...zur Frage

Welche Programmiersprache soll ich lernen?

Ich möchte entweder C# oder Javascript lernen.

C# programmieren finde ich persönlich viel interessanter als Javascript aber ich weiß, dass mir Javascript mehr bringen würde, wenn ich mich da vertiefe.

Was soll ich also lernen?

...zur Frage

Hallo, ich habe bereits Kenntnisse in Html css und einigermaßen js. Nun will ich ein Login System einbauen in meine Webseite. Ich will eigentlich nur den User erlauben zu kommentieren und ich will bestimmte Sachen begrenzen auf Leute mit einem Abo. Also ich will bestimmte Seiten und Div-Blocks nur für Premium Nutzer freigeben. Ich will die Bezahlung mit Stripe machen und die Sachen die ich lernen will dafür sind Python und halt MySQL. Würden dir zwei Sachen reichen und wie lange würde ich brauchen um diese Funktionen die ich genannt habe zu lernen und das auf der höchstmöglichsten Sicherheitsstufe? Darüber hinaus würde ich eigentlich auch gerne so ein Forum System machen wie gutefrage mit Profilen und co. aber ich glaube das würde viel länger dauern und erst später umsetzbar

...zur Frage

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?

...zur Frage

Verstehe nicht, warum es falsch ist?

// loggen der Variabeln-Name für den Login-Button //

let loggen = document.getElementById("login");


loggen.addEventListener("click", function() {
  
// eingabeFeld ist der Name für das Inputfeld //  
let eingabeFeld = document.getElementById("field");

eingabeFeld.value;
if (eingabeFeld.includes("huso1234")) {
alert("Ja, das Passwort ist richtig");
}
else {
    alert("Das Passwort ist falsch");
}
eingabeFeld.textContent = "";
});

Funktioniert halt einfach nicht. Es handelt sich hierbei um die Programmiersprache JavaScript. Es kommt kein Alert und am Ende geht der Text auch nicht weg vom Inputfeld.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen