Low contrast issue

  • Resolved shrestharavee1

    (@shrestharavee1)


    2 months, 3 weeks ago

    We are using smart slider to display our faculty, but when i run the page through Wave accessibility checker I see very low contrast issue. How can i fix this?

    The contrast issue is in the note section. 

    <div?role="note"?class="n2-ss-slide--focus"?tabindex="-1"?style="opacity: 1; color: rgba(0, 0, 0, 0); background-color: rgb(255, 255, 255);">
    Slide 1 - Karl Witt
    </div>

    Here is the tool we use: https://wave.webaim.org/extension/

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Laszlo

    (@laszloszalvak)

    Hi @shrestharavee1

    You can actually ignore that warning, as the purpose of that element is just to make screen readers be able to read the Slide title, using ARIA note roles, Basically the role=”note” attribute indicates that the content within the div is supplementary or informative, but not essential for interacting with the main functionality of the page.

    On the other hand if you check the source code, and the styles, you will see that element is actually not visible at all, as it has opacity 0, and it is an absolute positioned element with z-index -99999, so as you can see this element is not intended for displaying, thus the contrast warning is not relevant at all.

    Best regards,
    Laszlo.

    Thread Starter shrestharavee1

    (@shrestharavee1)

    Thanks Laszlo for the quick and detailed response. This is quite helpful!

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