{"id":1772,"date":"2025-10-28T12:17:35","date_gmt":"2025-10-28T12:17:35","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=1772"},"modified":"2025-10-28T12:35:23","modified_gmt":"2025-10-28T12:35:23","slug":"chatgpt-sez-build-with-semantics-first","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2025\/10\/28\/chatgpt-sez-build-with-semantics-first\/","title":{"rendered":"ChatGPT sez Build with semantics first"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1776\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/10\/IMG_6969.jpg\" alt=\"ChatGPT Atlas logo, a scalloped blue circle that looks like an anus with a rounded arrow-shaped butt plug, and two fists pulling it open at the edges. With Patrick and Doc Swallow in bottom left corner taking the opportunity to photobomb.\" width=\"480\" height=\"480\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/10\/IMG_6969.jpg 921w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/10\/IMG_6969-300x300.jpg 300w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/10\/IMG_6969-150x150.jpg 150w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2025\/10\/IMG_6969-768x768.jpg 768w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/p>\n<p>Original Atlas browser logo Goatse by <a href=\"https:\/\/mastodon.social\/@aardrian@toot.cafe\">Adrian<\/a><\/p>\n<h2>Shat advice<\/h2>\n<p>One of the issues that I found most peturbing from the <a href=\"https:\/\/html5accessibility.com\/stuff\/2025\/10\/23\/atlas-ableism\/\">Atlas browser<\/a> <a href=\"https:\/\/help.openai.com\/en\/articles\/12627856-publishers-and-developers-faq#h_30e9aae450\">FAQ&#8217;s<\/a> for front end developers was the advice to use ARIA:<\/p>\n<blockquote><p><strong>ChatGPT Atlas uses ARIA tags[sic]<\/strong>\u2014the same labels and roles that support screen readers\u2014to interpret page structure and interactive elements. To improve compatibility, follow<a class=\"intercom-content-link\" href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/\" target=\"_blank\" rel=\"noopener\">\u00a0WAI-ARIA best practices<\/a>\u00a0by adding descriptive roles, labels, and states to interactive elements like buttons, menus, and forms. This helps ChatGPT recognize what each element does and interact with your site more accurately.<\/p><\/blockquote>\n<p>From this one could assume that ChatGPT does not recognise native HTML semantics&#8230;<\/p>\n<p>I investigated this a bit and found no guidance on how to use HTML in general to support ChatGPT\/OpenAI Atlas browser in understanding content semantics&#8230;<\/p>\n<p>So I turned to ChatGPT and asked a question:<\/p>\n<blockquote><p><strong>Question<\/strong>: what is the HTML coding advice for developers who want to ensure that it works with the openai Atlas browser?<\/p><\/blockquote>\n<p>Its response:<\/p>\n<h2>HTML coding advice for OpenAI Atlas<\/h2>\n<p class=\"codepen\" style=\"height: 411px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"411\" data-default-tab=\"result\" data-slug-hash=\"PwZaEPG\" data-pen-title=\"Untitled\" data-user=\"stevef\">See the Pen <a href=\"https:\/\/codepen.io\/stevef\/pen\/PwZaEPG\"><br \/>\nUntitled<\/a> by steve faulkner (<a href=\"https:\/\/codepen.io\/stevef\">@stevef<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script><\/p>\n<p>Maybe the <a href=\"https:\/\/help.openai.com\/en\/articles\/12627856-publishers-and-developers-faq#h_30e9aae450\">FAQ<\/a> documenters should have asked their own product as it provides a lot better advice (via knowledge harvesting the work of others) than &#8220;Use ARIA tags[sic]&#8221;<\/p>\n<h2>Further reading:<\/h2>\n<ul>\n<li><a href=\"https:\/\/adrianroselli.com\/2025\/10\/openai-aria-and-seo-making-the-web-worse.html\">OpenAI, ARIA, and SEO: Making the Web Worse<\/a><\/li>\n<li><a href=\"https:\/\/html5accessibility.com\/stuff\/2025\/10\/23\/atlas-ableism\/\">Atlas Ableism<\/a><\/li>\n<li><a href=\"https:\/\/html5accessibility.com\/stuff\/2023\/05\/08\/shatgpt\/\">ShatGPT<\/a><\/li>\n<li><a href=\"https:\/\/html5accessibility.com\/stuff\/2024\/12\/13\/shatgpt-4o\/\">ShatGPT 4o<\/a><\/li>\n<li><a href=\"https:\/\/html5accessibility.com\/stuff\/2025\/08\/15\/ai-effluential\/\">AI effluential<\/a><\/li>\n<\/ul>\n<h2>Joker and the Thief<\/h2>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/Nr0SqIAFohk?si=mpumdcNJugh9LfHO\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<details>\n<summary>lyrics<\/summary>\n<pre>I said the joker is a wanted man\r\nHe makes his way all across the land\r\nSee him sifting through the sand\r\nSo I'll tell you all the story\r\nAbout the joker and the thief in the night\r\nHe's always laughing in the midst of power\r\nAlways living in the final hour\r\nThere is always sweet and sour\r\nSo we are not going home\r\nCan you see the joker flying over\r\nAs she's standing in the field of clover?\r\nWatching out everyday\r\nI wonder what would happen if he took her away\r\nWhat you see, well, you might not know\r\nYou get the feelin', comin' after the glow\r\nThe vagabond is moving slow\r\nSo I'll tell you all the story\r\nAbout the joker and the thief in the night\r\nAll the people that you see in the night\r\nHold their dreams up to the light\r\nThe wild beast is searching for sight\r\nAnd we are not going home\r\nCan you see the joker flying over\r\nAs she's standing in the field of clover?\r\nWatching out everyday\r\nI wonder what would happen if he took her away\r\nI said the joker is a wanted man\r\nHe makes his way all across the land\r\nSee him sifting through the sand\r\nSo I'll tell you all the story\r\nAbout the joker and the thief\r\nI said I'll tell you all the story\r\nAbout the the joker and the thief\r\nI said, I'll tell you the story\r\nAbout the joker and the thief in the night\r\n<\/pre>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>Original Atlas browser logo Goatse by Adrian Shat advice One of the issues that I found most peturbing from the Atlas browser FAQ&#8217;s for front end developers was the advice to use ARIA: ChatGPT Atlas uses ARIA tags[sic]\u2014the same labels and roles that support screen readers\u2014to interpret page structure and interactive elements. To improve compatibility, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1772","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/comments?post=1772"}],"version-history":[{"count":7,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1772\/revisions"}],"predecessor-version":[{"id":1780,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/1772\/revisions\/1780"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=1772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=1772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=1772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}