Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 10, 2023 at 4:05 pm #1415997
    domchocolate

    Hi

    I am using the post slider with dots and previous next buttons – see https://owe.brother.design/ – password below.

    When I check Accessibility I get an error on the dots and arrows that reads:

    Local link destination does not exist
    1.3.1 Info and Relationships
    A local link (anchor link) occurs but the destination does not exist.
    When using local links they must refer to an existing element on the page.

    When I check the code this is what the Element creates:

    <div class="avia-slideshow-arrows avia-slideshow-controls av-visible-prev av-visible-next" style="">
<a href="#prev" class="prev-slide " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" tabindex="-1" role="link" style="">Previous</a>
<a href="#next" class="next-slide " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" tabindex="-1" role="link" style="">Next</a></div>
<div class="avia-slideshow-dots avia-slideshow-controls avia-post-slider fade-in" style="">
<a href="#1" class="goto-slide active" role="link" style="transition: none 0s ease 0s;">1</a>
<a href="#2" class="goto-slide" role="link" style="transition: none 0s ease 0s;">2</a>
<a href="#3" class="goto-slide" role="link" style="transition: none 0s ease 0s;">3</a>
<a href="#4" class="goto-slide" role="link" style="transition: none 0s ease 0s;">4</a>
<a href="#5" class="goto-slide" role="link" style="transition: none 0s ease 0s;">5</a>
<a href="#6" class="goto-slide" role="link" style="">6</a>
<a href="#7" class="goto-slide" role="link" style="transition: none 0s ease 0s;">7</a>
<a href="#8" class="goto-slide" role="link" style="transition: none 0s ease 0s;">8</a>
</div>

    Obviously, the error applies to the href that is dynamically created to activate the transition to the next or appropriate slide when there is no corresponding anchor point? Is there a way to fix this so the error doesn’t materialise? I wonder whether the transition should be controlled by a dynamically generated class rather href – (ID wouldn’t work because you can only have 1 unique ID per page).

    The problem also exists for tabbed sections.

    Any thoughts?

    • This topic was modified 1 year, 4 months ago by domchocolate.
    August 10, 2023 at 4:15 pm #1415999
    domchocolate

    Hi, thinking about this further – would it fix it if, for example:

    <a href="#5" class="goto-slide" role="link" style="transition: none 0s ease 0s;">5</a>

    was changed to

    <a href="#5" class="goto-slide" role="button" style="transition: none 0s ease 0s;">5</a>

    and/or adding

    <a href="#5" class="goto-slide" role="button" aria-hidden="true" style="transition: none 0s ease 0s;">5</a>

    I also found this:

    Accessibility of non-semantic controls: When a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screen reader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what’s missing with a combination of roles like button, listbox, or tablist, and properties like aria-required or aria-posinset to provide further clues as to functionality.

    • This reply was modified 1 year, 4 months ago by domchocolate.
    August 11, 2023 at 9:33 am #1416033
    Ismael

    Hi,

    Thank you for the inquiry.

    How did you add the role attribute? Do you still see the error when you change the role attribute value to “button”? You can modify the markup of the navigation controls in the enfold/config-templatebuilder/avia-template-builder/php/class-front-templates.php file around line 76.

    for( $i = 1; $i <= $final_cont; $i++ )
			{
				$html .= "<a href='#{$i}' class='goto-slide {$active}' >{$i}</a>";
				$active = '';
			}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.