Hints are generally considered to be bad for accessibility even though they wont fail automated tests see https://www.smashingmagazine.com/2018/06/placeholder-attribute/

Placing the text between the label and the input and associating it with the input using aria-described by on the input seems to be the recommendation.

But please check with the accessibility team

We have many occurences of hint in core. Should it not be solved at that level?

Please ask the accessibility team

@zwiastunsw
Anything you can do?

Why not expand the label?

The code for hint in the password field (/layouts/joomla/form/field/password.php) is:
`strlen($hint) ? 'placeholder="' . htmlspecialchars($hint, ENT_COMPAT, 'UTF-8') . '"' : '',

In core this is what we have for the Search field

<input type="text" name="filter[search]" id="filter_search" value="" class="form-control" aria-describedby="filter[search]-desc" placeholder="Search" inputmode="search">

It is a text field layout where we have among attributes
!empty($description) ? 'aria-describedby="' . $name . '-desc"' : '',

If I add the same attribute in the password field layout + a description in the xml, i.e.

		<field
			name="admin_password"
			type="password"
			label="INSTL_ADMIN_PASSWORD_DESC"
			description="INSTL_ADMIN_PASSWORD_LENGTH"
			hint="INSTL_ADMIN_PASSWORD_LENGTH"
			id="admin_password"
			class="form-control" // to take off
			required="true"
			autocomplete="new-password"
			validate="password"
		/>

I will get

<input type="password" name="jform[admin_password]" id="jform_admin_password" value="" autocomplete="new-password" class="form-control form-control required" aria-describedby="jform[admin_password]-desc" maxlength="99" required="" data-min-length="4" placeholder="Enter at least 12 characters.">

Is it what you want for accessibility?

Note:
We also have to correct the double form-control class as it is already defined in the layout and is unecessary in the xml
!empty($class) ? 'class="form-control ' . $class . '"' : 'class="form-control"',

you should remove the placeholder=
and add a div with an id of jform[admin_password]-desc that contains the text

So, what you mean is that the Search field is wrong?
There is a div for it indeed but as a tooltip role... It keeps the placeholder.

I think this is correct.

I can obtain a similar result for installation password with the change above and

<div class="password-group">
	<div class="input-group">
		<input
			type="password"
			name="<?php echo $name; ?>"
			id="<?php echo $id; ?>"
			value="<?php echo htmlspecialchars($value, ENT_COMPAT, 'UTF-8'); ?>"
			<?php echo implode(' ', $attributes); ?>>
		<?php if (!empty($description)) : ?>
			<div role="tooltip" id="<?php echo $name . '-desc'; ?>">
				<?php echo htmlspecialchars(Text::_($description), ENT_COMPAT, 'UTF-8'); ?>
			</div>
		<?php endif; ?>
		<span class="input-group-append">
			<button type="button" class="btn btn-secondary input-password-toggle">
				<span class="fas fa-eye fa-fw" aria-hidden="true"></span>
				<span class="sr-only"><?php echo Text::_('JSHOWPASSWORD'); ?></span>
			</button>
		</span>
	</div>
</div>

to get

Remains to add the css which is absent from installation

// set up hidden tooltip
[role="tooltip"]:not(.show) {
  z-index: $zindex-tooltip;
  display: none;
  max-width: 100%;
  padding: .5em;
  margin: .25em;
  color: $white;
  text-align: start;
  background: $black;
  border-radius: .2rem;
}

// reveal associated tooltip on focus
:focus + [role="tooltip"],
:hover + [role="tooltip"] {
  position: absolute;
  display: block;
}

Agree?

reading on my phone but that would be correct if you wanted it as a "tooltip" style

I can get, after I take off the hint

and code is

Don't know any way to display a <div> in the field itself to replace the hint.

Don't know any way to display a

in the field itself to replace the hint.

You definitely do not want to do that. That is what the article was explaining makes the hint not accessible.
You can either do it as you have done as a "tooltip" or as below which is what I thought you would be doing

Or do as @chmst suggested

as below which is what I thought you would be doing

Easy enough. I prefer

or, with text-muted

It can now be tested. Accessibility should be OK.

Please consider doing it this way:

Add the following after line 114 and delete lines 95-99.

	<?php if (!empty($description)) : ?>
		<small id="<?php echo $name . '-desc'; ?>" class="form-text text-muted">
			<?php echo htmlspecialchars(Text::_($description), ENT_COMPAT, 'UTF-8'); ?>
		</small>
	<?php endif; ?>

@Quy please read the article I linked to which explains why this is a bad idea. Telling me after the input what I should have put in the input is not correct

OK. Keep it as it but change the markup slightly.

@Quy will do

@Quy
<small> (which means font-size: .8rem;) would not work on Macintosh if not inside a <div>. The hint is displayed to the right of the field.

I just added the small class to get the result proposed. I.e.

<?php if (!empty($description)) : ?>
	<div id="<?php echo $name . '-desc'; ?>" class="text-muted small">
		<?php echo htmlspecialchars(Text::_($description), ENT_COMPAT, 'UTF-8'); ?>
	</div>
<?php endif; ?>

Folks, please test.

I have tested this item ✅ successfully on bebeccb

Works fine for me.

I have tested this item ✅ successfully on bebeccb

Works fine for me.

I have tested this item ✅ successfully on bebeccb

RTC