{"id":449,"date":"2026-08-08T16:28:05","date_gmt":"2026-08-08T16:28:05","guid":{"rendered":"http:\/\/dev-axe-con.pantheonsite.io\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/"},"modified":"2026-08-08T16:28:05","modified_gmt":"2026-08-08T16:28:05","slug":"a-solution-for-the-visual-and-source-order-disconnect","status":"publish","type":"axecon-session","link":"https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/","title":{"rendered":"A solution for the visual and source order disconnect"},"content":{"rendered":"

At axe-con 2021 I spoke on the subject ‘Grid, content re-ordering, and accessibility’, showing demos of how easy it was to cause a disconnected tab order when positioning items using grid layout. The advice back then was to avoid reordering at all, even though this meant avoiding some features of grid layout. A solution to this problem is now being designed! In this talk I’ll introduce the reading-flow property, and then work being done to solve this problem through the CSS Working Group.<\/span><\/p>\n","protected":false},"featured_media":0,"template":"","track":[20],"difficulty":[],"playlist":[],"class_list":["post-449","axecon-session","type-axecon-session","status-publish","hentry","track-development"],"acf":[],"yoast_head":"\nA solution for the visual and source order disconnect - Axe-con<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A solution for the visual and source order disconnect - Axe-con\" \/>\n<meta property=\"og:description\" content=\"At axe-con 2021 I spoke on the subject ‘Grid, content re-ordering, and accessibility’, showing demos of how easy it was to cause a disconnected tab order when positioning items using grid layout. The advice back then was to avoid reordering\u2026\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/\" \/>\n<meta property=\"og:site_name\" content=\"Axe-con\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.deque.com\/axe-con\/wp-content\/uploads\/2026\/09\/Axe-con-2027-banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"936\" \/>\n\t<meta property=\"og:image:height\" content=\"402\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/sessions\\\/a-solution-for-the-visual-and-source-order-disconnect\\\/\",\"url\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/sessions\\\/a-solution-for-the-visual-and-source-order-disconnect\\\/\",\"name\":\"A solution for the visual and source order disconnect - Axe-con\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/#website\"},\"datePublished\":\"2026-08-08T16:28:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/sessions\\\/a-solution-for-the-visual-and-source-order-disconnect\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/sessions\\\/a-solution-for-the-visual-and-source-order-disconnect\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/sessions\\\/a-solution-for-the-visual-and-source-order-disconnect\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sessions\",\"item\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/agenda\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A solution for the visual and source order disconnect\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/#website\",\"url\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/\",\"name\":\"Axe-con\",\"description\":\"Where the global digital accessibility community comes together.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/#organization\",\"name\":\"Axe-con\",\"url\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Axe-con-Logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Axe-con-Logo.svg\",\"caption\":\"Axe-con\"},\"image\":{\"@id\":\"https:\\\/\\\/www.deque.com\\\/axe-con\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A solution for the visual and source order disconnect - Axe-con","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/","og_locale":"en_US","og_type":"article","og_title":"A solution for the visual and source order disconnect - Axe-con","og_description":"At axe-con 2021 I spoke on the subject ‘Grid, content re-ordering, and accessibility’, showing demos of how easy it was to cause a disconnected tab order when positioning items using grid layout. The advice back then was to avoid reordering\u2026","og_url":"https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/","og_site_name":"Axe-con","og_image":[{"width":936,"height":402,"url":"https:\/\/www.deque.com\/axe-con\/wp-content\/uploads\/2026\/09\/Axe-con-2027-banner.png","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/","url":"https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/","name":"A solution for the visual and source order disconnect - Axe-con","isPartOf":{"@id":"https:\/\/www.deque.com\/axe-con\/#website"},"datePublished":"2026-08-08T16:28:05+00:00","breadcrumb":{"@id":"https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.deque.com\/axe-con\/sessions\/a-solution-for-the-visual-and-source-order-disconnect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.deque.com\/axe-con\/"},{"@type":"ListItem","position":2,"name":"Sessions","item":"https:\/\/www.deque.com\/axe-con\/agenda\/"},{"@type":"ListItem","position":3,"name":"A solution for the visual and source order disconnect"}]},{"@type":"WebSite","@id":"https:\/\/www.deque.com\/axe-con\/#website","url":"https:\/\/www.deque.com\/axe-con\/","name":"Axe-con","description":"Where the global digital accessibility community comes together.","publisher":{"@id":"https:\/\/www.deque.com\/axe-con\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.deque.com\/axe-con\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.deque.com\/axe-con\/#organization","name":"Axe-con","url":"https:\/\/www.deque.com\/axe-con\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.deque.com\/axe-con\/#\/schema\/logo\/image\/","url":"https:\/\/www.deque.com\/axe-con\/wp-content\/uploads\/2026\/07\/Axe-con-Logo.svg","contentUrl":"https:\/\/www.deque.com\/axe-con\/wp-content\/uploads\/2026\/07\/Axe-con-Logo.svg","caption":"Axe-con"},"image":{"@id":"https:\/\/www.deque.com\/axe-con\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.deque.com\/axe-con\/wp-json\/wp\/v2\/axecon-session\/449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.deque.com\/axe-con\/wp-json\/wp\/v2\/axecon-session"}],"about":[{"href":"https:\/\/www.deque.com\/axe-con\/wp-json\/wp\/v2\/types\/axecon-session"}],"wp:attachment":[{"href":"https:\/\/www.deque.com\/axe-con\/wp-json\/wp\/v2\/media?parent=449"}],"wp:term":[{"taxonomy":"track","embeddable":true,"href":"https:\/\/www.deque.com\/axe-con\/wp-json\/wp\/v2\/track?post=449"},{"taxonomy":"difficulty","embeddable":true,"href":"https:\/\/www.deque.com\/axe-con\/wp-json\/wp\/v2\/difficulty?post=449"},{"taxonomy":"playlist","embeddable":true,"href":"https:\/\/www.deque.com\/axe-con\/wp-json\/wp\/v2\/playlist?post=449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}