Topic: Fix accessability issue datepicker
Expected behavior 100 score on Lightshouse on a vanilla mdbootstrap form.
Actual behavior Reduces score due to missing accessible button name (93)
"When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. Learn how to make buttons more accessible." "button#datepicker-toggle-arkon-form-group-birth.datepicker-toggle-button"
Is this something that must be fixed in mdbootstrap or am I doing something wrong?
Resources (screenshots, code snippets etc.)
<div class="form-outline form-outline mb-4 datepicker-disable-future"
data-mdb-input-init id="form-group-birth"
>
<input
type="date"
id="birth"
name="birth"
class="form-control"
title="Birthdate"
aria-labelledby="label-birth"
aria-required="false">
<label for="birth" class="form-label " id="label-birth">
Birthdate
</label>
</div>
As of now, default toggle buttons do not include accessibility attributes. However, you can add them when using a custom toggle button. I’ve created a snippet for you: https://mdbootstrap.com/snippets/standard/kpienkowska/6398399
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 9.0.0
- Device: Mac
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No