Accessibility Issue – Missing ARIA Reference

  • Resolved Roman

    (@roman17trushanov)


    6 months, 3 weeks ago

    Dear FancyBox Support Team,

    I hope this message finds you well. I am reaching out to report an accessibility issue encountered while using FancyBox for WordPress. Below are the details of the problem:

    The <div id=”fancybox-wrap” role=”dialog” aria-hidden=”true” aria-labelledby=”fancybox-title” tabindex=”-1″> element in the FancyBox overlay contains ARIA attributes (aria-labelledby), but the referenced target for the label does not exist.

    This inconsistency can lead to accessibility barriers for users who rely on screen readers or other assistive technologies.
    To address this issue effectively, I suggest ensuring that the element referenced in the aria-labelledby attribute value exists within the page and provides a proper label or description.

    Steps to reproduce the issue:

    Trigger the FancyBox overlay.
    Inspect the relevant HTML elements.
    Note the absence of the referenced target for the ARIA label in the line of code mentioned above.

    The issue is flagged by https://wave.webaim.org/ on our website https://www.arbeitslosenselbsthilfe.org/

    Looking forward for you kind reply,

    Roman

    • This topic was modified 6 months, 3 weeks ago by Roman.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support beatrice12

    (@beatrice12)

    Hello @roman17trushanov,

    Thanks for reaching out to us!

    I opened a ticket with our development team regarding this and we will look closely into it. Apologies for the trouble!

    Warmly,

    Beatrice.

    Thread Starter Roman

    (@roman17trushanov)

    Dear FancyBox Support Team,

    Thank you for opening a ticket regarding my initial request!

    I could not help but notice another accessibility warning flagged by the respectable tool https://wave.webaim.org/

    You can look at the original view by following this link https://wave.webaim.org/report#/https://www.arbeitslosenselbsthilfe.org/bekommen-buergergeld-empfaenger-weihnachtsgeld-vom-jobcenter/

    What is the matter:
    A positive tabindex value is present.

    Why It Matters:
    Tabindex values of 1 or greater specify an explicit tab/navigation order for page elements. Because it modifies the default tab order, it can cause confusion and result in decreased keyboard accessibility, it should be avoided.

    What To Do:
    If the natural tab order is already logical, remove the tabindex. Otherwise, consider restructuring the page so that tabindex is not needed. If tabindex is maintained, ensure that the resulting navigation is logical and complete.

    The Algorithm in English:
    A tabindex attribute is present and has a positive value.

    These lines of code were flagged by wawe.webaim.org:

    • <a id=”fancybox-close” href=”javascript:;” title=”Close” class=”fancy-ico” tabindex=”1″><span></span></a>
    • <a id=”fancybox-next” href=”javascript:;” title=”Next” class=”fancy-ico” tabindex=”2″><span></span></a>
    • <a id=”fancybox-prev” href=”javascript:;” title=”Previous” class=”fancy-ico” tabindex=”3″><span></span></a>

    Could you please review if the use of tabindex in these instances is necessary? If not, it would be beneficial to remove them or ensure the navigation order remains logical and complete.

    Thank you for your attention to this matter. I look forward to your response.

    Best regards,

    Roman Trushanov

    • This reply was modified 6 months, 1 week ago by Roman.
    • This reply was modified 6 months, 1 week ago by Roman.
    Plugin Support beatrice12

    (@beatrice12)

    Hi @roman17trushanov,

    Thank you for letting us know! I will pass this info to our development team and we will look closely into it.

    Warmly,

    Beatrice.

    Plugin Support beatrice12

    (@beatrice12)

    This topic will be marked as resolved as we have an open ticket on GitHub regarding this. Please keep in mind that the ‘resolved’ status is only for this support thread, not the issue on GitHub.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Tags