WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Masking H1

for

From: JP Jamous
Date: Nov 17, 2016 12:58PM

Nick,

I tested this code and the result with JAWS 17 was fine. However, NVDA 2016.3 read each span separate, while announcing heading level 1

<h1>
<span style="display: block;">
Good
</span>
<span style="display: block;">
Afternoon
</span>
<span style="display: block;">
JP
</span>
</h1>


Wasn't that the markup you tested?
-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Beranek, Nicholas
Sent: Thursday, November 17, 2016 12:00 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Masking H1

Hey JP,

You have a few options:

1) Decrease the width of the container to force each word on a new line;
2) Or instead of using a <br />, wrap each word in a <span> and use display: block to ensure each word has its own line

Does that make sense? Tested with NVDA and Firefox and having each word wrapped in a <span> still reads out the string in its entirety versus "heading level 1 Good", "heading level 1 Morning", etc.

Nick Beranek
Capital One

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of JP Jamous
Sent: Thursday, November 17, 2016 12:53 PM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: [WebAIM] Masking H1

Folks,



I have a H1 that is causing excessive readability with screen readers. Here is the mark up.



<h1>

Good

<br />

Morning

<br />

JP

</h1



If the user reads this while down-arrowing or swiping on an iPhone, each word is read separately followed or proceeded by Heading level 1.



I would like to be able to mask this. What would be the best approach?