Barrierefreiheit Google scroll-top-button?

Wenn ich meine Seite auf pagespeed.web.dev analysiere, wird mir dieses Problem "Schaltflächen haben keinen für Screenreader zugänglichen Namen" unter Barrierefreiheit angezeigt. Dabei geht es darum, dass ich einen scroll-top-button auf der Seite habe. Dieser hat üblicherweise keinen Text und scrollt lediglich bis ganz nach oben. Wie kann ich das Problem beheben, sodass mir das nicht mehr als Fehler bei Google angezeigt wird?

Die Seite ist mit Wordpress erstellt.

Hier der Code dazu:

body.home > div.jupiterx-site > div.jupiterx-corner-buttons > button.jupiterx-scroll-top

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, HTML5

13.02.2023, 20:20

Gib dem Button ein aria-label-Attribut. Es ist dazu da, den Zweck des Elements mit einem Alternativtext zu beschreiben.

<button aria-label="Scroll to top" ...></button>

Das title-Attribut hingegen ist als ergänzende Beschreibung zu einer bereits vorhandenen Beschreibung gedacht (Bsp.: Ein beschriftetes Formularfeld, bei dem der Nutzer noch eine längere Beschreibung für weitere Details erhalten soll). Im Gegensatz zum aria-Attribut wird es vom Browser sichtbar (als Tooltip) herausgerendert. Zudem wird der Text nicht von jedem Screenreader direkt abgespielt.

Sofern du über die grafische Oberfläche von WordPress keine Möglichkeit findest, das Attribut hinzuzufügen, bedarf es einer Anpassung des Themes, welches du nutzt. Anleitungen dazu lassen sich leicht finden (Beispiel), jedoch solltest du ein grundlegendes Verständnis von HTML und am besten auch etwas PHP mitbringen.

kinuhakek

Fragesteller

13.02.2023, 21:32

Danke, hat geklappt!

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

Programmierung herkömmlich HTML versus CMS?

Früher habe ich Websites mit Dreamweaver gemacht, sprich mit HTML und ensprechender Datenbank-Anbindung. Heute kann man ja auf verschiedene Frameworks und Content Management Systeme zurückgreifen.

Welche Gründe sprechend heute dagegen es wie früher händisch zu machen?

...zur Frage

Wieso erscheint das auf der Handy Ansicht "HTML" (Foto)?

Hallo,

ich habe auf der Wordpress-Seite eines Freundes ein Popup erstellt, wo er auf die Betriebsferien hinweist.

Auf der Desktop-Version ist alles super, jedoch kommt in der Handy-Version zwei mal "Translator"

Woran liegt das?

Der Code scheint auch zu passen.
Es erscheint immer wieder, auch wenn ich es lösche.

...zur Frage

Welche Programmiersprache(n) nach HTML, CSS, Javascript?

Ich weiß HTML, CSS sind keine aber welche Programmiersprachen sollte man nach Javascript lernen mein Bereich wäre momentan zum Start Webseiten (Webanwendungen) sowie Apps.

...zur Frage

Wie ranke ich mein Blog?

Hey, ich habe ein Blog programmiert mit Javascript, HTML, Css bin nun so gut wie fertige schreibe derzeit meine blog Artikel will zum start 10-20 haben, aber wenn die Seite online ist, ist die frage die ich mir stelle wie ranke ich die Beiträge? Hab auf Youtube nix dazu gefunden.

...zur Frage

Wie kann man eine Webseite (HTML/CSS/JS) in WordPress einbinden (unverändert dort einsetzen)?

Kurze Frage,

Ich habe eine Webseite mit HTML/CSS und JS erstellt und möchte diese jetzt bei WordPress einfügen, damit andere, die keine Ahnung von HTML haben diese auch gut bearbeiten können. Funktioniert es vielleicht, einfach die Dateien die man hat hochzuladen? Ich beschäftige mich jetzt schon seit Tagen und komme nicht voran... Ich bin am verzweifeln. Ich würde mich über jede Hilfe freuen.

...zur Frage

Input required?

Wie kann ich mit Javascript ein Input required machen, denn bei Html kann man es ja ändern bei untersuchen

...zur Frage

Guter Anbieter für Domain und Web Hosting bei dem man mit HTML/CSS und JS selber seine Webseite erstellen kann?

Hallo kennt da jemand ein guter?
Es muss nur so einfach wie möglich sein aber ich will alles selber programmieren mit HTML CSS und JavaScript also sowas wie Wordpress oder ähnliches will ich gar nicht.

...zur Frage

CMS in eigene HTML/CSS Webseite einbinden?

Hallo,

folgendes:

Ich habe eine Webseite für eine kleine Firma mittels HTML/CSS erstellt. Einen Baukasten habe ich nicht verwendet, da die Webseite ziemlich komplex war und der Inhaber sie lieber nach eigenen Vorstellungen erstellt haben wollte und nicht einfach durch eine Copy/Paste-Vorlage.

Die Webseite ist soweit fertig, nun möchte der Inhaber aber selbst Inhalte einfügen und aktualisieren können. Kann ich meine HTML-Seite nachträglich zum Beispiel mit einem CMS einbinden? Ich habe sie in VS Code erstellt.

Die Idee mit dem CMS kam daher, dass der Inhaber mit dem Code nicht zurechtkommt und ich Angst habe, dass er die ganze Webseite zerstört, falls er den Code falsch ändert.

Gibt es auch noch andere bessere Varianten als CMS?

Danke schonmal.

...zur Frage

WordPress mit eigenem HTML, CSS und JSCode?

Hallo Leute, ich brauche mal ein paar Infos zu WordPress in Verbindung mit eigenem HTML, CSS und JavaScript Code.

1.) Ich habe mit den 3 besagten Sprachen ein kleines interaktives Bild in einer HTML Datei erstellt mit einem Umfang von gut 180 Zeilen und dieses Bild würde ich gerne in WordPress einbinden, funktioniert das? Wenn ja wie? Per Shortcode? Direkt einbinden? muss ich das in ein Plugin umwandeln?

2.) Wenn es möglich ist, kann ich das Erstellte leicht exportieren und auf einer anderen WordPress Seite ebenfalls leicht Importieren?

3.) Kann ich überhaupt mit der kostenlosen Version bzw. mit der Persönlichen oder maximal Premium Version besagtes umsetzen? Oder müsste ich für eigenen Code ein höheren Tarif wählen?

Vielen dank schonmal und Beste Grüße!

...zur Frage

HTML Hilfe?

Ich habe meine erste HTML-Datei geschrieben.

Ich habe auf der Hauptseite einen Link eingebaut, der auf eine zweite Seite dieser Webseite weiterleitet. Also man klickt auf einen Button und kommt auf eine andere, interne Seite.

<a href="/Impressum.html" target="_blank">Impressum</a>

Aber wenn ich drauf klicke, dann werde ich zwar weitergeleitet, aber dann kommt das hier.

Und ja, die Seite, auf die man weitergeleitet werden soll existiert. Ich kann auch in meiner Datei drauf klicken und komme dann dorthin.

...zur Frage

Zweitsprachige Webseite mit JS?

Ist es besser eine extra Seite für die zweite Sprache meiner Website zu machen also seite.com und seite.com/de, oder wäre es besser, die Texte direkt mit Js zu machen. Also wenn einer mit der Browsersprache Deutsch die Webseite betritt, soll Js es ermitteln und dementsprechend den Text einblenden ohne eine zweite Seite. Was wäre besser

...zur Frage

Besucherzähler in Website einbauen?

Wie macht man das am besten über HTML, da ich nur HTML Codes in IONOS einfügen kann? Und funktioniert dies überhaupt?

Grüße

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen