• Resolved Nazar Hotsa

    (@bugnumber9)


    Hello.

    While auditing a website for WCAG conformance, I noticed a number of issues with your plugin.

    I was able to fix contrast issues with custom CSS, so that’s easy.

    I was also able to fix the redundant alt text issue using the following code snippet:

    <script>
    const updateAltText = () => {
    document.querySelectorAll('.ti-profile-img img').forEach(img => {
    const altText = img.getAttribute('alt');
    if (altText && !altText.includes('profile picture')) {
    img.setAttribute('alt',
    ${altText} profile picture);
    }
    });
    };

    // Initial check in case some reviews are already on the page
    updateAltText();

    // Observe DOM changes in case reviews are loaded dynamically
    const observer = new MutationObserver(() => {
    updateAltText();
    });

    observer.observe(document.body, {
    childList: true,
    subtree: true
    });
    </script>

    However, the biggest problem is that “Read more” and “Hide” semantically aren’t buttons, which means they aren’t accessible with keyboard navigation.

    Please consider making these elements accessible by keyboard navigation, this is a big issue in terms of WCAG conformance.

Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘WCAG issues’ is closed to new replies.