WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Responsive web design and it's accessibility

for

From: Mallory
Date: May 23, 2018 6:58AM

Patrick's got it, that's more toward what I would code (the actual design would of course have influence on what height would trigger what, similar to how designs and content affect which widths the developer uses. How fat is the sticky? Could the sticky's contents wrap to more lines (it better since we can't scroll stickies horizontally, a problem I get constantly with cookie-warnings)? What exactly is IN the sticky (how important is it that it remains onscreen)?). Likely somewhere someone would come up with a CSS pixel height to use as a reference, similar to the new 2.1's reflow starting with a 1280-px-wide viewport.

KellyFord brings up a good point I saw elsewhere-- that sometimes I reach a page, and notice the text is too small, and start zooming in more-- and a menu full of stuff vanishes into a hamburger. And I can figure it out, but I can see this becoming a potential future coga concern.

Wayne Dick brought up on a github issue another option for stickies, that they could be collapsable. Less passive than the media query but may make more sense for something like Jira's side menu (not that jira doesn't suck tremendously when you're zoomed in, so maybe microsoft's ribbon is a better example).

cheers,
Mallory

On Wed, May 23, 2018, at 10:28 AM, Patrick H. Lauke wrote:
> On 23/05/2018 02:36, John Foliot wrote:
> >> I wish a height media query did a quick check on whether my viewport
> > *height* (in em) is tall enough. When it isn't, un-stick the stickies.
> >
> > Do you happen to have an example of "good" code Mallory? ;-) A rough
> > frame would be enough.
>
> Something like this? https://codepen.io/patrickhlauke/pen/RyOQZE
>
> tl;dr: style as usual, and then if min-height above a certain threshold,
> make the header sticky.
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > >