amp-timeago screen reader verbalization is bad

TomerAberbach commented 3 years ago

What's the issue?

amp-timeago is not verbalized well by Voice Over on Mac and I suspect the same is true for other screen readers and other operating systems. There are a few problems:

The placeholder text is verbalized instead of the generated time ago text and the element is called a "group". Verbalizing the generated time ago text requires an extra key press.
The element is verbalized separately from sibling text nodes, but it should be merged with them.

How do we reproduce the issue?

See the video of the issue and part of the solution as well as the associated playground.

What browsers are affected?

All browsers seem to be affected.

Which AMP version is affected?

The AMP version printed to the console is 2101230412003.

Proposed Solution

Adding role="text" to the amp-timeago component, as shown in the video and playground, fixes most of the problems. I think it would be beneficial for role="text" to be set on this component by default so that it is accessible by default.

However, even with role="text" the placeholder text of the component is still verbalized shortly after the generated time ago text because it is set as the title of the component. I question whether the title attribute should be set by default for this component. I think it's redundant for screen reader users and I don't think sighted users are hovering over the amp-timeago text to see the full datetime. I would suggest not setting the title attribute at all. amp-timeago should behave like normal text.

caroqliu commented 3 years ago

Confirmed this only affects version 0.1. Version 1.0 behaves as expected in the playground.

kristoferbaxter commented 3 years ago

Thanks @caroqliu, closing this issue with the fix for 0.1 landed.

ampproject / amphtml