Skip to content

A11y : consistency in HTML structure when CSS are disabled #16855

Open
@Brice155

Description

@Brice155

What happened?

Hello,
For A11y purpose, screen reader users must have access to information in consistency order.
In QInput, the label is after the input field.

For example :
<div class="q-field__control-container col relative-position row no-wrap q-anchor--skip"><input class="q-field__native q-placeholder" tabindex="0" aria-label="Standard" id="f_5765834d-c63b-4256-8ced-8add0d404384" type="text"><div class="q-field__label no-pointer-events absolute ellipsis">Standard</div><!----></div>

What did you expect to happen?

It would be better to have :

<div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
<div class="q-field__label no-pointer-events absolute ellipsis">Standard</div>
<input class="q-field__native q-placeholder" tabindex="0" aria-label="Standard" id="f_5765834d-c63b-4256-8ced-8add0d404384" type="text">
</div>

Reproduction URL

https://codepen.io/Brayce/pen/dyrepPz?editors=101

How to reproduce?

Create a QInput field and inspect the DOM

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Accessibility [a11y] (quasar)

Platforms/Browsers

Chrome

Quasar info output

» Pkg quasar................ v2.14.3
 » Pkg @quasar/app-webpack... v3.12.3

Relevant log output

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions