search

authorizerdev / authorizer

Your data, your control. Fully open source, authentication and authorization. No lock-ins. Deployment in Railway in 120 seconds || Spin a docker image as a micro-service in your infra. Built in login page and Admin panel out of the box.
https://authorizer.dev
MIT License
1.64k stars 166 forks source link

Accessibillity: Missing for= and ids in Forms #337

Closed candidexmedia closed 1 year ago

candidexmedia commented 1 year ago

Hi! I don't have a current deployment of Authorizer up and running, but I did want to note some accessibility issues with the demo Log In and Sign Up forms (which I assume are using the latest version of Authorizer).

image

The forms are missing key attributes like #ids and for=. These are important for accessibility (see: Labeling Controls and Accessibility concerns > Labels). It will also make creating style customization with CSS easier in the future.

For instance, the following markup for the name field:

<div>
  <label class="sc-eCYdqJ isqRzX"> <span class="sc-gsnTZi bvppDV">*</span>Email</label>
  <input name="email" type="email" placeholder="eg. foo@bar.com" class="sc-jSMfEi dQhCkx" value="">
</div>

... could be:

<div>
  <label for="auth-form-name" class="sc-eCYdqJ isqRzX"> <span class="sc-gsnTZi bvppDV">*</span>Email</label>
  <input id="auth-form-name" name="email" type="email" placeholder="eg. foo@bar.com" class="sc-jSMfEi dQhCkx" value="">
</div>

This will allow the field to be in focus when a user clicks on the label, and a screen reader will read out the label when the user is focused on the form input (source).

lakhansamani commented 1 year ago

@candidexmedia thank you for sharing this, Will add it to all UI SDKs