E-mail List Archives

Search E-mail List Archives for

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

From: Sandy Feldman
Date: Fri, May 08 2020 9:59AM
Subject: widows and validation
No previous message | Next message →

hey all,

I would love some input on how to get the look I would like on a bit of
navigation without breaking validation.

I have a horizontal nav, and I would like to prevent a widow by
controlling where the break happens as text size is increased or the
browser window is made smaller.

http://ineeda.coffee/nav/4test.shtml

this one looks just right. The last two links wrap onto the second line
together. They are wrapped in a span styled to "white-space:nowrap".
This sounds ok to me in VoiceOver. It passes WAVE, but breaks validation
in everything else I've tried.

I've tried a few other approaches, nothing else works the way I would
like. Or, if it works, it flunks validation.

So, the question is, is this really invalid? Does it mess people up? Can
I use it? Is there a better approach that I can use?

thanks so much!

--

Sandy
sandyfeldman.com

From: glen walker
Date: Fri, May 08 2020 5:58PM
Subject: Re: widows and validation
← Previous message | Next message →

It's invalid HTML. <UL> elements can only have <LI> elements (or a
<script> element) as direct children. Your code has a <span> as a direct
child. That's why it's failing. It'd undefined how a screen reader might
interpret it.

<ul>
<li>
<li>
<span>
<li>
<li>
</span>
</ul>

Does the list above have 2 items (the first two <LI>s)?
Does it have 3 items because there are 3 direct children (2 <LI>s and one
<span>)?
Does it have 4 items because there are a total of four <LI>s?
Does it have 5 items because there are four <LI>s plus another child
element (<span>)?

>So, the question is, is this really invalid?

Yes

>Does it mess people up?

Yes

>Can I use it?

Depends. If you want compliant code, then no. There's lots of websites
with invalid code but that doesn't mean you should do it.

> Is there a better approach that I can use?

I'm a noob when it comes to CSS so I can't comment on a decent alternative
but I think you can use CSS selectors to get what you want. Possibly a
combination of the + operator and the :nth-child() selector.


On Fri, May 8, 2020 at 9:59 AM Sandy Feldman < = EMAIL ADDRESS REMOVED = > wrote:

> hey all,
>
> I would love some input on how to get the look I would like on a bit of
> navigation without breaking validation.
>
> I have a horizontal nav, and I would like to prevent a widow by
> controlling where the break happens as text size is increased or the
> browser window is made smaller.
>
> http://ineeda.coffee/nav/4test.shtml
>
> this one looks just right. The last two links wrap onto the second line
> together. They are wrapped in a span styled to "white-space:nowrap".
> This sounds ok to me in VoiceOver. It passes WAVE, but breaks validation
> in everything else I've tried.
>
> I've tried a few other approaches, nothing else works the way I would
> like. Or, if it works, it flunks validation.
>
> So, the question is, is this really invalid? Does it mess people up? Can
> I use it? Is there a better approach that I can use?
>
> thanks so much!
>
> --
>
> Sandy
> sandyfeldman.com
>
> > > > >

From: Sandy Feldman
Date: Sat, May 09 2020 10:44AM
Subject: Re: widows and validation
← Previous message | Next message →

hey Glen,

Thanks so much for taking the time to look into this.

I've got a version with nth child, but I haven't figured out the syntax
to control the wrap. I'm not sure it's possible, but this is probably
the wrong list for that problem. It would be great to be able to write
the media-query so that it kicks in when the links wrap, instead of at a
px size.

http://ineeda.coffee/nav/1test.shtml

I also have a version where there is a role="presentation" ul to nest a
list without having it read out. Needless to say, it's not valid.

http://ineeda.coffee/nav/2test.shtml


Anyone have the time to listen to this with JAWS/NVDA? Does it really
mess up? I won't use it if it does, but I hate to give up on it because
it's pretty.

http://ineeda.coffee/nav/4test.shtml

thanks all, for your time and attention!

Sandy



On 2020-05-08 7:58 p.m., glen walker wrote:
> It's invalid HTML. <UL> elements can only have <LI> elements (or a
> <script> element) as direct children. Your code has a <span> as a direct
> child. That's why it's failing. It'd undefined how a screen reader might
> interpret it.
>
> <ul>
> <li>
> <li>
> <span>
> <li>
> <li>
> </span>
> </ul>
>
> Does the list above have 2 items (the first two <LI>s)?
> Does it have 3 items because there are 3 direct children (2 <LI>s and one
> <span>)?
> Does it have 4 items because there are a total of four <LI>s?
> Does it have 5 items because there are four <LI>s plus another child
> element (<span>)?
>
>> So, the question is, is this really invalid?
> Yes
>
>> Does it mess people up?
> Yes
>
>> Can I use it?
> Depends. If you want compliant code, then no. There's lots of websites
> with invalid code but that doesn't mean you should do it.
>
>> Is there a better approach that I can use?
> I'm a noob when it comes to CSS so I can't comment on a decent alternative
> but I think you can use CSS selectors to get what you want. Possibly a
> combination of the + operator and the :nth-child() selector.
>
>
> On Fri, May 8, 2020 at 9:59 AM Sandy Feldman < = EMAIL ADDRESS REMOVED = > wrote:
>
>> hey all,
>>
>> I would love some input on how to get the look I would like on a bit of
>> navigation without breaking validation.
>>
>> I have a horizontal nav, and I would like to prevent a widow by
>> controlling where the break happens as text size is increased or the
>> browser window is made smaller.
>>
>> http://ineeda.coffee/nav/4test.shtml
>>
>> this one looks just right. The last two links wrap onto the second line
>> together. They are wrapped in a span styled to "white-space:nowrap".
>> This sounds ok to me in VoiceOver. It passes WAVE, but breaks validation
>> in everything else I've tried.
>>
>> I've tried a few other approaches, nothing else works the way I would
>> like. Or, if it works, it flunks validation.
>>
>> So, the question is, is this really invalid? Does it mess people up? Can
>> I use it? Is there a better approach that I can use?
>>
>> thanks so much!
>>
>> --
>>
>> Sandy
>> sandyfeldman.com
>>
>> >> >> >> >>
> > > > --
Sandy
sandyfeldman.com

From: Birkir R. Gunnarsson
Date: Sun, May 10 2020 11:11AM
Subject: Re: widows and validation
← Previous message | Next message →

A quick test with Jaws shows a navigation list with 6 items in Chrome
but 4 in Firefox.
(the span seems to be fine in Chrome but Firefox considers it breaking
the list construct).
The nu HTML Checker also flags the HTML as invalid.
So you will end up with some inconsistencies here because of the span
and will either have to figure out another construct or justify the
inconsistency with better visual usability.
Obviously, if you place the span inside an <li> and around the link
this would be perfectly valid, but it would not be able to cover two
<li> elements.
You could ditch the list construct and use an ARIA list (divs or spans
with role="listitem" inside a div with role="list") but you'd
basically run into the same problem if you want a span that covers two
list items.
In this case, if each link starts with a number, you technically don't
need a list construct, it adds very little.


On 5/9/20, Sandy Feldman < = EMAIL ADDRESS REMOVED = > wrote:
> hey Glen,
>
> Thanks so much for taking the time to look into this.
>
> I've got a version with nth child, but I haven't figured out the syntax
> to control the wrap. I'm not sure it's possible, but this is probably
> the wrong list for that problem. It would be great to be able to write
> the media-query so that it kicks in when the links wrap, instead of at a
> px size.
>
> http://ineeda.coffee/nav/1test.shtml
>
> I also have a version where there is a role="presentation" ul to nest a
> list without having it read out. Needless to say, it's not valid.
>
> http://ineeda.coffee/nav/2test.shtml
>
>
> Anyone have the time to listen to this with JAWS/NVDA? Does it really
> mess up? I won't use it if it does, but I hate to give up on it because
> it's pretty.
>
> http://ineeda.coffee/nav/4test.shtml
>
> thanks all, for your time and attention!
>
> Sandy
>
>
>
> On 2020-05-08 7:58 p.m., glen walker wrote:
>> It's invalid HTML. <UL> elements can only have <LI> elements (or a
>> <script> element) as direct children. Your code has a <span> as a direct
>> child. That's why it's failing. It'd undefined how a screen reader
>> might
>> interpret it.
>>
>> <ul>
>> <li>
>> <li>
>> <span>
>> <li>
>> <li>
>> </span>
>> </ul>
>>
>> Does the list above have 2 items (the first two <LI>s)?
>> Does it have 3 items because there are 3 direct children (2 <LI>s and one
>> <span>)?
>> Does it have 4 items because there are a total of four <LI>s?
>> Does it have 5 items because there are four <LI>s plus another child
>> element (<span>)?
>>
>>> So, the question is, is this really invalid?
>> Yes
>>
>>> Does it mess people up?
>> Yes
>>
>>> Can I use it?
>> Depends. If you want compliant code, then no. There's lots of websites
>> with invalid code but that doesn't mean you should do it.
>>
>>> Is there a better approach that I can use?
>> I'm a noob when it comes to CSS so I can't comment on a decent
>> alternative
>> but I think you can use CSS selectors to get what you want. Possibly a
>> combination of the + operator and the :nth-child() selector.
>>
>>
>> On Fri, May 8, 2020 at 9:59 AM Sandy Feldman < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> hey all,
>>>
>>> I would love some input on how to get the look I would like on a bit of
>>> navigation without breaking validation.
>>>
>>> I have a horizontal nav, and I would like to prevent a widow by
>>> controlling where the break happens as text size is increased or the
>>> browser window is made smaller.
>>>
>>> http://ineeda.coffee/nav/4test.shtml
>>>
>>> this one looks just right. The last two links wrap onto the second line
>>> together. They are wrapped in a span styled to "white-space:nowrap".
>>> This sounds ok to me in VoiceOver. It passes WAVE, but breaks validation
>>> in everything else I've tried.
>>>
>>> I've tried a few other approaches, nothing else works the way I would
>>> like. Or, if it works, it flunks validation.
>>>
>>> So, the question is, is this really invalid? Does it mess people up? Can
>>> I use it? Is there a better approach that I can use?
>>>
>>> thanks so much!
>>>
>>> --
>>>
>>> Sandy
>>> sandyfeldman.com
>>>
>>> >>> >>> >>> >>>
>> >> >> >> >
> --
> Sandy
> sandyfeldman.com
>
> > > > >


--
Work hard. Have fun. Make history.

From: Sandy Feldman
Date: Sun, May 10 2020 11:33AM
Subject: Re: widows and validation
← Previous message | Next message →

Birkir, thank you! I appreciate knowing, for sure, that it's unusable.

Right now I am wrestling with flex-box CSS as a possibly better approach.

best regards,

Sandy


On 2020-05-10 1:11 p.m., Birkir R. Gunnarsson wrote:
> A quick test with Jaws shows a navigation list with 6 items in Chrome
> but 4 in Firefox.
> (the span seems to be fine in Chrome but Firefox considers it breaking
> the list construct).
> The nu HTML Checker also flags the HTML as invalid.
> So you will end up with some inconsistencies here because of the span
> and will either have to figure out another construct or justify the
> inconsistency with better visual usability.
> Obviously, if you place the span inside an <li> and around the link
> this would be perfectly valid, but it would not be able to cover two
> <li> elements.
> You could ditch the list construct and use an ARIA list (divs or spans
> with role="listitem" inside a div with role="list") but you'd
> basically run into the same problem if you want a span that covers two
> list items.
> In this case, if each link starts with a number, you technically don't
> need a list construct, it adds very little.
>
>
> On 5/9/20, Sandy Feldman < = EMAIL ADDRESS REMOVED = > wrote:
>> hey Glen,
>>
>> Thanks so much for taking the time to look into this.
>>
>> I've got a version with nth child, but I haven't figured out the syntax
>> to control the wrap. I'm not sure it's possible, but this is probably
>> the wrong list for that problem. It would be great to be able to write
>> the media-query so that it kicks in when the links wrap, instead of at a
>> px size.
>>
>> http://ineeda.coffee/nav/1test.shtml
>>
>> I also have a version where there is a role="presentation" ul to nest a
>> list without having it read out. Needless to say, it's not valid.
>>
>> http://ineeda.coffee/nav/2test.shtml
>>
>>
>> Anyone have the time to listen to this with JAWS/NVDA? Does it really
>> mess up? I won't use it if it does, but I hate to give up on it because
>> it's pretty.
>>
>> http://ineeda.coffee/nav/4test.shtml
>>
>> thanks all, for your time and attention!
>>
>> Sandy
>>
>>
>>
>> On 2020-05-08 7:58 p.m., glen walker wrote:
>>> It's invalid HTML. <UL> elements can only have <LI> elements (or a
>>> <script> element) as direct children. Your code has a <span> as a direct
>>> child. That's why it's failing. It'd undefined how a screen reader
>>> might
>>> interpret it.
>>>
>>> <ul>
>>> <li>
>>> <li>
>>> <span>
>>> <li>
>>> <li>
>>> </span>
>>> </ul>
>>>
>>> Does the list above have 2 items (the first two <LI>s)?
>>> Does it have 3 items because there are 3 direct children (2 <LI>s and one
>>> <span>)?
>>> Does it have 4 items because there are a total of four <LI>s?
>>> Does it have 5 items because there are four <LI>s plus another child
>>> element (<span>)?
>>>
>>>> So, the question is, is this really invalid?
>>> Yes
>>>
>>>> Does it mess people up?
>>> Yes
>>>
>>>> Can I use it?
>>> Depends. If you want compliant code, then no. There's lots of websites
>>> with invalid code but that doesn't mean you should do it.
>>>
>>>> Is there a better approach that I can use?
>>> I'm a noob when it comes to CSS so I can't comment on a decent
>>> alternative
>>> but I think you can use CSS selectors to get what you want. Possibly a
>>> combination of the + operator and the :nth-child() selector.
>>>
>>>
>>> On Fri, May 8, 2020 at 9:59 AM Sandy Feldman < = EMAIL ADDRESS REMOVED = >
>>> wrote:
>>>
>>>> hey all,
>>>>
>>>> I would love some input on how to get the look I would like on a bit of
>>>> navigation without breaking validation.
>>>>
>>>> I have a horizontal nav, and I would like to prevent a widow by
>>>> controlling where the break happens as text size is increased or the
>>>> browser window is made smaller.
>>>>
>>>> http://ineeda.coffee/nav/4test.shtml
>>>>
>>>> this one looks just right. The last two links wrap onto the second line
>>>> together. They are wrapped in a span styled to "white-space:nowrap".
>>>> This sounds ok to me in VoiceOver. It passes WAVE, but breaks validation
>>>> in everything else I've tried.
>>>>
>>>> I've tried a few other approaches, nothing else works the way I would
>>>> like. Or, if it works, it flunks validation.
>>>>
>>>> So, the question is, is this really invalid? Does it mess people up? Can
>>>> I use it? Is there a better approach that I can use?
>>>>
>>>> thanks so much!
>>>>
>>>> --
>>>>
>>>> Sandy
>>>> sandyfeldman.com
>>>>
>>>> >>>> >>>> >>>> >>>>
>>> >>> >>> >>> >> --
>> Sandy
>> sandyfeldman.com
>>
>> >> >> >> >>
>
--
Sandy
sandyfeldman.com

From: Sandy Feldman
Date: Sun, May 10 2020 12:39PM
Subject: Re: widows and validation
← Previous message | No next message

OK, I think I may have a keeper here. I am using CSS flex. The list
items squish in in smaller windows, the space between them opens up in
bigger. I can use this until I need a media query.


http://ineeda.coffee/nav/8test.shtml

What do you think?

thanks again for your time and expertise.

Sandy


On 2020-05-10 1:33 p.m., Sandy Feldman wrote:
> Birkir, thank you! I appreciate knowing, for sure, that it's unusable.
>
> Right now I am wrestling with flex-box CSS as a possibly better approach.
>
> best regards,
>
> Sandy
>
>
> On 2020-05-10 1:11 p.m., Birkir R. Gunnarsson wrote:
>> A quick test with Jaws shows a navigation list with 6 items in Chrome
>> but 4 in Firefox.
>> (the span seems to be fine in Chrome but Firefox considers it breaking
>> the list construct).
>> The nu HTML Checker also flags the HTML as invalid.
>> So you will end up with some inconsistencies here because of the span
>> and will either have to figure out another construct or justify the
>> inconsistency with better visual usability.
>> Obviously, if you place the span inside an <li> and around the link
>> this would be perfectly valid, but it would not be able to cover two
>> <li> elements.
>> You could ditch the list construct and use an ARIA list (divs or spans
>> with role="listitem" inside a div with role="list") but you'd
>> basically run into the same problem if you want a span that covers two
>> list items.
>> In this case, if each link starts with a number, you technically don't
>> need a list construct, it adds very little.
>>
>>
>> On 5/9/20, Sandy Feldman < = EMAIL ADDRESS REMOVED = > wrote:
>>> hey Glen,
>>>
>>> Thanks so much for taking the time to look into this.
>>>
>>> I've got a version with nth child, but I haven't figured out the syntax
>>> to control the wrap. I'm not sure it's possible, but this is probably
>>> the wrong list for that problem. It would be great to be able to write
>>> the media-query so that it kicks in when the links wrap, instead of
>>> at a
>>> px size.
>>>
>>> http://ineeda.coffee/nav/1test.shtml
>>>
>>> I also have a version where there is a role="presentation" ul to nest a
>>> list without having it read out. Needless to say, it's not valid.
>>>
>>> http://ineeda.coffee/nav/2test.shtml
>>>
>>>
>>> Anyone have the time to listen to this with JAWS/NVDA? Does it really
>>> mess up? I won't use it if it does, but I hate to give up on it because
>>> it's pretty.
>>>
>>> http://ineeda.coffee/nav/4test.shtml
>>>
>>> thanks all, for your time and attention!
>>>
>>> Sandy
>>>
>>>
>>>
>>> On 2020-05-08 7:58 p.m., glen walker wrote:
>>>> It's invalid HTML.  <UL> elements can only have <LI> elements (or a
>>>> <script> element) as direct children.  Your code has a <span> as a
>>>> direct
>>>> child.  That's why it's failing.  It'd undefined how a screen reader
>>>> might
>>>> interpret it.
>>>>
>>>> <ul>
>>>>     <li>
>>>>     <li>
>>>>     <span>
>>>>       <li>
>>>>       <li>
>>>>     </span>
>>>> </ul>
>>>>
>>>> Does the list above have 2 items (the first two <LI>s)?
>>>> Does it have 3 items because there are 3 direct children (2 <LI>s
>>>> and one
>>>> <span>)?
>>>> Does it have 4 items because there are a total of four <LI>s?
>>>> Does it have 5 items because there are four <LI>s plus another child
>>>> element (<span>)?
>>>>
>>>>> So, the question is, is this really invalid?
>>>> Yes
>>>>
>>>>> Does it mess people up?
>>>> Yes
>>>>
>>>>> Can I use it?
>>>> Depends.  If you want compliant code, then no.  There's lots of
>>>> websites
>>>> with invalid code but that doesn't mean you should do it.
>>>>
>>>>> Is there a better approach that I can use?
>>>> I'm a noob when it comes to CSS so I can't comment on a decent
>>>> alternative
>>>> but I think you can use CSS selectors to get what you want. Possibly a
>>>> combination of the + operator and the :nth-child() selector.
>>>>
>>>>
>>>> On Fri, May 8, 2020 at 9:59 AM Sandy Feldman < = EMAIL ADDRESS REMOVED = >
>>>> wrote:
>>>>
>>>>> hey all,
>>>>>
>>>>> I would love some input on how to get the look I would like on a
>>>>> bit of
>>>>> navigation without breaking validation.
>>>>>
>>>>> I have a horizontal nav, and I would like to prevent a widow by
>>>>> controlling where the break happens as text size is increased or the
>>>>> browser window is made smaller.
>>>>>
>>>>> http://ineeda.coffee/nav/4test.shtml
>>>>>
>>>>> this one looks just right. The last two links wrap onto the second
>>>>> line
>>>>> together. They are wrapped in a span styled to "white-space:nowrap".
>>>>> This sounds ok to me in VoiceOver. It passes WAVE, but breaks
>>>>> validation
>>>>> in everything else I've tried.
>>>>>
>>>>> I've tried a few other approaches, nothing else works the way I would
>>>>> like. Or, if it works, it flunks validation.
>>>>>
>>>>> So, the question is, is this really invalid? Does it mess people
>>>>> up? Can
>>>>> I use it? Is there a better approach that I can use?
>>>>>
>>>>> thanks so much!
>>>>>
>>>>> --
>>>>>
>>>>> Sandy
>>>>> sandyfeldman.com
>>>>>
>>>>> >>>>> >>>>> >>>>> >>>>>
>>>> >>>> >>>> >>>> >>> --
>>> Sandy
>>> sandyfeldman.com
>>>
>>> >>> >>> >>> >>>
>>
--
Sandy

sandyfeldman.com