simorgh icon indicating copy to clipboard operation
simorgh copied to clipboard

Improve screenreader UX for audio player placeholder

Open gavinspence opened this issue 3 years ago • 0 comments

Is your feature request related to a problem? Please describe. We've recently introduced a loading indicator placeholder in place of the audio player on our radio and podcast pages. This is to better inform those on slower devices and connections that a media player is loading instead of just showing a white space.

We've broken out some of the accessibility requirements as we require translations in order to complete them.

Describe the solution you'd like For services that have audio pages, ensure the screenreader UX is correct and we read out 'audio player loading'.

Given I use a screen reader And I am viewing a page with the audio player When the audio player loading indicator is displayed And I navigate to this element Then this content is announced as “Audio player loading” (translated) And no HTML semantics are announced (as it’s a strong element which doesn’t convey semantics) And is announced in the content order in the same position as the audio player would be

Given I use a screen reader And I am viewing a page with the audio player When the audio player loading is complete Then I should not be able to navigate to content announced as “Audio player loading” (translated)

Translations have been requested on #wstranslations for the following services:

  • afaanoromoo
  • afrique
  • amharic
  • arabic
  • bengali
  • burmese
  • gahuza
  • hausa
  • hindi
  • indonesia
  • korean
  • kyrgyz
  • marathi
  • nepali
  • pashto
  • persian
  • portuguese
  • russian
  • somali
  • swahili
  • tamil
  • tigrinya
  • urdu
  • uzbek
  • zhongwen/simp
  • zhongwen/trad

Describe alternatives you've considered NA

Testing notes [Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

  • [ ] This feature is expected to need manual testing.

Additional context Add any other context or screenshots about the feature request here.

gavinspence avatar Apr 08 '21 12:04 gavinspence