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

Beitragsersteller

13.02.2023, 21:32

Danke, hat geklappt!

Ähnliche Beiträge

FEHLERSUCHE bei einem nicht mitscrollenden "Nach-Oben" Button?

Mehrere Stunden hat es mich heute schon beschäftigt, ich komme und komme nicht darauf...

Es geht mir um den seitlichen (rechts) "skip-to-top" Button. Exakt alles habe ich genauso wie in diesem Pen Beispiel ( Link: https://codepen.io/jackherizsmith/pen/oNxVWrK ) gemacht.

Aber bei mir scrollt der Nach-Oben Button nicht mit wie in dem Pen Beispiel :

Meine Demo-Seite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html (aktualisiert)

Allerdings habe ich mein position: relative nicht main mitgegeben sondern der id "skiptop". Mein Dev-Tool zeigt mir an, das jeweils relative und absolute richtig erkannt wird und es wird mir auch so gezeigt.

Nur halt die Klasse "scroll-top_link" scrollt nicht in dem Bereich hoch und runter wie es soll.

Was mache ich da falsch. Könnt ihr mir bei der Fehlersuche helfen?

Vieles habe ich ausprobiert, auch meinem main habe ich position relative gegeben, aber auch anderen Elementen setzte ich position relative allerdings ohne Effekt.

Das Ding ist allerdings das dieser seitliche Bereich ein eigenes grit-Element ist. Sprich:

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto) [main-nav-start] 5em [main-nav-end];
    }


#navigations {
    grid-area: navigations;    
    grid-column-end: main-nav;
}

#main-nav {
    grid-area: navigations / main-nav;
    position: relative;
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}

Wo ich letztendlich das Hauptmenü anzeigen lasse, da habe ich noch keinen richtigen Plan.

Eventuell in der Zeile: #navigations und dann seitlich rechts.

Nicht zu verwechseln mit Seiten-Inhalt, das ist ein Seiten internes Sprungmenü zu einem bestimmten nach Datum geordneten Artikel. Bisher habe ich noch keine bessere Bezeichnung dafür gefunden. Irgendeine Idee dafür?

Zurück zum Hauptmenü, oder ich packe das Hauptmenü seitlich zum Nach-Oben Button, mache es ebenfalls sticky.

Was dann allerdings bei einem schmalen Browserfenster passiert?... Da habe ich eigentlich vor das Hauptmenü (oberhalb vom "Seiten-inhalt" Link) ohne Button (offen) untereinander anzuzeigen.

Sag mal bitte, da mir die Praxis fehlt, wie würdest Du es lösen?

Zurück zur eigentlichen Frage:

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Muss ich da was an der html-Struktur ändern. Ein zusätzliches div?

Ich habe da heute lange daran gesessen...

...zum Beitrag

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

...zum Beitrag

Button welcher beim Scrollen auf Webseite an gleicher Position unten rechts bleibt HTML?

Hallo,

ich habe eine Frage, wie muss ich das in CSS machen, das ein Button, welcher ein Bild ist, immer unten rechts in der Ecke angezeigt wird? Der Knopf ist eine <img>.

Muss ich in CSS img {position:fixed;} eingeben damit er beim scrollen immer da bleibt? Und muss wie soll ich den Code machen, damit er leicht durchsichtig unten rechts ist?

...zum Beitrag

Scroll Überlappen Animation?

Hallo,

Also geht mal bitte auf folgende Seite:

emyo-drinks.de

Dort wird erst ein video angezeigt, und wenn man scrollt überlappt sich das ganze, das video hab ich schon, aber wie kann sich das beim Scrollen überlappen?

...zum Beitrag

Website Anzeige auf Google ändert sich nicht (Wordpress)?

Ich habe über meinen Webhoster Wordpress installiert. Danach habe ich es wieder gelöscht + neu installiert sowie die komplette Website inkl. Titel geändert. Leider wird das in der Google Suche nicht so angezeigt. Zu sehen ist immernoch der alte Titel & in der Beschreibung steht der Wordpress Basistext der bei jeder Neuinstallation da steht.

Mittlerweile habe ich schon x-mal alle neu veröffentlicht & auch versucht es mit einem SEO-Plugin zu ändern aber bei der Google Suche steht immer noch das gleiche.

Bild: stellt euch vor es wäre meine Website und der blaue Titel „Gutefrage“ sowie die Beschreibung in schwarz würde sich nicht ändern

Hat jemand eine Idee wie ich das ändern kann? Wäre sehr dankbar!

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

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

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!

...zum Beitrag

Light vs Dark Webdesign?

Findet ihr Light oder Dark Designs besser bei Webseiten? Ich habe schon eine Dunkel gestaltete Webseite bin aber irgendwie der Meinung, dass eine Helle übersichtlicher ist und besser ankommt. Was ist eure Meinung zu dem Thema. Außerdem sei erwähnt, dass ein Switch Button für Dark-Light Design bei mir nicht erwünscht ist. Vielen Dank

...zum Beitrag

HTML/JavaScript: Wieso scrollt er nach oben?

Hey,

ich wollte einen Scrolldown-Button machen und er scrollt nach oben. Wieso macht er das?

</section>
<section id="section03" class="demo">
  <h1>Scroll Down Button</h1>
  <a href="#section03"><span></span>Scroll</a>
</section>
<script>
  $(function() {
    $('a[href*=#]').on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
      }, 500, 'linear');
    });
  });
</script>

...zum Beitrag

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.

...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;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,

.postid-3736,

.postid-3748,

.postid-2583,

.postid-3756,

.postid-3752,

.postid-3703

{display:none}

}

...zum Beitrag

HTML Master Element auf mehreren Seiten einbinden?

Ich bin gerade an meinem Portfolio, welches ich selbst über HTML "code".

Die basic Skills reichen mir dazu eigentlich und den Rest bekomme ich von Codepen, aber eine Frage habe ich, welche ich nicht im Netz beantwortet bekommen habe. Oder zumindest weiß ich nicht genau, nach was ich googeln soll.

Ich habe auf jeder Seite dasselbe Menü.
Muss ich das nun auf jeder Seite händisch einpflegen oder kann ich irgendwie einen HTML-Schnipsel mittels PHP von einer anderen Seite auslesen.

Daher ich habe z.B. ein Stück Code welches auf jeder meiner .html Seiten zu finden ist. Ändere ich diesen Codeschnipsel, wird er automatisch auf allen eingebundenen Seiten ebenfalls geändert. So eine Art "Mastertemplate". Ich hoffe ihr versteht, was ich meine.

Und das am besten mit mehreren Objekten. Z.B. Header, Footer und noch andere Elemente, die dann auf die Unterseiten kommen werden.

Da eine komplette Antwort zu dem Thema vermutlich zu komplex ist, gerne auch einfach ein Tutorial verlinken.

Danke!

...zum Beitrag

Wie kann ich jemanden finden der mir für geld eine website erstellt?

genau nach meinen wünschen usw

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen