WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: widows and validation

for

From: Birkir R. Gunnarsson
Date: May 10, 2020 11:11AM

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