E-mail List Archives
Thread: Masking H1
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
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
>
>
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.
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.
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?
From: JP Jamous
Date: Thu, Nov 17 2016 1:00PM
Subject: Re: Masking H1
← Previous message | Next message →
Checking it right now.
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.
>
>
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.