Modal has no accessible name error when using block editor

  • Resolved robbieparagram

    (@robbieparagram)


    3 months, 3 weeks ago

    When I build a popup using the block editor, I receive an accessibility error on the front end:
    Modal has no accessible name (4.1.2 Name, Role, Value)

    However, when using the Classic Editor, you’re presented with a Popup Title field in the editor. This field appears to feed an aria-labelledby attribute on the modal container element that satisfies the accessibility requirement.

    The block editor allows us to use block patterns and custom blocks in our pop-ups, but we need our sites to be as accessible as possible.

    Is there a way to include that title field while using the block editor? If the Popup Title field was present, I could hide it visually, allowing it to still feed that aria-labelledby attribute. Or is there another solution for this problem?

Viewing 1 replies (of 1 total)
  • Plugin Support Jamie P.

    (@jamiepineda)

    3 months, 3 weeks ago

    Hi @robbieparagram

    Thanks for reaching out. 

    Currently, the Popup Title field is only available when using the Classic Editor. That title is what provides the aria-labelledby attribute, which is why the accessibility error doesn’t appear there.

    If you’d like to use the Popup Title for accessibility purposes, you can temporarily enable the Classic Editor. 

    Once the title has been set, you’re free to switch back to the Block Editor by unchecking that option.

    Let us know if you have other questions.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.