WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: HTML Rendering in IE

for

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

From: Jamous, JP
Date: Tue, Sep 13 2016 7:41AM
Subject: HTML Rendering in IE
No previous message | Next message →

I am wondering if this is an IE issue or a JAWS issue. So far, I can tell that it might be IE, but who knows.

I tested this with NVDA and VoiceOver and there was no problem. With JAWS and IE the word Shipping and On have no space between them. JAWS reads them as one word shippingon.

In Firefox, JAWS reads them just fine as NVDA does and VoiceOver.

Here is the code:

<a href="URL.html">
<span class="free-shipping-message">
Free 2-Day Shipping
</span>
<span class="free-shipping-sub-message">
on orders $35 and up
</span>
</a>

Has anyone seen this before? I am hesitant to use &nbsp; as this might add an extra space visually and for screen readers.



**************************************************

Jean-Pierre Jamous
Digital Accessibility Specialist & Developer
UI Accessibility Team

SME for EBN Include
Digital Accessibility Specialist & Blind and Visually Impaired Expert

The only limitations in life are those we set for ourselves

**************************************************

From: Birkir R. Gunnarsson
Date: Tue, Sep 13 2016 7:47AM
Subject: Re: HTML Rendering in IE
← Previous message | Next message →

You ar doing the right things here, leaving a blank space in the
spans,even two (at the end of the first and the beginning of the
second).
This has got to be a Jaws with IE issue specifically, and users will
understand it, it is not going to block them from understanding the
content.



On 9/13/16, Jamous, JP < = EMAIL ADDRESS REMOVED = > wrote:
> I am wondering if this is an IE issue or a JAWS issue. So far, I can tell
> that it might be IE, but who knows.
>
> I tested this with NVDA and VoiceOver and there was no problem. With JAWS
> and IE the word Shipping and On have no space between them. JAWS reads them
> as one word shippingon.
>
> In Firefox, JAWS reads them just fine as NVDA does and VoiceOver.
>
> Here is the code:
>
> <a href="URL.html">
> <span class="free-shipping-message">
> Free 2-Day Shipping
> </span>
> <span class="free-shipping-sub-message">
> on orders $35 and up
> </span>
> </a>
>
> Has anyone seen this before? I am hesitant to use &nbsp; as this might add
> an extra space visually and for screen readers.
>
>
>
> **************************************************
>
> Jean-Pierre Jamous
> Digital Accessibility Specialist & Developer
> UI Accessibility Team
>
> SME for EBN Include
> Digital Accessibility Specialist & Blind and Visually Impaired Expert
>
> The only limitations in life are those we set for ourselves
>
> **************************************************
>
>
> > > > >


--
Work hard. Have fun. Make history.

From: Moore,Michael (Accessibility) (HHSC)
Date: Tue, Sep 13 2016 7:47AM
Subject: Re: HTML Rendering in IE
← Previous message | Next message →

Given that this is coded using in-line elements without a space between the words I would say that the IE/JAWS combination is getting it right. Separate the words using a space or by using block level elements.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jamous, JP
Sent: Tuesday, September 13, 2016 8:42 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] HTML Rendering in IE

I am wondering if this is an IE issue or a JAWS issue. So far, I can tell that it might be IE, but who knows.

I tested this with NVDA and VoiceOver and there was no problem. With JAWS and IE the word Shipping and On have no space between them. JAWS reads them as one word shippingon.

In Firefox, JAWS reads them just fine as NVDA does and VoiceOver.

Here is the code:

<a href="URL.html">
<span class="free-shipping-message">
Free 2-Day Shipping
</span>
<span class="free-shipping-sub-message">
on orders $35 and up
</span>
</a>

Has anyone seen this before? I am hesitant to use &nbsp; as this might add an extra space visually and for screen readers.



**************************************************

Jean-Pierre Jamous
Digital Accessibility Specialist & Developer UI Accessibility Team

SME for EBN Include
Digital Accessibility Specialist & Blind and Visually Impaired Expert

The only limitations in life are those we set for ourselves

**************************************************

From: Birkir R. Gunnarsson
Date: Tue, Sep 13 2016 7:54AM
Subject: Re: HTML Rendering in IE
← Previous message | Next message →

Actually, I did a little test myself and Jaws (17) with IE (11) works just fine.
<a href="http://www.google.com"><span>This is Google</span><span> the
search engine</span></a>
Jaws reads "Google the" as separate words, and if ou navigate by arrow
keys in the virtual buffer you see the space.
I wonder if that CSS class is removing white space or something, bt
you also leave white space at the end of your previous span .. This is
a bit of a mystery.

On 9/13/16, Moore,Michael (Accessibility) (HHSC)
< = EMAIL ADDRESS REMOVED = > wrote:
> Given that this is coded using in-line elements without a space between the
> words I would say that the IE/JAWS combination is getting it right. Separate
> the words using a space or by using block level elements.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Jamous, JP
> Sent: Tuesday, September 13, 2016 8:42 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] HTML Rendering in IE
>
> I am wondering if this is an IE issue or a JAWS issue. So far, I can tell
> that it might be IE, but who knows.
>
> I tested this with NVDA and VoiceOver and there was no problem. With JAWS
> and IE the word Shipping and On have no space between them. JAWS reads them
> as one word shippingon.
>
> In Firefox, JAWS reads them just fine as NVDA does and VoiceOver.
>
> Here is the code:
>
> <a href="URL.html">
> <span class="free-shipping-message">
> Free 2-Day Shipping
> </span>
> <span class="free-shipping-sub-message">
> on orders $35 and up
> </span>
> </a>
>
> Has anyone seen this before? I am hesitant to use &nbsp; as this might add
> an extra space visually and for screen readers.
>
>
>
> **************************************************
>
> Jean-Pierre Jamous
> Digital Accessibility Specialist & Developer UI Accessibility Team
>
> SME for EBN Include
> Digital Accessibility Specialist & Blind and Visually Impaired Expert
>
> The only limitations in life are those we set for ourselves
>
> **************************************************
>
>
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.

From: Jamous, JP
Date: Tue, Sep 13 2016 8:03AM
Subject: Re: HTML Rendering in IE
← Previous message | Next message →

Personally, I don't like this multiple spans inside a link. Here is the read deal.
http://www.bestbuy.com/site/apple-apple-tv-64gb-black/4907025.p?skuIdI07025

Load the page in IE and navigate to H1. From there down-arrow and you will eventually hit the link.

NVDA breaks the 2 span elements as separate ones whether in IE or Firefox. What is worse is it calls both Link, because they are inside the anchor element.




**************************************************

Jean-Pierre Jamous
Digital Accessibility Specialist & Developer
UI Accessibility Team

SME for EBN Include
Digital Accessibility Specialist & Blind and Visually Impaired Expert

The only limitations in life are those we set for ourselves

**************************************************














-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, September 13, 2016 8:55 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] HTML Rendering in IE

Actually, I did a little test myself and Jaws (17) with IE (11) works just fine.
<a href="http://www.google.com"><span>This is Google</span><span> the search engine</span></a> Jaws reads "Google the" as separate words, and if ou navigate by arrow keys in the virtual buffer you see the space.
I wonder if that CSS class is removing white space or something, bt you also leave white space at the end of your previous span .. This is a bit of a mystery.

On 9/13/16, Moore,Michael (Accessibility) (HHSC) < = EMAIL ADDRESS REMOVED = > wrote:
> Given that this is coded using in-line elements without a space
> between the words I would say that the IE/JAWS combination is getting
> it right. Separate the words using a space or by using block level elements.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission Civil Rights Office
> (512) 438-3431 (Office)
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jamous, JP
> Sent: Tuesday, September 13, 2016 8:42 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] HTML Rendering in IE
>
> I am wondering if this is an IE issue or a JAWS issue. So far, I can
> tell that it might be IE, but who knows.
>
> I tested this with NVDA and VoiceOver and there was no problem. With
> JAWS and IE the word Shipping and On have no space between them. JAWS
> reads them as one word shippingon.
>
> In Firefox, JAWS reads them just fine as NVDA does and VoiceOver.
>
> Here is the code:
>
> <a href="URL.html">
> <span class="free-shipping-message">
> Free 2-Day Shipping
> </span>
> <span class="free-shipping-sub-message">
> on orders $35 and up
> </span>
> </a>
>
> Has anyone seen this before? I am hesitant to use &nbsp; as this might
> add an extra space visually and for screen readers.
>
>
>
> **************************************************
>
> Jean-Pierre Jamous
> Digital Accessibility Specialist & Developer UI Accessibility Team
>
> SME for EBN Include
> Digital Accessibility Specialist & Blind and Visually Impaired Expert
>
> The only limitations in life are those we set for ourselves
>
> **************************************************
>
>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Birkir R. Gunnarsson
Date: Tue, Sep 13 2016 8:38AM
Subject: Re: HTML Rendering in IE
← Previous message | Next message →

NVDA shouldn't do that, because a span is an inline element. If these
were divs or another blocklevel element, then there is a rationale for
the screen reader to announce them as separate elements.
Designers may need to style part of the link text differently, and
that can help other users, such as people with cognitive impairments,
which is why I think that while we may not like it for screen reader
purposes, we can't really discourage it, not unless it is broken into
spans for no reason.



On 9/13/16, Jamous, JP < = EMAIL ADDRESS REMOVED = > wrote:
> Personally, I don't like this multiple spans inside a link. Here is the read
> deal.
> http://www.bestbuy.com/site/apple-apple-tv-64gb-black/4907025.p?skuIdI07025
>
> Load the page in IE and navigate to H1. From there down-arrow and you will
> eventually hit the link.
>
> NVDA breaks the 2 span elements as separate ones whether in IE or Firefox.
> What is worse is it calls both Link, because they are inside the anchor
> element.
>
>
>
>
> **************************************************
>
> Jean-Pierre Jamous
> Digital Accessibility Specialist & Developer
> UI Accessibility Team
>
> SME for EBN Include
> Digital Accessibility Specialist & Blind and Visually Impaired Expert
>
> The only limitations in life are those we set for ourselves
>
> **************************************************
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Birkir R. Gunnarsson
> Sent: Tuesday, September 13, 2016 8:55 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] HTML Rendering in IE
>
> Actually, I did a little test myself and Jaws (17) with IE (11) works just
> fine.
> <a href="http://www.google.com"><span>This is Google</span><span> the search
> engine</span></a> Jaws reads "Google the" as separate words, and if ou
> navigate by arrow keys in the virtual buffer you see the space.
> I wonder if that CSS class is removing white space or something, bt you also
> leave white space at the end of your previous span .. This is a bit of a
> mystery.
>
> On 9/13/16, Moore,Michael (Accessibility) (HHSC)
> < = EMAIL ADDRESS REMOVED = > wrote:
>> Given that this is coded using in-line elements without a space
>> between the words I would say that the IE/JAWS combination is getting
>> it right. Separate the words using a space or by using block level
>> elements.
>>
>> Mike Moore
>> Accessibility Coordinator
>> Texas Health and Human Services Commission Civil Rights Office
>> (512) 438-3431 (Office)
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Jamous, JP
>> Sent: Tuesday, September 13, 2016 8:42 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: [WebAIM] HTML Rendering in IE
>>
>> I am wondering if this is an IE issue or a JAWS issue. So far, I can
>> tell that it might be IE, but who knows.
>>
>> I tested this with NVDA and VoiceOver and there was no problem. With
>> JAWS and IE the word Shipping and On have no space between them. JAWS
>> reads them as one word shippingon.
>>
>> In Firefox, JAWS reads them just fine as NVDA does and VoiceOver.
>>
>> Here is the code:
>>
>> <a href="URL.html">
>> <span class="free-shipping-message">
>> Free 2-Day Shipping
>> </span>
>> <span class="free-shipping-sub-message">
>> on orders $35 and up
>> </span>
>> </a>
>>
>> Has anyone seen this before? I am hesitant to use &nbsp; as this might
>> add an extra space visually and for screen readers.
>>
>>
>>
>> **************************************************
>>
>> Jean-Pierre Jamous
>> Digital Accessibility Specialist & Developer UI Accessibility Team
>>
>> SME for EBN Include
>> Digital Accessibility Specialist & Blind and Visually Impaired Expert
>>
>> The only limitations in life are those we set for ourselves
>>
>> **************************************************
>>
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.

From: _mallory
Date: Fri, Sep 16 2016 9:34AM
Subject: Re: HTML Rendering in IE
← Previous message | No next message

That has bugged me since forever as well, esp since NVDA users will
sometimes flag a multiline link as "redundant links". However I
don't think NVDA considered it a bug, but instead mentioned a different
navigation technique was preferred in these cases. Long enough ago that
I have no idea which.

_mallory

On Tue, Sep 13, 2016 at 10:38:58AM -0400, Birkir R. Gunnarsson wrote:
> NVDA shouldn't do that, because a span is an inline element. If these
> were divs or another blocklevel element, then there is a rationale for
> the screen reader to announce them as separate elements.
> Designers may need to style part of the link text differently, and
> that can help other users, such as people with cognitive impairments,
> which is why I think that while we may not like it for screen reader
> purposes, we can't really discourage it, not unless it is broken into
> spans for no reason.
>
>
>
> On 9/13/16, Jamous, JP < = EMAIL ADDRESS REMOVED = > wrote:
> > Personally, I don't like this multiple spans inside a link. Here is the read
> > deal.
> > http://www.bestbuy.com/site/apple-apple-tv-64gb-black/4907025.p?skuIdI07025
> >
> > Load the page in IE and navigate to H1. From there down-arrow and you will
> > eventually hit the link.
> >
> > NVDA breaks the 2 span elements as separate ones whether in IE or Firefox.
> > What is worse is it calls both Link, because they are inside the anchor
> > element.
> >
> >
> >
> >
> > **************************************************
> >
> > Jean-Pierre Jamous
> > Digital Accessibility Specialist & Developer
> > UI Accessibility Team
> >
> > SME for EBN Include
> > Digital Accessibility Specialist & Blind and Visually Impaired Expert
> >
> > The only limitations in life are those we set for ourselves
> >
> > **************************************************
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> > Of Birkir R. Gunnarsson
> > Sent: Tuesday, September 13, 2016 8:55 AM
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] HTML Rendering in IE
> >
> > Actually, I did a little test myself and Jaws (17) with IE (11) works just
> > fine.
> > <a href="http://www.google.com"><span>This is Google</span><span> the search
> > engine</span></a> Jaws reads "Google the" as separate words, and if ou
> > navigate by arrow keys in the virtual buffer you see the space.
> > I wonder if that CSS class is removing white space or something, bt you also
> > leave white space at the end of your previous span .. This is a bit of a
> > mystery.
> >
> > On 9/13/16, Moore,Michael (Accessibility) (HHSC)
> > < = EMAIL ADDRESS REMOVED = > wrote:
> >> Given that this is coded using in-line elements without a space
> >> between the words I would say that the IE/JAWS combination is getting
> >> it right. Separate the words using a space or by using block level
> >> elements.
> >>
> >> Mike Moore
> >> Accessibility Coordinator
> >> Texas Health and Human Services Commission Civil Rights Office
> >> (512) 438-3431 (Office)
> >>
> >> -----Original Message-----
> >> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> >> Behalf Of Jamous, JP
> >> Sent: Tuesday, September 13, 2016 8:42 AM
> >> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> >> Subject: [WebAIM] HTML Rendering in IE
> >>
> >> I am wondering if this is an IE issue or a JAWS issue. So far, I can
> >> tell that it might be IE, but who knows.
> >>
> >> I tested this with NVDA and VoiceOver and there was no problem. With
> >> JAWS and IE the word Shipping and On have no space between them. JAWS
> >> reads them as one word shippingon.
> >>
> >> In Firefox, JAWS reads them just fine as NVDA does and VoiceOver.
> >>
> >> Here is the code:
> >>
> >> <a href="URL.html">
> >> <span class="free-shipping-message">
> >> Free 2-Day Shipping
> >> </span>
> >> <span class="free-shipping-sub-message">
> >> on orders $35 and up
> >> </span>
> >> </a>
> >>
> >> Has anyone seen this before? I am hesitant to use &nbsp; as this might
> >> add an extra space visually and for screen readers.
> >>
> >>
> >>
> >> **************************************************
> >>
> >> Jean-Pierre Jamous
> >> Digital Accessibility Specialist & Developer UI Accessibility Team
> >>
> >> SME for EBN Include
> >> Digital Accessibility Specialist & Blind and Visually Impaired Expert
> >>
> >> The only limitations in life are those we set for ourselves
> >>
> >> **************************************************
> >>
> >>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> >
> >
> > --
> > Work hard. Have fun. Make history.
> > > > > > http://webaim.org/discussion/archives
> > > > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > >