Solved ADA Compliance HELP

Hello Brett,

For the first issue, let's try adding this JavaScript code and then test if it solves the issue. Go to Divi -> Theme Options -> Integration -> Add code to the < head > of your blog;

HTML:

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        const prevArrowIcon = document.getElementsByClassName("et-pb-arrow-prev")[0]
        prevArrowIcon.setAttribute("title", "previous");
        const nextArrowIcon = document.getElementsByClassName("et-pb-arrow-next")[0]
        nextArrowIcon.setAttribute("title", "next");
    });
</script>

Let me know if this worked.

 

Please try the following code. I tested this one and it is working:

HTML:

<script>
    function setArrowTitles() {
  let prevArrowIcon = document.getElementsByClassName("et-pb-arrow-prev")[0];
  let nextArrowIcon = document.getElementsByClassName("et-pb-arrow-next")[0];

  if (prevArrowIcon && nextArrowIcon) {
    prevArrowIcon.setAttribute("title", "previous");
    nextArrowIcon.setAttribute("title", "next");
  } else {
    setTimeout(setArrowTitles, 100);
  }
}

window.addEventListener('DOMContentLoaded', setArrowTitles);

</script>

 

Hey Brett,

The code works but I checked further and you shouldn't rely just on the title attributes because they will not be picked by most screen readers.

If you are really concerned about accessibly, then modify the code to something like this

HTML:

<script>
    function setArrowTitles() {
      let prevArrowIcon = document.getElementsByClassName("et-pb-arrow-prev")[0];
      let nextArrowIcon = document.getElementsByClassName("et-pb-arrow-next")[0];

      if (prevArrowIcon && nextArrowIcon) {
        prevArrowIcon.setAttribute("aria-label", "Previous Slide");
        prevArrowIcon.setAttribute("title", "previous");
        nextArrowIcon.setAttribute("aria-label", "Next Slide");
        nextArrowIcon.setAttribute("title", "next");
      } else {
        setTimeout(setArrowTitles, 100);
      }
    }

    window.addEventListener('DOMContentLoaded', setArrowTitles);
</script>