WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Masking H1

for

Number of posts in this thread: 13 (In chronological order)

From: JP Jamous
Date: Thu, Nov 17 2016 10:52AM
Subject: Masking H1
No previous message | Next message →

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?

From: Beranek, Nicholas
Date: Thu, Nov 17 2016 10:59AM
Subject: Re: Masking H1
← Previous message | Next message →

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 ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, November 17, 2016 12:53 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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?

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Aaron Cannon
Date: Thu, Nov 17 2016 11:13AM
Subject: Re: Masking H1
← Previous message | Next message →

#2 seems much more maintainable and less hacky to me, assuming it works with VO.

Aaron

--
This message was sent from a mobile device


> On Nov 17, 2016, at 11:59, Beranek, Nicholas < = EMAIL ADDRESS REMOVED = > wrote:
>
> 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 ADDRESS REMOVED = ] On Behalf Of JP Jamous
> Sent: Thursday, November 17, 2016 12:53 PM
> To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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?
>
> > > > >
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
> > > >

From: JP Jamous
Date: Thu, Nov 17 2016 12:22PM
Subject: Re: Masking H1
← Previous message | Next message →

Thank you Nick.

1. may not be a solution as it would screw up the visual output.
2. It would work, but as suggested by Arron, VO especially on small view would continue to read it as separate ones.

Personally, I am cool with #2, because as far as VO is concerned, Apple needs to put some serious work. I am not testing with iOS 10 or any of its minor updates as they are still failing the ARIA bugs that Paul, on here, filed with them. I have no clue why VO needs to read each DOM element separate especially Spans and other ones that are used for special symbols or layout purposes.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Thursday, November 17, 2016 12:00 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, November 17, 2016 12:53 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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?

From: Beranek, Nicholas
Date: Thu, Nov 17 2016 12:42PM
Subject: Re: Masking H1
← Previous message | Next message →

You could get creative, though, and use display: table instead of display: block. You may find this a little better in terms of layout.

Example: h1 span { display: table; }
<h1><span>Good</span> <span>Morning</span> <span>JP</span></h1>

Here's an article from CSS-Tricks about this topic. The author goes through a few options and then settles on display: table.

https://css-tricks.com/injecting-line-break/

Nick

--
Nick Beranek
Digital Accessibility Team


On 11/17/16, 2:22 PM, "WebAIM-Forum on behalf of JP Jamous" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:

Thank you Nick.

1. may not be a solution as it would screw up the visual output.
2. It would work, but as suggested by Arron, VO especially on small view would continue to read it as separate ones.

Personally, I am cool with #2, because as far as VO is concerned, Apple needs to put some serious work. I am not testing with iOS 10 or any of its minor updates as they are still failing the ARIA bugs that Paul, on here, filed with them. I have no clue why VO needs to read each DOM element separate especially Spans and other ones that are used for special symbols or layout purposes.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Thursday, November 17, 2016 12:00 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, November 17, 2016 12:53 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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?

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.





The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: JP Jamous
Date: Thu, Nov 17 2016 12:58PM
Subject: Re: Masking H1
← Previous message | Next message →

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 ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Thursday, November 17, 2016 12:00 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, November 17, 2016 12:53 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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?

From: JP Jamous
Date: Thu, Nov 17 2016 1:00PM
Subject: Re: Masking H1
← Previous message | Next message →

Checking it right now.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Thursday, November 17, 2016 1:42 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Masking H1

You could get creative, though, and use display: table instead of display: block. You may find this a little better in terms of layout.

Example: h1 span { display: table; }
<h1><span>Good</span> <span>Morning</span> <span>JP</span></h1>

Here's an article from CSS-Tricks about this topic. The author goes through a few options and then settles on display: table.

https://css-tricks.com/injecting-line-break/

Nick

--
Nick Beranek
Digital Accessibility Team


On 11/17/16, 2:22 PM, "WebAIM-Forum on behalf of JP Jamous" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:

Thank you Nick.

1. may not be a solution as it would screw up the visual output.
2. It would work, but as suggested by Arron, VO especially on small view would continue to read it as separate ones.

Personally, I am cool with #2, because as far as VO is concerned, Apple needs to put some serious work. I am not testing with iOS 10 or any of its minor updates as they are still failing the ARIA bugs that Paul, on here, filed with them. I have no clue why VO needs to read each DOM element separate especially Spans and other ones that are used for special symbols or layout purposes.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Thursday, November 17, 2016 12:00 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of JP Jamous
Sent: Thursday, November 17, 2016 12:53 PM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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?

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Mallory
Date: Fri, Nov 18 2016 4:10AM
Subject: Re: Masking H1
← Previous message | Next message →

I remember the last time I had spans with display: block inside a logo.
Everyone who checked it out asked me why I had three logos, turned out
most of them were using NVDA. I've since just accepted that that's what
it
does if you're arrow-reading in some SRs.

cheers,
_mallory

On Thu, Nov 17, 2016, at 08:22 PM, JP Jamous wrote:
> Thank you Nick.
>
> 1. may not be a solution as it would screw up the visual output.
> 2. It would work, but as suggested by Arron, VO especially on small view
> would continue to read it as separate ones.
>
> Personally, I am cool with #2, because as far as VO is concerned, Apple
> needs to put some serious work. I am not testing with iOS 10 or any of
> its minor updates as they are still failing the ARIA bugs that Paul, on
> here, filed with them. I have no clue why VO needs to read each DOM
> element separate especially Spans and other ones that are used for
> special symbols or layout purposes.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Beranek, Nicholas
> Sent: Thursday, November 17, 2016 12:00 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf Of JP Jamous
> Sent: Thursday, November 17, 2016 12:53 PM
> To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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?
>
> > > at http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The
> information transmitted herewith is intended only for use by the
> individual or entity to which it is addressed. If the reader of this
> message is not the intended recipient, you are hereby notified that any
> review, retransmission, dissemination, distribution, copying or other use
> of, or taking of any action in reliance upon this information is strictly
> prohibited. If you have received this communication in error, please
> contact the sender and delete the material from your computer.
> > > at http://webaim.org/discussion/archives
> >
> > > >

From: Steve Faulkner
Date: Fri, Nov 18 2016 4:13AM
Subject: Re: Masking H1
← Previous message | Next message →

On 18 November 2016 at 11:10, Mallory < = EMAIL ADDRESS REMOVED = > wrote:

> I've since just accepted that that's what
> it
> does if you're arrow-reading in some SRs.
>

This is the expected behaviour in some SR's, dependent on how the element
is being interacted with. i have had a discussion about this with James Teh
from NVDA.

--

Regards

SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;

From: Mallory
Date: Fri, Nov 18 2016 4:23AM
Subject: Re: Masking H1
← Previous message | Next message →

yeah I don't think Jamie saw it as a bug. But it did confuse people and
I've seen
people report it as bugs on websites. I tell people to ignore those for
now
unless they have a better way somehow to multiline text.

_mallory

On Fri, Nov 18, 2016, at 12:13 PM, Steve Faulkner wrote:
> On 18 November 2016 at 11:10, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
>
> > I've since just accepted that that's what
> > it
> > does if you're arrow-reading in some SRs.
> >
>
> This is the expected behaviour in some SR's, dependent on how the element
> is being interacted with. i have had a discussion about this with James
> Teh
> from NVDA.
>
> --
>
> Regards
>
> SteveF
> Current Standards Work @W3C
> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
> > > >

From: Birkir R. Gunnarsson
Date: Fri, Nov 18 2016 5:07AM
Subject: Re: Masking H1
← Previous message | Next message →

I think all screen readers read the entire content of a heading when
you navigate to it with the "h" key. It is the arrow key navigation
that is the problem.
That's why I haven't filed bugs.nything


On 11/18/16, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> yeah I don't think Jamie saw it as a bug. But it did confuse people and
> I've seen
> people report it as bugs on websites. I tell people to ignore those for
> now
> unless they have a better way somehow to multiline text.
>
> _mallory
>
> On Fri, Nov 18, 2016, at 12:13 PM, Steve Faulkner wrote:
>> On 18 November 2016 at 11:10, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> > I've since just accepted that that's what
>> > it
>> > does if you're arrow-reading in some SRs.
>> >
>>
>> This is the expected behaviour in some SR's, dependent on how the element
>> is being interacted with. i have had a discussion about this with James
>> Teh
>> from NVDA.
>>
>> --
>>
>> Regards
>>
>> SteveF
>> Current Standards Work @W3C
>> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
>> >> >> >> > > > > >


--
Work hard. Have fun. Make history.

From: Vemaarapu Venkatesh
Date: Fri, Nov 18 2016 5:17AM
Subject: Re: Masking H1
← Previous message | Next message →

Hi JP,

As NVDA is announcing semantics for every word in the heading text I
thought of adding aria presentation role which will hide the semantics from
AT users.

The following is the markup which seems to be working fine with
NVDA-Firefox,

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

I don't have much experience with aria and please correct me if this is a
incorrect implementation.

Thanks,
Venkatesh

From: JP Jamous
Date: Fri, Nov 18 2016 7:47AM
Subject: Re: Masking H1
← Previous message | No next message

Venkatesh,

Well done! It worked perfectly with JAWS, NVDA and VoiceOver.

The only issue with VoiceOver on Mac is that it states that there are 3 items in the H1 if the user is up and down-arrowing. If the user is using VO + left or right arrows, it speaks it well.

I was expecting VoiceOver to do that and I am sure it will do it on the iPhone.

Thank you for your suggestion. It sure solved the issue for the Windows screen readers.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Vemaarapu Venkatesh
Sent: Friday, November 18, 2016 6:18 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Masking H1

Hi JP,

As NVDA is announcing semantics for every word in the heading text I thought of adding aria presentation role which will hide the semantics from AT users.

The following is the markup which seems to be working fine with NVDA-Firefox,

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

I don't have much experience with aria and please correct me if this is a incorrect implementation.

Thanks,
Venkatesh