spec/css3-flexbox/accessibility: edited

Author: bojcampbell

spec/css3-flexbox/accessibility.txt

@@ -1,6 +1,8 @@
+====== Flexbox Accessibility Implications and Solution Suggestion ======
+
 This page is a research page to discuss pros and cons of UA's changing the tab order and screen reader flow (through the a11y API) to match the new visual layout when flexbox order rearranges elements on a page.
 
-===== Example =====
+===== Example of How Flexbox causes problems for Tabbing and Assistive Technology (AT) =====
 ==== 1.) Author creates nested containers (boxes) in html ====
 
 
@@ -30,10 +32,34 @@ box 1, box 2, box 3
 
 == Diagram ==
 {{:spec:css3-flexbox:flexbox2.jpg|}}
-----
 
+**Problem:** The visual order (Box Tree) is now opposite the DOM order and subsequently, the Tab Order and Screen Reader order 
+
+===== Solution =====
+
+====1.) When the visual order is changed via Flexbox, the UA Tab order should logically follow the newly arranged box tree====
+
+
+== DOM order (unchanged) ==
+box 1, box 2, box 3
+
+== Visual order (**changed**) ==
+box 3, box 2, box 1
+
+== Tab and Accessibility Tree order (**changed**) ==
+box 3, box 2, box 1
+
+== Diagram ==
+{{:spec:css3-flexbox:flexbox3.jpg|}}
+
+==== 2.) The Box Tree visual change should be mapped to the Accessibility API so that AT’s have the same experience.====
+
+
+
+
+
+======= Proposal Statement =======
 
-**Proposal Statement:**
 
 If Flexbox is used to rearrange content, the box tree and accessibility API should be updated to also change the keyboard and screen reader flow to match the new visual layout.