Suppose I have a DB of users and I have two main functions: to view or edit existing users.
A page will display a user using dl for example:
<h1>Information</h1>
<dl>
<dt>Name:</dt>
<dd>
xyz
</dd>
<dt>Phone Number:</dt>
<dd>
(123)-424-2345
</dd>
<dt>Hobby:</dt>
<dd>
Fishing
</dd>
</dl>
There will also on the same page be a form to edit the existing information, for example:
<form action="#">
<fieldset>
<legend>Information</legend>
<label>Name:</label><input type="text" name="name" />
<label>Phone Number:</label><input type="text" name="phoneNumber" />
<label>Hobby:</label>
<select>
<option value="1">Coding</option>
<option value="2" selected="selected">Fishing</option>
<option value="3">Reading</option>
</select>
<input type="submit" />
</fieldset>
</form>
So, in the body of the HTML document both of these sections will be present within its own division (div). Which will be rendered to display in the browser will be determined client-side through JavaScript and use of the CSS display style setting the appropriate section to not display (be hidden).
AJAX, a popular thing these days, will reload each section after the form is submitted.
The end goal being that only one is present at a time to the user (either they view existing, or are able to toggle on the ability to edit, once editing is finished AJAX reloads and the view mode is restored to view and the form is hidden again).
So from HTML5 and accessibility point-of-view, is this type of thing common and acceptable? Or is it better to make AJAX change the contents of the div between the view and edit (e.g. more AJAX calls)? Or is there some other better solution?
Its better to go for ajax. Since it is mostly form elements, hope there is nothing interesting for a search crawler (SEO point of view).
“display:none” make the content inaccessible to screen readers. So there is an accessibility issue when using hidden elements. Page will be heavier if we use so many hidden elements in one page.
The benefit of using hidden elements is the user will get the sections more quickly. We can avoid more server pings & avoid storing data before submitting (if any).