Does Atlas understand semantic markup and can it access state of default HTML elements?

ChatGPT
1

Hello. In my defense, ChatGPT sent me here to ask. I don’t see a category that would be appropriate for this question though so I’m not sure this is the right forum.

In the release write up for Atlas it says: “Website owners can also add ARIA ⁠tags to improve how ChatGPT agent works for their websites in Atlas.”

I’m curious about this. ARIA is a backup for when you cannot use semantic markup. It’s not supposed to be the default go-to. While it’s not absurdly crazy, using ARIA is still a lot more work and adds more points of failure than semantic markup.:

So what I’m wondering, does Atlas understand semantic markup and can it access state information about components created using semantic markup or does it really need ARIA since that puts all the state, role, and relationship information into the DOM in a readable format?

Any ideas?

Thanks!

2

Hi @thossola,

Yes, that is a good question!

The developer forum is primarily for those making use of the OpenAI API and related services, which Atlas does not (currently) fall under. So with that in mind, You’d be best off visiting either help.openai.com (small icon in the bottom right corner) for the support system, emailing support@openai.com or perhaps visiting the Discord on OpenAI

But!

When ARIA helps
If you’ve built a custom control where the native element does not convey intent or state, add ARIA roles and states so Atlas can reliably identify and interact with it. OpenAI’s docs say Atlas uses ARIA tags to understand page structure and interactive elements, and recommend adding descriptive roles, labels, and states to things like buttons, menus, and forms.

example

<!-- Good: native button with a clear label -->
<button type="button">Save</button>

<!-- Custom toggle where ARIA is appropriate -->
<div role="switch" aria-checked="false" tabindex="0" aria-label="Dark mode"></div>
<script>
  const sw = document.querySelector('[role="switch"]');
  sw.addEventListener('click', () => {
    const on = sw.getAttribute('aria-checked') === 'true';
    sw.setAttribute('aria-checked', String(!on)); // keep state in sync
  });
</script>
3

TL;DR: aria is to assist the blind and visually impaired.

The AI is visually impaired.

4

Thanks, @Foxalabs. I’ll go seek out the other locations. Didn’t feel like this was the right spot. Thanks ChatGPT! :wink:

1 Like