search

openlibhums / hourglass

Hourglass press theme for OLH
GNU Affero General Public License v3.0
1 stars 1 forks source link

Differentiate placeholder and aria labels for text input fields #356

Open StephDriver opened 7 months ago

StephDriver commented 7 months ago

from # 329

The placeholder and the aria label are identical but they serve different purposes. For example in the input for email signup for the news letter:

<input class="
        bg-blue border-white
        text-white cursor-white placeholder:text-white
        max-lg:placeholder:text-md lg:placeholder:text-lg
        max-lg:text-md lg:text-lg
        border-t-0 border-r-0 border-b-1 border-l-0
        focus:outline focus:outline-white focus:outline-offset-0
        focus:ring-transparent focus:border-b-transparent" 
    id="email" 
    type="email" 
    name="EMAIL" 
    value="" 
    aria-label="Your email" 
    placeholder="Your email">

The aria-label should identify that this is input is for an email address for signing up for the newsletter and the placeholder may be better as an example of an email address.

StephDriver commented 2 months ago

nb. this issue is to fix this specific instance. A general audit to find more examples and fix them is in