RE: Flexbox / grid techniques

Hi All,

Hereby the Flexbox and Grid techniques.

Have four questions though:


  1.  Why is grid written in Github as: "media-queries-grid-reflow" and flexbox as "flexbox-reflow". I used MQ's for both so name should be same for both if you ask me.
  2.  Code examples are more elaborated than older examples, what should be in technique page? All HTML / CSS / Text or only part that matter?
  3.  Example text in Working examples is not really what we want, but what fake text to use?  Lorum is also not what we really want.
  4.  Working examples: where will they be placed? What default styling is needed? Where / how will we setup this environment (or is it already somewhere) and how to cope with consistency? A nice white label version / resource would be nice to have. In my working examples I have some CSS which is not part of the technique but core page styling...

W3C Github:

  *   Flex: https://github.com/w3c/wcag21/blob/tech-flexbox-reflow/techniques/css/flexbox-reflow.html

  *   Grid: https://github.com/w3c/wcag21/blob/tech-media-queries-grid-reflow/techniques/css/media-queries-grid-reflow.html


Examples in Codepen:

CSS / Working example


  *   Flex: https://codepen.io/Jake-Abma/pen/ZxxyRX

  *   Grid: https://codepen.io/Jake-Abma/pen/JvBwbq


DOCS


  *   Grid: https://codepen.io/Jake-Abma/pen/ZoMYZP

  *   Grid: https://s.codepen.io/Jake-Abma/debug/ZoMYZP

  *   Flex: https://codepen.io/Jake-Abma/pen/zjLeNv

  *   Flex: https://s.codepen.io/Jake-Abma/debug/zjLeNv



Regards,
Jake Abma

Accessibility Lead ING
Product owner at Team A11Y
http://www.a11yportal.com<http://www.a11yportal.com/>

ING Nederland / CIO / Omnichannel / Experience
ACT C.02.406, Bijlmerdreef 24
Postbus 1800, 1000 BV Amsterdam
0031 (0)6 - 25 27 52 46
jake.abma@ing.com





From: Alastair Campbell [mailto:acampbell@nomensa.com]
Sent: vrijdag 16 maart 2018 12:44
To: Abma, J.D. (Jake) <Jake.Abma@ing.com>; public-mobile-a11y-tf@w3.org
Cc: Jim Allan <jimallan@tsbvi.edu>
Subject: Re: Flexbox / grid techniques

Fantastic ☺

We are basically looking for a modern equivalent of this:
https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/G146


In order of time needed, getting as far as you can with:


  1.  Creating a simple HTML / CSS source code example as a demo (which needs to be accessible, but minimal).
  2.  Creating a wiki page for the other content like this: https://www.w3.org/WAI/GL/wiki/Allowing_for_Reflow

  3.  Creating the actual technique in github: https://github.com/w3c/wcag21#editing-techniques


If you’re comfortable, you could skip straight to 3 and do it all in github, but it’s step one we’re struggling with.

Thank you,

-Alastair


From: "Abma, J.D. (Jake)" <


​

I'm here to help!



________________________________
From: Alastair Campbell <acampbell@nomensa.com<mailto:acampbell@nomensa.com>>
Sent: Friday, March 16, 2018 10:55 AM
To: public-mobile-a11y-tf@w3.org<mailto:public-mobile-a11y-tf@w3.org>
Cc: Jim Allan
Subject: Flexbox / grid techniques

Hi everyone,

Sorry to gate-crash MAFT, but I was wondering if there was a cross-over on techniques for mobile and low-vision, or people available to create them?

For Reflow [1] we could do with a CSS based technique for a grid layout (or other type) that reflows down to 320px, would anyone on the mobile task force be able to help?

My knowledge is a bit rusty (and time non-existent), if anyone can pull out a basic layout from recent work it would really help get that going.

Kind regards,

-Alastair

1] https://www.w3.org/WAI/WCAG21/Understanding/reflow.html


--

www.nomensa.com<http://www.nomensa.com/>
tel: +44 (0)117 929 7333 / 07970 879 653
follow us: @we_are_nomensa or me: @alastc
Nomensa Ltd. King William House, 13 Queen Square, Bristol BS1 4NT

Company number: 4214477 | UK VAT registration: GB 771727411

-----------------------------------------------------------------

ATTENTION:

The information in this e-mail is confidential and only meant for the intended recipient. If you are not the intended recipient, don't use or disclose it in any way. Please let the sender know and delete the message immediately.

-----------------------------------------------------------------

-----------------------------------------------------------------
ATTENTION:
The information in this e-mail is confidential and only meant for the intended recipient. If you are not the intended recipient, don't use or disclose it in any way. Please let the sender know and delete the message immediately.
-----------------------------------------------------------------