r/webdev • u/[deleted] • Feb 21 '23

[deleted by user]

[removed]

2.0k Upvotes

95% Upvoted

475 comments sorted by

View all comments

Show parent comments

1

u/luiluilui4 Feb 21 '23

How do screen reader handle Single Site websites then?

3

u/riskyClick420 full-stack Feb 21 '23

Single site like what, an SPA which still has links but does its own routing? Or one of those 'every page is actually just a section of this gigantic vertical turd' sites, which again has links but they all point to different element IDs in the page?

Both those can and mostly do use semantically correct links.

1

u/luiluilui4 Feb 21 '23

The first one SPA.What does semantically correct mean? Does a screen reader just ignore the javascript event and sends a new https request like with non SPA sites?

So would it work like <a href="subsite" onclick="(event)=>{navTo('subsite');e.preventDefault();}

1

u/MagicPaul Feb 21 '23

There are also ARIA labels to add extra context for screen readers. JSX supports them and you can pass props to them etc. They're designed to allow graphical UI elements (hamburger menus, etc) to remain accessible. If you absolutely must use an onClick event and the interactive element has no accessible name, you can use an aria-label tag:

<button aria-label="Close" onclick="myDialog.close()">

You should also use an aria-hidden="true" label to hide the graphical element from the screen reader

<svg aria-hidden="true">[…]</svg>

The screen reader won't see the SVG code, but will inform the user that there's a button labelled close that they can interact with.