Accessibility

  • Resolved Patrick Boehner

    (@patrick-b)


    1 year, 1 month ago

    Hi,

    Love the plugin and appreciate that you have only extended the core block. A couple of thoughts. Right now, the video is not accessible. There’s no way to navigate or interact with it since it’s just an image and a div. One simple change would be to change the div to a button ( I know this will require a bit of extra CSS), that way, someone using a screen reader and keyboard can trigger the video. It would also be good to provide a label for the button, either via an aria-label or a span with screen-reader-text class.

    Current Button

    <div class="play-button"></div>

    Updated Button

    <button class="play-button" aria-label="Play Video"></button>

<button class="play-button"><span class="screen-reader-text">Play Video</span></button>

    In an ideal world it would be great to extend the block to add a custom field to the settings for a video title ( avoid the need for api calls ) and then that could be appended to the “Play Video: …. ” text.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Mark Wilkinson

    (@wpmarkuk)

    Hi Patrick,

    Thanks for the suggestion and it certainly sounds like a sensible approach to me.

    This is something that you could achieve yourself with just a little code. The play button, like the rest of the markup is added using a callback function on the hd_bcve_video_thumbnail_markup hook.

    This means that you could easily unhook the plugins callback that adds the play button.

    remove_action( 'hd_bcve_video_thumbnail_markup', 'hd_bcve_add_video_play_button', 20, 4 );

    Then you could hook something in which adds your button. For example:

    /**
 * Adds the play button div to the markup.
 *
 * @param array  $block           The block array.
 * @param string $video_id        The ID of the embedded video.
 * @param string $thumbnail_url   The URL of the video thumbnail.
 * @param array  $wrapper_classes An array of CSS classes to add to the wrapper.
 */
function prefix_add_video_play_button( $block, $video_id, $thumbnail_url, $wrapper_classes ) {

	?>
	<button class="play-button" aria-label="Play Video"></button>
	<?php

}

add_action( 'hd_bcve_video_thumbnail_markup', 'prefix_add_video_play_button', 20, 4 );

    This would achieve the result you are after and then you could add the following lines of CSS, maybe in the customizer to style it.

    .hd-bcve-wrapper .play-button {
    background-color: transparent;
    border: none;
}

    I may well add something like this in the future, but for now the above should achieve the results you are looking for.

    Thread Starter Patrick Boehner

    (@patrick-b)

    Hi Mark,

    I had looked at the code but completely missed that. Thank you for making the plugin extendable. I’ll try that out.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Accessibility’ is closed to new replies.