CODEWITHSUNDEEP
accessibilityvoiceoveryoutube-iframe-api
Eduardo Backes
Eduardo Backes

Reputation: 1

Iframe on iOS Safari and VoiceOver focusing on invisible element before the video itself

Accessing an YouTube iframe using VoiceOver works great when accessing it through MacOS Safari. But when trying to access it via iOS Safari VoiceOver focus on an invisible element before the video and announces it as actionable, but it's not possible to actually activate it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Introduction</h1>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </p>

    <h2>Header 2</h2>

    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </p>

    <iframe
      src="https://www.youtube.com/embed/jNQXAC9IVRw?si=_C7DZAOXKFWhOHmx"
      title="YouTube video player"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    ></iframe>
  </body>
</html>

screenshot of the invisible element being focused

After changing focus from the second paragraph to the video, this is what is focused, it reads "Double tap to play or pause" but when double tapped nothing happens.

iOS Version: 18.1.1 Model Name: iPhone 12

I followed YouTube Player API Reference for iframe Embeds, tried to find a solution for this online, but no success. I expect that the VoiceOver focus the element the same way the element is focused on desktop.

Upvotes: 0

Views: 22

Answers (0)

Related Questions