Accessibility of inputs with z-index showing in dialog

Question

I have the requirement, to show a dialog, which integrates some inputs from the background (not all), as it enhances their functionality. So I want them to blend through to the dialog and be editable from there. This is not very hard to do with z-index, but the inputs must be outside of the dialog markup. I wonder if this works for a screen reader (my guess is it does not) and if not: Do you have any suggestions how I could make this work, without adjusting every input of the whole form?

Here is an example of what I'd like to accomplish in an accessible way:

  function showDialog()
  {
    document.getElementById("dialog").style.display = 'table';
  }

  function hideDialog()
  {
    document.getElementById("dialog").style.display = 'none';
  }

  form > div
  {
    margin: 10px;
  }

  .layer
  {
    margin: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
  }

  .showThrough
  {
    position: relative;
    z-index: 1100;
  }

<form>
  <div class="showThrough">
    <label>Input 1:</label><input/>
  </div>
  <div>
    <label>Input 2:</label><input/>
  </div>
  <div class="showThrough">
    <label>Input 3:</label><input class="showThrough"/>
  </div>
  <input type="button" onclick="showDialog()" value="Show dialog"/>
  <input type="button" value="Submit"/>
  <div id="dialog" role="dialog" class="layer" style="display: none;">
    <input type="button" value="Close" onclick="hideDialog()"
      style="position: absolute; bottom: 15px; right: 15px;"/>
  </div>
</form>

Answer 1

Problems you need to think about

The biggest issue I see on most modals is that they allow focus outside of them.

You can't just stop users using the tab key as that is not how most screen reader users navigate the page (they use shortcuts for headings (h1-h6), hyperlinks, form inputs etc.).

For this reason you would then have to add aria-hidden="true" and tabindex="-1" to every element on the page that isn't part of the modal and then remove it again when the modal is dismissed (this can be applied to the containers as all of their children will then not be able to receive focus so it isn't as scary as it sounds).

You would also need to use this method on all of your 'disabled' fields that aren't part of the 'modal' (I put these in quotation marks as they aren't disabled and this isn't actually a modal!).

You also need to make sure the modal can be dismissed with the Esc key as that is expected behaviour.

You also need to ensure that the first <input> is focused programatically when you launch your modal as otherwise when you disable the 'submit' button the focus may not go where you intend.

Why are you doing this, is there a better way?

You haven't stated why this requirement exists, but if it is simply to highlight essential fields you may be better simply using a large thick outline on them that is activated with your button and not interfering with the flow of the document.

Sometimes requirements seem like a good idea but in the example you showed (I know it is stripped back) I found it annoying that the 'close' button was out the way of the document and that it added an extra step in having to close the dialog when I was done (should you not allow submission from within the dialog?).

If this is a required feature and you can't persuade the powers that be that it isn't a good idea (I know what it is like!), you may be better creating an actual modal and then filling the fields in the main form with JavaScript on modal close / inputs updating as this will reduce the amount of things your need to disable on the page.

i.e. you just clone the required fields into your modal and then use tabindex="-1" and aria-hidden="true" on the <header> and <main> on the whole document to manage focus.

This makes the page much more maintainable in the future as you won't have to update your script every time you add a section to the page.

If your form is dynamic (fields change) then you could just use JavaScript to create the form within the modal (i.e. loop through the form fields, find the 'showThrough' items and clone them into the modal.) or do it on the back end.