Re: Good practice options for introducing videos and tables

Hi Louise,

For the button: use something like this inside of the button-Element in addition to the graphic:

<span class="visually-hidden“>Play/ Pause video</span>

Do you know how to hide content visually?

In an ideal world you would use JS to show only „Play“ or „Pause“ but in the real world every screenreader user should understand a button with a text like this

About your table: I’m not sure what you want. If there is jaust to columns it looks like a layout table to me and you don’t need any semantics at all

Something like this is completely understandable:

Director: Peter
Actress: Naomi
Coder: Marc

If you want to add semantics I'd rather use dl with dt/dt instead…

Marc



Am 19.03.2021 um 15:48 schrieb Louise Lister <Louise.Lister@iop.org<mailto:Louise.Lister@iop.org>>:



Hello all,

I hope someone can help. Got a couple of questions about the way we introduce videos and data tables on webpages.

Introducing videos
We have some videos on our website that do not any introductory text. The HTML looks like this:

<drupal-entity data-embed-button="video_remote_" data-entity-embed-display="view_mode:media.full" data-entity-type="media" data-entity-uuid=""></drupal-entity>

When running NVDA over the page and tabbing through the content, it will clearly state there is a “button”, but unless you see the button in context, you may not know what it does.

My thinking is that the best way to get around this is to also use content to introduce it in this way: “Watch the video below to find out how to …”, and/or change the alt text for the button graphic , if that’s possible, to “A video is playable here”. Or is there a cleverer way that I am not aware of?

Introducing tables
We also have some tables that are simple but don’t use a caption tag (the tag needs a tweak to make it look ‘okay’ before we use it). Instead, we often use headings instead. It sounds okay in NVDA to me, but should we be using captions as the rule? Here’s what the HTML could look like:

<h2>Committee</h2>
<table dir="ltr">
              <tbody>
                             <tr>
                                           <th scope="row">Role</th>
                                           <td>Person's name</td>
                             </tr>
                             <tr>
                                           <th scope="row">Role</th>
                                           <td>Person's name</td>
                             </tr>
              </tbody>
</table>

Thanks, I appreciate this is probably basic stuff, just hoped for some thoughts on the above.

Louise


________________________________
This email (and attachments) are confidential and intended for the addressee(s) only. If you are not the intended recipient please immediately notify the sender, permanently and securely delete any copies and do not take action with it or in reliance on it. Any views expressed are the author's and do not represent those of IOP, except where specifically stated. IOP takes reasonable precautions to protect against viruses but accepts no responsibility for loss or damage arising from virus infection. For the protection of IOP's systems and staff emails are scanned automatically..

Institute of Physics. Registered charity no. 293851 (England & Wales) and SCO40092 (Scotland)
Registered Office:  37 Caledonian Road, London, N1 9BU<https://goo.gl/maps/DUHbKcbzuUN2>

Your privacy is important to us. For information about how IOP uses your personal data, please see our Privacy Policy<https://emea01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.iop.org%2Fprivacy%2Findex.html&data=02%7C01%7C%7C6716aa3c6fd84da5102808d5c0b234a0%7Cf9ee42e6bad04e639115f704f9ccceed%7C0%7C0%7C636626793962820374&sdata=RI6OT4MumRlklNzF5i2M9ZxS6P%2FxxLg%2FJwcnMJ%2B0480%3D&reserved=0>