From 05db3e091c899d7cca10ec2455c7cec911a2b041 Mon Sep 17 00:00:00 2001 From: Dustin Whisman Date: Sat, 22 Jun 2024 15:10:57 -0600 Subject: [PATCH] feat: how accessible is reddit? --- .../how-accessible-is-reddit.md | 236 ++++++++++++++++++ .../reddit/desktop-pages-h.png | Bin 0 -> 2241681 bytes .../reddit/desktop-pages-v.png | Bin 0 -> 2213275 bytes .../reddit/mobile-pages.png | Bin 0 -> 761282 bytes .../reddit/unclickable-links.png | Bin 0 -> 45321 bytes 5 files changed, 236 insertions(+) create mode 100644 pages/writing/accessibility-top-100/how-accessible-is-reddit.md create mode 100644 src/public/images/accessibility-top-100/reddit/desktop-pages-h.png create mode 100644 src/public/images/accessibility-top-100/reddit/desktop-pages-v.png create mode 100644 src/public/images/accessibility-top-100/reddit/mobile-pages.png create mode 100644 src/public/images/accessibility-top-100/reddit/unclickable-links.png diff --git a/pages/writing/accessibility-top-100/how-accessible-is-reddit.md b/pages/writing/accessibility-top-100/how-accessible-is-reddit.md new file mode 100644 index 00000000..733415de --- /dev/null +++ b/pages/writing/accessibility-top-100/how-accessible-is-reddit.md @@ -0,0 +1,236 @@ +--- +title: "How accessible is reddit? - Writing - Dustin Whisman" +description: "How accessible is reddit? This is part 6 of a series evaluating the accessibility of the top 100 websites in the US." +articleTitle: "How accessible is reddit?" +layout: default +date: 2024-06-22T00:00:00.000Z +tags: + - writing + - accessibility top 100 +--- + +# How accessible is reddit? + +_This is part 6 of a [series](/writing/accessibility-top-100/) evaluating the accessibility of the top 100 websites in the US. This time I'll be taking a look at reddit. Read the [methodology description](/writing/accessibility-top-100/methodology) to learn about my process._ + +{% include 'partials/published-date.njk' %} + +## What I tested + +For reddit, I decided to test the [home page](https://www.reddit.com/) and the subreddit page for [/r/todayilearned](https://www.reddit.com/r/todayilearned/), including the [page for the top post](https://www.reddit.com/r/todayilearned/comments/1dluhdg/til_there_are_over_1000_homes_in_edinburgh/) at the time. + +
+ + + A composition of screenshots from the desktop version of reddit.com, showing the home page, a subreddit page, and a post page. + +
These are the pages that were tested on desktop.
+
+ +As seems to always be the case, different markup is served on desktop compared to mobile, despite very few visual differences. It mostly seems like an excuse to prompt users to use the mobile app instead, which I bet feels great for reddit’s web developers. + +
+ A composition of screenshots from the desktop version of reddit.com, showing the home page, a subreddit page, and a post page. +
These are the pages that were tested on mobile.
+
+ +I evaluated reddit on June 22nd, 2024. + +## Testing the home page + +Before I get into it, I’ll plug a bookmarklet that I put together to add visual regressions to pages that have accessibility issues or HTML anti-patterns. I’m calling it [Visua11yze](https://codepen.io/dustin-jw/pen/jOoMqQY), and you can check it out if you want, even though it’s very much a prototype at this point. Anyway, reddit has a Content Security Policy (CSP) that prevents users from loading their own scripts or stylesheets this way, which is an accessibility violation of its own (people need to be able to fix your broken stuff if possible). If I get around to turning Visua11yze into a browser extension, that might bypass the CSP, but still. + +### Automated scans + +#### Desktop + +It turns out that reddit uses a lot of custom elements, like ``, that make it somewhat difficult to evaluate for accessibility. axe DevTools flagged `aria-label` as invalid for those elements, which might be true, depending on what element they extend. Is it a spicy `
`? Then yes, it’s invalid, but if it’s a spicy ``, then it’s fine. Inspecting one of them and looking at the accessibility tree reveals that the role is “generic”, which does mean that `aria-label` is invalid here. There’s a ton of invalid ARIA usage here that I don’t have time to get into—just trust me, it’s a lot. + +The custom elements also pose problems for developers to figure out how to use them without introducing accessibility issues or invalid markup. For example, the `` custom element at the top of the page contains a `
    ` that has a `` as a direct child, which contains one `
  • ` and several `` custom elements that I’m not going to dig into. The basic structure is like so: + +```html + +
    +
      + + ... +
    • ...
    • + ... + ... + ... + ... + ... +
      +
    +
    +
    +``` + +However [`
      ` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul#technical_summary) can only contain `
    • `, `