Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1487514

    Dear experts,

    I use a data grid on the home page and fetch portfolio items based on category. The WAVE analysis complaints about redundant links for the portfolio items displayed in the data grid.

    <div class=”grid-content”><div class=”avia-arrow”></div>
    ARIA label<header class=”entry-content-header” aria-label=”Portfolio: Schul-IT Support”>
    Heading level 3<h3 class=”grid-entry-title entry-title ” itemprop=”headline”>
    Redundant link
    Schul-IT Support

    </h3>
    </header>

    How can I get rid of those redundant links?

    Anja

    #1487534

    Hey amollde,

    Thank you for the inquiry.

    We are not seeing any redundant links on the homepage. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:

    1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
    2.) Locate the option to upload a file or an image.
    3.) Select the screenshot file from your computer or device and upload it to the platform.
    4.) After the upload is complete, you will be provided with a shareable link or an embed code.
    5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

    Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

    Best regards,
    Ismael

    #1487566
    This reply has been marked as private.
    #1487580

    Hi,

    Thank you for the screenshots.

    To get rid of the redundant link warnings, you can add the following script to the functions.php file to convert the title link into a < span > tag while still preserving the link functionality on click.

    add_action('wp_footer', function () {
        ?>
        <script>
        jQuery(document).ready(function($) {
            $('.grid-entry-title a').each(function() {
                var href = $(this).attr('href');
                var text = $(this).text();
                var span = $('<span>')
                    .addClass($(this).attr('class'))
                    .text(text)
                    .attr('data-href', href)
                    .css('cursor', 'pointer');
    
                $(this).replaceWith(span);
            });
    
            $(document).on('click', '.grid-entry-title span[data-href]', function() {
                var url = $(this).data('href');
                if (url) {
                    window.location.href = url;
                }
            });
        });
        </script>
        <?php
    }, 999);
    

    View post on imgur.com

    Let us know the result.

    Best regards,
    Ismael

    #1487700

    Dear Ismael,
    perfect, many many thanks, that worked fine an solved the issue. I have added this code to the child-theme function.php.

    You can close this ticket.
    Anja

    #1487716

    Hi,

    Thanks for the update. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Accessibility Issue: Data Grid with portfolio items creates redundant links’ is closed to new replies.