Topic: Material select accessibility issue
webshapers pro premium priority asked 8 months ago
Dear mdb team,
today we found a rather severe accessibilty issue concerning material select labels https://mdbootstrap.com/docs/standard/forms/select/#section-select-with-label
The way select-labels are currently implemented does not work, they throw accessibilty errors.
Please kindly refer to my code example for details!
<div class="w-100">
/*
Field label should be placed on top of the referred element!
This is my attempt for an additional fake label with class "sr-only".
It contains a "for"-attribute, which unfortunately points to a hidden <select> and thus does not work
*/
<label class="form-label select-label sr-only label-one" for="edit-titel">
Academic Title
</label>
<div id="select-wrapper-edit-titel" class="select-wrapper">
<div class="form-outline">
/* This is the relevant, injected input.
It gets no ID, thus cannot be addressed by the "label for..."
*/
<input class="form-control select-input" readonly="readonly" type="text" />
/* This is the label, that mdb requires to do its magic.
For a11y it should be prefixed to the input field, but for mdb it has to be suffixed. It contains no "for"-attribute
*/
<label class="form-label select-label label-two active" style="margin-left: 0px;">
Titel
</label>
/*
This could need some ARIA to tell the screenreader what it stands for
*/
<span class="select-clear-btn" style="display: block;" tabindex="0">
✕
</span>
<div class="form-notch">
</div>
<div class="form-label select-fake-value active">
- Not selected -
</div>
</div>
/*
This is my original markup. It has an ID which does not get transferred to the injected "<input>"-element
*/
<select id="edit-titel" class="form-select select select-initialized" name="titel" data-mdb-filter="true" data-mdb-clear-button="true" data-mdb-visible-options="8" data-mdb-select-init>
<option selected="selected" value="">
- Not selected -
</option>
<option value="Bc.">
Bc.
</option>
<option value="DI">
DI
</option>
<option value="Dipl.-Ing.">
Dipl.-Ing.
</option>
<option value="Dr.">
Dr.
</option>
</select>
</div>
</div>
Grzegorz Bujański staff answered 4 months ago
hraud pro premium priority answered 4 months ago
This is affecting our users as well. Please fix this. A recent email from one of our customers:
*
Legalwills.ca is to be commended for developing a website that is generally accessible to those of us who use screen reading software because we are totally blind. Having said that, I would like to suggest one significant change to further raise the bar. Specifically, please give serious consideration to replacing all list boxes/dropdowns/combo boxes with standard HTML controls. The JAWS for Windows screen reader is not interacting properly with the dropdowns as they are currently being rendered. It appears as if the other form controls (edit fields, check boxes, and radio buttons) are standard HTML controls, or at least JAWS treats them as if they are.
*
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: -
- Device:
- Browser:
- OS:
- Provided sample code: No
- Provided link: Yes
Grzegorz Bujański staff commented 8 months ago
Thanks for reporting. We will check how we can solve this issue and we will fix it.
webshapers pro premium priority commented 8 months ago
Thank you, @Grzegorz! Maybe this could be helpful: https://www.freecodecamp.org/news/how-to-build-an-accessible-custom-dropdown-select-element/#enhancing-screen-reader-functionality