[a11y]: Blog/Podcast/Press a11y cleanup
Created by: st0nebraker
Audit type
General/Other
User journey audit issue
Problem description
- On an XS screen (320px), the podcast index page has too much padding on the article tags. The text is not reader friendly.
- On a S screen, the podcast posts' YouTube video overlaps and is cut off.
- On an XS screen (320px), all social index & post pages should left-align titles to be more readable. See image below. (
/podcasts
,/blog
,/press
& child post pages)
-
NOTE: This is from posts coming in not using the
<YouTube />
component. Convert all YT iframes not using the reusable component. And setup some code monitoring (maybe with Code Insights?) to detect when code comes into the repo using YT embedded iframes instead of our component outlined in the Blog Starter Pack.
- For screenreaders, overly nested
article
tags are hard to distinguish and navigate. We should limit how much we nestarticle
elements. Seen on the Podcast index cards, and each social post page.
Expected behavior
- There shouldn't be too much padding for text blocks on XS screens so that the content is more reader friendly.
- Our YouTube videos should be contained in their layout on all screen sizes.
- Text should be left aligned on XS screens to make the content more reader friendly (especially noticeable for long headers on these screen sizes).
- We should only nest
article
tags when necessary to make for a better screen reader experience.
Additional details
No response