WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: css flex and accessibility

for

From: Sandy Feldman
Date: Jun 26, 2020 11:37AM

That is a really good point, Mallory - thank you very much. I am just
starting to learn about flex, and it's very (ahem) flexible. It's good
to know where to look for fails learning something new.

Now, back to tab order. It's ok to move stuff around as long as it
doesn't get focus, right?

I am thinking of a site where the the logo is on the left and the search
is on the right when the page is at full width. The media query pushes
the logo to the top and the search underneath as the screen size gets
smaller. I think since the logo doesn't get focus it should be fine to
push the search to the top. Right? What am I missing?

thanks all!

Sandy


On 2020-06-26 12:45 p.m., Mallory wrote:
> Not screen reader related but another issue with flex: test zooming in or text-enlarge when using flex.
>
> Very often I see people making flex rows and not checking what happens when everything's bigger-- the default for those is not wrapping. I'm tired of needing to scroll back and forth just because I needed to make text a bit bigger.
>
> Depending on the design, text-enlarge might be better off using wholly different styles for the "mobile"/less viewport room style with a CSS media query.
>
> cheers,
> _mallory
>
> On Wed, Jun 24, 2020, at 3:45 PM, Patrick H. Lauke wrote:
>> On 24/06/2020 14:30, Sandy Feldman wrote:
>>> Léonie, this is really useful! Thanks very much.
>>>
>>> Here's my takeaway - flex is ok for everything except for reordering
>>> content, which is going to mess with the tab order. Browser can fix
>>> that, but they haven't.
>> And there's an argument that browsers shouldn't fix this
>> indiscriminately, as there are certainly cases where an author may have
>> a particular reading/focus order in mind, while also wanting to define a
>> different visual presentation. In those cases, browsers just naively
>> applying heuristics to "fix" reading/focus order would go against these
>> authors' efforts (with no current way for them to explicitly opt out of
>> this / signal to the browser "no, I know what I'm doing")
>>
>> P
>> --
>> Patrick H. Lauke
>>
>> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
>> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
>> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>> >> >> >> >>
> > > > --
Sandy
sandyfeldman.com