Σφάλμα κατά τον έλεγχο για συμβατότητα με WCAG 2.0 Topic is solved

[afentiko2000]

Καλησπέρα. Έχω eshop αλλά χωρίς καλές γνώσεις προγραμματισμού. Το eshop πρέπει να είναι συμβατό με τo WCAG 2.0AA. Εκτελώντας έλεγχο μέσω του webaim.org, δημιουργείται ένα σφάλμα empty link με τον παρακάτω κώδικα.
<a id="sbox-btn-close" href="#" role="button" aria-controls="sbox-window"></a>
Έχω διορθώσει όλα τα υπόλοιπα σφάλματα και είναι το τελευταίο, ενώ δεν εμφανίζεται στο html,
εμφανίζεται από τον έλεγχο WCAG
Πώς μπορώ να το αφαιρέσω ή να αποκρύψω αυτόν τον κώδικα για να μηδενίσω τα σφάλματα;
Υπάρχει αντίστοιχο topic από το 2017 αλλά δεν έχει λύση.
viewtopic.php?t=952764
Οποιαδήποτε βοήθεια θα ήταν ευπρόσδεκτη.
Σας παραθέτω το link από τον έλεγχο με webaim
https://wave.webaim.org/report#/https://stockroom23.gr/

J 3.9.25
VM 3.8.8
Ευχαριστώ εκ των προτέρων

[Pnkr]

Καλημέρα, σε αυτό, επειδή αφορά template... ή θα πρέπει να ρωτήσεις τον template developer που βρίσκεται ο κώδικας σε αυτό ή να μας πεις ποιο template είναι μήπως μπορέσουμε να το ψάξουμε καλύτερα.

Αυτό που μπορείς να κάνει κι εσύ στα γρήγορα είναι να πάρεις αντίγραφο του φακέλου που περιέχει το template (μέσω FTP), να το κατεβάσεις τοπικά, και με κάποια εφαρμογή που ψάχνει μέσα στα αρχεία πχ Notepad++ να ψάξεις να βρεις το id="sbox-btn-close" . Να δεις σε ποιο αρχείο περιέχεται και να κινηθείς αναλόγως.

[afentiko2000]

Λοιπόν μέχρι τώρα έχω βρει τα εξής:
1) Το error εμφανίζετε στο virtuemart και συγκεκριμένα στο category page
2) Όταν αλλάζω τον τρόπο εμφάνισης των προϊόντων στις κατηγορίες σε products_slim ο error εξαφανίζεται
3) Από ότι έχω καταλάβει είναι όντως θέμα του template
4) Τον κώδικα id="sbox-btn-close" τον έχω βρει στο modal.js του joomla αλλά δεν ξέρω εάν πρέπει να επέμβω.
5)Δυστυχώς ο template developer δεν προσφέρει πλέον υπηρεσίες support.
( Ελπίζω να είναι καλά)
6) Το template είναι το Vina Calaco από Vina Gecko του 2016
Ίσως είναι κάποιο θέμα του javascript με το add to cart και more details button
7) Θα ξεκινήσω την αναζήτηση των αρχείων του template και θα επανέλθω.
Έως τότε οποιαδήποτε βοήθεια είναι ευπρόσδεκτη.

[Pnkr]

Μια γρήγορη λύση θα ηταν να περάσεις εσύ την αλλαγή με javacript. Για να μην επηρεάζεις τα αρχεία του Joomla.
Πρόσθεσε τον παρακάτω κώδικα στο template σου

Code: Select all

document.addEventListener("DOMContentLoaded", function(){
    // Περιμένουμε να φορτώσει η σελίδα
    // Επειτα, βρίσκουμε το modal close <a> στο DOM.
    var sboxClose = document.getElementById("sbox-btn-close");
    // Περνάμε onthefly ένα εσωτερικό span μέσα στο sbox με κλάση sr-only
    sboxClose.innerHTML +="<span class='sr-only'>Close</span>";   
});

Σημείωση: Η κλάση sr-only είναι μια bootstrap class για να μην εμφανίζει το αντικείμενο σε κανονικούς browsers παρα μόνο σε screen readers.

Αν δεν υπάρχει η κλάση στο template σου, προσθεσε και το παρακάτω

Code: Select all

    <style>
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }
    </style>