3

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?

Alec
  • 2,432
  • 2
  • 18
  • 28

4 Answers4

1

aria-hidden="true" will make screen readers to not perceive that element and its content, which means that it will not be read out.

aria-label will set the text which assistive technologies (screen readers, etc) will perceive.

http://www.w3.org/TR/wai-aria/states_and_properties

Jeni
  • 320
  • 2
  • 12
  • Can `aria-label` work on a `div`? And will it read _both_ the label and the contents? – Alec Aug 19 '16 at 09:09
  • No, aria-label will not work on a div, a screen reader will only consider it for form related controls and media. – Fiona - myaccessible.website Aug 19 '16 at 09:20
  • Yes you can work with `aria-label` on `div`. *The aria-label attribute is used to define a string that labels the current element.*. It is not restricted for particular element. **This attribute can be used with any typical HTML element** Refer here: https://www.w3.org/TR/wai-aria/states_and_properties#aria-label @Alec – Jeni Aug 19 '16 at 09:42
0

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!

Community
  • 1
  • 1
fnune
  • 5,256
  • 1
  • 21
  • 35
  • This sounds like the most likely answer, but I haven't/won't test - we're just going to set a character limit to keep things simple. – Alec Aug 19 '16 at 09:10
  • Hope it goes well. Consider upvoting too :) – fnune Aug 19 '16 at 09:14
0

This may not be the answer you're after but my thinking is always that accessibility should be simple!

What's the worst case here? The screen reader user has to listen to maybe a sentence more that other users don't see? Or could it actually be paragraphs of text? If it's the former, I wouldn't worry about it at all.

Fiona - myaccessible.website
  • 14,481
  • 16
  • 82
  • 117
  • The problem is that partially-sighted users will not be able to effectively administrate content for sighted users, who might get text that has been cut off long before a screen reader would suggest. – Alec Aug 19 '16 at 08:58
  • Ah, got you. In that case yeah a character limit seems the most sensible – Fiona - myaccessible.website Aug 19 '16 at 09:21
-1

To hide content from screen reader you can use attribute aria-hidden="true".

<span aria-hidden="true">Here be redundant or extraneous content</span>

Source.

3rdthemagical
  • 5,271
  • 18
  • 36