I'm working on a content curation website. One of the things you can curate is a widget with some text and no character limit. The widget (and its preview) are rendered by simplying setting overflow: hidden
The administrator is currently expected to preview the widget and check that it looks "alright" before publishing.
However, if you're using a screen reader, the screen reader reads out even the hidden text, so a visually-impaired administrator would have no idea that the content will overflow for a sighted user.
One solution is to enforce a character limit, which we'd originally avoided because character limits aren't great for non-monospaced fonts.
However, before resorting to that, I was wondering if it's possible to hide the overflowed content from a screen reader?
One admittedly hacky way of solving this is to follow this question's answer first:
Transfer overflow from one div to another
This will allow you to separate the overflowed content to another div. After that, you could add aria-hidden=true with JavaScript like so:
elem.setAttribute("aria-hidden", "true");
In the example I gave you above, the snippet uses jQuery, so you could also do it like this:
p2.attr( "aria-hidden", "true" );
I don't think this will work if the overflow is horizontal. Solving that would be quite hard, but this works for vertical overflows.
Hope that helped!