We sometimes use decorative images alongside "guides" that appear in our AI for Oceans tutorial (eg, the water bottle in the screenshot below -- excuse the 🔴 red outline, irrelevant to this PR). These do not require alt text, per accessibility best practices.
Follow-up work
There are other accessibility issues noted with this component (from accessibility audit) that Sam shared with me. The header is straightforward (I think should be h2?), but I'm having issues getting the ml-playground repo integrated with code-dot-org and would cause some major styling diffs that I can't really debug. The others require reimplementing this as a modal, which I think is out of scope.
Visual heading text is not marked as heading found on page
Able to browse outside modal with screen reader found on page
Keyboard focus is not maintained in modal found on page
Specifically with the continue button:
The element does not have a visible focus indicator. Hence it is difficult to identify where the focus is when the keyboard focus falls on this element.
Keyboard focus is not placed on opened modal found on page
The key board focus is not maintained in the modal. Because of this, the parent page content receives keyboard focus when the modal is open, and the screen reader user gets confused about the scope of the modal content.
We sometimes use decorative images alongside "guides" that appear in our AI for Oceans tutorial (eg, the water bottle in the screenshot below -- excuse the 🔴 red outline, irrelevant to this PR). These do not require alt text, per accessibility best practices.
Follow-up work
There are other accessibility issues noted with this component (from accessibility audit) that Sam shared with me. The header is straightforward (I think should be
h2?), but I'm having issues getting theml-playgroundrepo integrated withcode-dot-organd would cause some major styling diffs that I can't really debug. The others require reimplementing this as a modal, which I think is out of scope.