tmedwards / sugarcube-2

SugarCube is a free (gratis and libre) story format for Twine/Twee.
https://www.motoslave.net/sugarcube/2/
BSD 2-Clause "Simplified" License
177 stars 41 forks source link

empty <h> element when dialog is closed for ui-dialog-title (accessibility, minor) #212

Closed moates closed 1 year ago

moates commented 1 year ago

Problem

In the main document structure for the UI Dialog Titlebar, there is an empty <h1>tag placeholder. When a UI Dialog is open, the title is injected. When there is no UI Dialog open, there is an empty <h1> element:

`

`

Empty headers can be confusing for navigation. The same is true for the button tag, though a lower priority. There should ideally not be invisible or empty header or control elements.

Example Fix In dialog.js, inject the header only on dialog open, remove on close.

(Also...Thank you for all your work! We love sugarcube!)

tmedwards commented 1 year ago

Is this something that you've actually had an issue with?

The dialog's display value is normally set to none, so no browser—normal or screen reader—should be paying attention to the dialog until such time as it's opened and its display status changed—by which time the header content will have been injected.

moates commented 1 year ago

No, it's not! We had someone do an accessibility audit of our game and they flagged this. I only investigated enough to find where in the source it originates. It's possible they used some crappy automated tool that flagged it.

I'll close this and keep an eye out to see if I notice any display value issues.