Material select accessibility issue


Topic: Material select accessibility issue

webshapers pro premium priority asked 6 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">
                &nbsp;
            </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 commented 6 months ago

Thanks for reporting. We will check how we can solve this issue and we will fix it.


webshapers pro premium priority commented 6 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


Grzegorz Bujański staff answered 2 months ago

It's on our to-do list. We will try to fix it as soon as possible


hraud pro premium priority answered 2 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.

*


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: -
  • Device:
  • Browser:
  • OS:
  • Provided sample code: No
  • Provided link: Yes