WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: widows and validation

for

From: Sandy Feldman
Date: May 9, 2020 10:44AM

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 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