about icon indicating copy to clipboard operation
about copied to clipboard

Published 20 hours ago • verified publisher icon sourcegraph

[a11y]: Blog/Podcast/Press/Msc a11y cleanup

Open st0nebreaker opened this issue 2 years ago • 0 comments

Audit type

General/Other

User journey audit issue

#5503, #5519

Problem description

  1. On an XS screen (320px), the podcast index page has too much padding on the article tags. The text is not reader friendly.
  2. On a S screen, the podcast posts' YouTube video overlaps and is cut off.
  3. 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.
  1. For screenreaders, overly nested article tags are hard to distinguish and navigate. We should limit how much we nest article elements. Seen on the Podcast index cards, and each social post page.

Screen Shot 2022-08-11 at 4 55 40 PM Screen Shot 2022-08-11 at 4 56 50 PM Screen Shot 2022-08-11 at 5 17 06 PM Screen Shot 2022-08-11 at 5 12 02 PM 5. 404 page- Mobile text isn't legible with background. Ensure all images have an alt tag and headings are in proper semantic order. Screen Shot 2022-10-07 at 4 19 21 PM 6. /news, /resources/abcs-book, /resources/universal-code-search-ebook, and /white-papers/remote-work-easier - Ensure images are legible on 320px screen width, images have alt tags, and headings are in order. Screen Shot 2022-10-07 at 4 03 12 PM 7. /uninstall - Header order. /jobs - Image alt tag issue (don't mention photo/image/etc in an alt tag). 8. Resource list items - Keyboard focus should match the hover experience. Links read a bit weird with a screen reader.

Expected behavior

  1. There shouldn't be too much padding for text blocks on XS screens so that the content is more reader friendly.
  2. Our YouTube videos should be contained in their layout on all screen sizes.
  3. Text should be left aligned on XS screens to make the content more reader friendly (especially noticeable for long headers on these screen sizes).
  4. We should only nest article tags when necessary to make for a better screen reader experience.

Additional details

No response

st0nebreaker avatar Aug 11 '22 23:08 st0nebreaker