E-mail List Archives
Thread: css flex and accessibility
Number of posts in this thread: 7 (In chronological order)
From: Sandy Feldman
Date: Wed, Jun 24 2020 6:10AM
Subject: css flex and accessibility
No previous message | Next message →
It's been really interesting reading about the impact that grid has on
screen readers.
I'd be interested in hearing what you guys think of flex CSS. Does using
flex attributes impact the screen reader experience? Aside from being
careful about using CSS to order content, is there something else to be
aware of?
thanks!
--
Sandy
sandyfeldman.com
From:
Subject: Re: css flex and accessibility
← Previous message | Next message →
I wrote this a little time ago now, and Firefox has since fixed the
"bug" mentioned in the post, but the general overview is still relevant
think.
https://tink.uk/flexbox-the-keyboard-navigation-disconnect/
On 24/06/2020 13:10, Sandy Feldman wrote:
> It's been really interesting reading about the impact that grid has on
> screen readers.
>
> I'd be interested in hearing what you guys think of flex CSS. Does using
> flex attributes impact the screen reader experience? Aside from being
> careful about using CSS to order content, is there something else to be
> aware of?
>
> thanks!
>
--
Director @TetraLogical
From: Sandy Feldman
Date: Wed, Jun 24 2020 7:30AM
Subject: Re: css flex and accessibility
← Previous message | Next message →
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. So, in the meanwhile, I can use it except for
that one thing.
Did I get that right?
Sandy
On 2020-06-24 8:31 a.m., Léonie Watson wrote:
> I wrote this a little time ago now, and Firefox has since fixed the
> "bug" mentioned in the post, but the general overview is still relevant
> think.
> https://tink.uk/flexbox-the-keyboard-navigation-disconnect/
>
>
> On 24/06/2020 13:10, Sandy Feldman wrote:
>> It's been really interesting reading about the impact that grid has on
>> screen readers.
>>
>> I'd be interested in hearing what you guys think of flex CSS. Does using
>> flex attributes impact the screen reader experience? Aside from being
>> careful about using CSS to order content, is there something else to be
>> aware of?
>>
>> thanks!
>>
From:
Subject: Re: css flex and accessibility
← Previous message | Next message →
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. So, in the meanwhile, I can use it except for
> that one thing.
>
> Did I get that right?
You did indeed :)
>
> Sandy
>
>
> On 2020-06-24 8:31 a.m., Léonie Watson wrote:
>> I wrote this a little time ago now, and Firefox has since fixed the
>> "bug" mentioned in the post, but the general overview is still relevant
>> think.
>> https://tink.uk/flexbox-the-keyboard-navigation-disconnect/
>>
>>
>> On 24/06/2020 13:10, Sandy Feldman wrote:
>>> It's been really interesting reading about the impact that grid has on
>>> screen readers.
>>>
>>> I'd be interested in hearing what you guys think of flex CSS. Does using
>>> flex attributes impact the screen reader experience? Aside from being
>>> careful about using CSS to order content, is there something else to be
>>> aware of?
>>>
>>> thanks!
>>>
>
--
Director @TetraLogical
From: Patrick H. Lauke
Date: Wed, Jun 24 2020 7:45AM
Subject: Re: css flex and accessibility
← Previous message | Next message →
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
From: Mallory
Date: Fri, Jun 26 2020 10:45AM
Subject: Re: css flex and accessibility
← Previous message | Next message →
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
> > > > >
From: Sandy Feldman
Date: Fri, Jun 26 2020 11:37AM
Subject: Re: css flex and accessibility
← Previous message | No next message
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