Swapping in inline form vs disabled/styled input
If I have a displayed element (lets say a name) that I want the user to be able to change, I see two options:
1) A display element (a div or something) and an inline form, with javascript showing one or the other based on clicking an edit button, cancelling the form, etc.
2) A input with classes/disabled that's swapped via interaction, so in one state it looks like an unstyled display element, and the other looks like an input.
Is there any downside to the latter? If the form/input are both submitted via fetch anyway, is there any problem with just having an unstyled input?
6 Replies
we need more context
what exactly are you trying to do?
I've got a page on which I want to make an element editable, but as it's only one element, I don't want to redirect to a separate edit page. So I figure I can make the element editable inline. As I'm mostly a backend, I'm just not sure if there are things I need to keep in mind when creating elements that I'll basically hot swap on the FE to allow the user to do the edit. Creating the form/element isn't an issue; I'm versed enough at swapping classes/properties and handling the handlers to allow me to make the fetch calls. It's more about page structure and "gotchas" I may not know.
basically, make sure you used a button to initiate the editing, that the input that is swapped in is automatically focused and has the proper aria attributes, and that should be fine
make sure you use labels and there's a button to cancel
and when you save or there's an error, make sure it is stupid obvious (with color and an icon)
Accessibility is something I def don't have a good grasp on. I've struggled to find a good tutorial on it.
accessibility is pretty hard
I too cannot find enough accessibility knowledge esp all compiled into one place.
There's a course by Sara Soueidan
For free, [Chrome for Developers Leaen Accessibility Course] (https://developers.google.com/profile/badges/playlists/webdev/learn-accessibility)
Also just reading through ARIA Authoring Practices Guide (APG)
The Practical Accessibility Course
A get-right-down-to-it online course for Web designers and developers who want to start creating more accessible Web user interfaces and digital products today
Google for Developers
Learn Accessibility | Google Developer Program | Google for...
Earn this badge when you complete the Learn Accessibility course.
Web Accessibility Initiative (WAI)
ARIA Authoring Practices Guide
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).