search

alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
https://www.gov.uk/design-system
MIT License
509 stars 231 forks source link

Payment video not accessible for screen readers #904

Closed NickColley closed 4 years ago

NickColley commented 5 years ago

WCAG Reference:

Issue ID: DAC_Issue11 URL: https://design-system.service.gov.uk/patterns/payment-card-details/

Screen Shot

The controls used in the video were not labelled for users that rely on audio feedback i.e. screen reader users and ZoomText with speech users.

Screen reader comments

“A member of the support team advised me that if the mouse was used to move to an image, video controls visually appeared on the page. I was not able to locate video controls when navigating in context with the arrow keys in JAWS and in a non-testing environment would have been unaware of the video. After investigation, with visual assistance, I found that with the tab key my focus visually reached the controls but the controls did not announce to me, with a paragraph of text reading instead for each control. I was therefore unable to interact with the video controls with JAWS as, once I selected the ‘Enter’ or ‘space’ keys, the page did not appear to change or update. I further found that when using the dialogue menus and other shortcut keys, for example ‘f’, the controls did not receive focus. With NVDA I was able to locate the ‘Play’ button while in context, however, once the button was selected, the controls vanished from the page and could not be located. I was able to interact with the video using VoiceOver for iPhone and Mac in the expected manner.”

Low vision user comments

“Whilst there was not an issue with accessing the multimedia itself, as when scrolling down the page on the left side a visible Play button was identifiable, there was no text reference to any multimedia above the video tile. Were a user to move down the page and scan across at the same time, they could possibly overlook the Play button. My expectation would have been to have found a Play symbol icon in the middle of the video image and a reference to it in the text above.”

Solution

Ensure that all controls are clear and available to all users, although an aria label has been provided stating that no audio is present, users would still expect to be able to play the video. The information that the video is referring to is present on the page and the video may not be required; consider using an image instead that contains a descriptive alt.

NickColley commented 5 years ago

@selfthinker this might be useful for your video player research.

We are closing this and will investigate if this is an issue in Microsoft Edge and then report any bugs we find, but we don't believe we can fix this without building an entire video player component.

NickColley commented 5 years ago

We think that given the content is explained outside of this video the video content is complementary.

We want to talk to the accessibility team to see if we should add this to our accessibility statement.

selfthinker commented 5 years ago

I've just discussed this with @accessiblewebuk.

We have a couple of issues here. The question what to do if something is a browser bug will be interpreted differently by different people. If this video had more important content, there would be more of a reason to use a proper player. The fact that this video is only an enhancement to the text is definitely helpful.

Another WCAG criterion is important here:

1.2.1 Audio-only and Video-only (Prerecorded)

For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:

[...] Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

As the video is a media alternative for text, this is fine. But you could argue it is not "clearly labeled as such". It is labeled for screen reader users but not to other users, like screen magnification users.

We would advise to fix this by moving the aria-label text out and add it as visible text before the video, ideally programmatically linking to it. The text itself is definitely good. It's just problematic that it isn't accessible to everyone. Therefore not everyone might understand that there is a video and what its function is.

selfthinker commented 5 years ago

Although we agree that the native video player fails 1.3.1 and 4.1.2, we would say it is for the browser vendor to fix and not for us as it is clearly a browser bug. If this can be fixed easily, we should fix it anyway (for moral, not legal reasons). But it looks like it would be more difficult in this case.

We should definitely report these issues to the relevant browser vendors. (Relevant bug reports might already exist.)

As soon as the 1.2.1 issue with the labelling is fixed, we don't think this needs to be in the Accessibility Statement. But you can choose to add it into the statement voluntarily under a new section if you think it would be helpful for users to know about the issues with the native video player.

NickColley commented 5 years ago

I've expanded the scope of our existing investigation card to cover more browsers and assistive technologies based on your recommendation: https://github.com/alphagov/govuk-design-system/issues/911

I've asked @amyhupe or @m-green to give their feedback on moving the label onto the page.

amyhupe commented 5 years ago

I'm happy with the suggestion. It would be good to make the wording slightly friendlier (apologies, I hadn't seen it before as the aria-label).

My suggestion would be to change it from:

"Visual demonstration of the card number validation user interaction described. This video has no audio."

To:

"This video shows the card number validation in practice. It doesn't have any audio."

amyhupe commented 4 years ago

We've improved the existing documentation based on @selfthinker's recommendations - ensuring that the wording is clearer and is exposed in the main body of the page.

We think this will help to make clear that the video is supplementary content and not required in order to understand the guidance.

On this basis, we've decided not to include this in our statement, but will reconsider if we receive any feedback which suggests we should take a different approach.