WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: widows and validation

for

From: Sandy Feldman
Date: May 10, 2020 11:33AM

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 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
>>
>> >> >> >> >>
>
--
Sandy
sandyfeldman.com