Best Way to Display Labeled, Non-editable, Information Semantically
Hello all, less a CSS question and more of a general best practice type of thing.
My company has a web application where it's primary purpose is to display heaps of information. We have "reports" which are tables of information but within detail pages we most often display labeled information in the form of a disabled or read only input.
My question is from a best practice and accessibility standpoint, is a disabled input really the best way to display this information since it wouldn't be interactable or editable or would a set of styled divs and spans be more appropriate?
10 Replies
can you give dummy examples?
right now, you're asking us the best way to implement vague vagueness
sounds like you need
<details> but it sounds like something elseHello! Here are a couple dummied screenshots of how the company kinda approaches the subject currently. Sorry for being so vague. Our product integrates with a ton of third party data providers and is supposed to be a one stop shop to manage that data. A lot of that data is not directly editable and is reported by some external device (things like motherboard type, or IP address, stuff that is necessarily editable either because of the type of data or not something that can be managed remotely). A lot of these read-only data points influence users decisions on data points that ARE editable. Currently our approach is to have the uneditable (and never editable) information be shown using a disabled input and the overall question is is this the right approach? I think the <details> element is way closer to the point of the information in question but it's not something that I would necessarily want to be toggled open/closed.
In the Reported Only data screenshot, every data point there with a label and text value is a disabled input styled to not really look like an input at all. In the working remote console screenshot, this is a page that would have both editable and reported information where the uneditable information is again a disabled input and editable info is a standard styled input.
if it isn't editable, why is it an input?
That's what I'm questioning. They've used this pattern for 20+ years and as the front end is being redesigned with more modern practices and designs, I'm questioning this pattern. I wasn't sure if there was a preferred practice or standard that existed that made more sense semantically/accessibility wise. The details element as you mentioned makes a bit of sense for the purpose of the information but not something I would want togglable.
My discussion question here was to see how these really should be set up whether that be divs and/or spans or something else I'm not aware of.
paragraphs, spans,
<time> for dates/times
but honestly, im questioning this too
because a label with an input is very tempting
but i would stick to those 3Fair enough, appreciate the feedback. The labeled input I think is and has been the easy button because there isn't really additional setup and it melds next to editable inputs well.. but as an input itself doesn't really make sense.
no, doesn't make sense to be an input
also, if the inputs have names, then you're sending extra data for no reason at all
We use Vue as our primary ecosystem so we aren't doing work through actual form submissions except in places that haven't been converted over. In those places DEFINITELY sending up way more than is needed but in most places shouldn't be too big of an issue.
it's still something to take into consideration
i would expect some of those non-editable fields to be send and be used anyways, so, attention is important
Absolutely agree