WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: widows and validation

for

From: Sandy Feldman
Date: May 10, 2020 12:39PM

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