Readonly controls

[basham]

Sometimes in a form, there needs to be some non-interactive content. However, it can be tricky to make sure that someone using a screen reader is aware of this non-interactive content. Once a user enters a form and starts to navigate with the Tab key, they start using form mode. This means that any non-tabbable content can be skipped. If this content is a description of a form control, the content can be connected to the control with aria-describedby. However, sometimes, there is no obvious control that the content can be connected to. For example, maybe a form allows you to enter building and room information, but the campus is already predetermined by an earlier process. (Maybe the system knows the user is associated only with IUPUI, so that's the only option.) In this case, how does the campus information get communicated to the user? In this readonly fields CodePen, I explore some ways in which this could be done. I suspect the best way to handle it is with a <input type="text" readonly> control. These remain focusable but aren't editable. Some questions:

1. Is a readonly input the best solution?
2. How should readonly controls be styled? Should they be boxy (like inputs) or more subdued (like text)?

Some other resources that may be helpful:

1. General good form example
2. Placing non-interactive content between form controls
3. HTML attribute: readonly