4 ms·

"Most websites should be compatible with screenreaders", and yet, the first line of text in the website is "♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡♥♡"; With

• graypegg 3y ago
  My browser (Chrome 120) does correctly intuit that the header is not a landmark, so it at least won't be included in the landmark rotor. (In VO) Still though, it would be ideal to remove that from a11y tree since it's totally useless in there.
• layer8 3y ago
  Seems accurate? ;)
• surprisetalk 3y ago
  Ha! Thanks for catching that! I think that demonstrates how difficult it is to make even a simple website accessible. I assumed that since my browser's "reader mode" was all good, then screen readers would know how to parse it too. I do like the heart aesthetic, so how exactly would I make it more accessible?
  • graypegg 3y ago
    role="presentation" will remove it from the a11y tree! Easy fix. Most browsers will notice the characters in the element are not human readable and make some tweaks to make "heartheartheartheartheartheartheartheart" less likely though, even in the current version!
    • surprisetalk 3y ago
      Thank you! I added it.
      • graypegg 3y ago
        In case you're maybe interested, I wrote up a little thing about how I think of accessible interfaces and designing for them: https://graypegg.com/2023/11/25/the-private-definition-of-accessible.html https://graypegg.com/2023/11/25/the-private-definition-of-ac... Edit: decided to post it here, https://news.ycombinator.com/item?id=38683774 https://news.ycombinator.com/item?id=38683774
        • deleted 3y ago
          [deleted]
      • devinprater 3y ago
        Thank you!
  • jwarren 3y ago
    Depends - do you want screen readers to hear something? If so, add a `aria-label="heart"` or similar. If not, add `role="presentation"` to remove it from the accessibility tree altogether. You might also want to change the element from a `header` to something else, like a `div` or a `span` or even a `figure` instead. Then put "potato.cheap is home of the... The "Cheap" Web" inside the `header` instead.
  • varispeed 3y ago
    The problem is that accessibility has been treated as an afterthought, so designers, UX and people crafting HTML usually are not in habit of embedding accessibility into their works. It often comes when someone disabled complaints or if there is a regulation they didn't know about and there is "oh sh..." moment where accessibility is tacked onto already done project. So it's difficult in the sense that people don't think about it, there are not so many tutorials available and so on.
    • graypegg 3y ago
      YES. I think it's this unique form of after thought, where people imagine accessibility as a "score" that you can "increase". The web developer lowest-common-denominator cares about it, but only at this weird surface level. More aria tags = more accessibility points. It becomes this weird game where we end up with insanely noisy markup, which creates a horrible described interface for anyone actually using assistive technology. It's an interface like any other. We'd be weirded out if designers graded their screen specs as "visual" enough. More pixels are required in this area, think of our screen users! They need more pixels!
• jerf 3y ago
  How should an interested personal web developer find how their website sounds through a screen reader?
  • graypegg 3y ago
    Voice Over is insanely easy to work with, I recommend it to everyone I work with. I would say it takes maybe 20minutes to get a hang of the basic shortcuts and navigation modes. I've been thinking about making a "VO for Web Devs" cheat sheet at some point, would that be a useful thing for you? (Of course, I'm making assumptions about being in the apple garden.)
    • jerf 3y ago
      Well, as it happens I'm not, but I imagine it would be useful for people in general, and I'll promise you an upvote on HN if I see it. :) I imagine you can make a solid guide if you really focus it on the use case of "here's how to evaluate your site for this specific purpose".
      • graypegg 3y ago
        Noted! I sadly don't have much experience with the options for windows / linux flavours, but I'm sure something like NVDA [0] could be useful for you to test these things! The idea would be to learn the tool first, (feel at least capable to open the browser from your taskbar and jump around a few tabs for example. This is generally a 20min task.) then set up a few goals to do on your site. Finding a specific page, or making an account. Even with sight, and knowledge of your site, you'll very quickly hear the odd-ball places where the descriptions give duplicated info or even false info. Just don't touch the mouse! Experience the interface, as if this was your portal into the internet. I think I'll get moving on that cheat sheet then! Thanks eh! :) [0] https://www.nvaccess.org/download/ https://www.nvaccess.org/download/
  • alexb_ 3y ago
    Good accessibility tip: Enable any accessibility options you need to, and then turn your monitor off. If you can't navigate your website, there's an issue.
• deleted 3y ago
  [deleted]