diff options
| author | Luce Carević <lcarevic@access42.net> | 2019-07-12 23:54:42 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-07-12 23:54:42 +0200 |
| commit | 852872930fea73eb4699acb4d1c28cfd0a979120 (patch) | |
| tree | 6440ea78ed092c8d77b492fa0ddae5b822b5ba21 | |
| parent | c03c90a13e1356ca9cf40cc664547c49305cb24b (diff) | |
| download | Shaarli-852872930fea73eb4699acb4d1c28cfd0a979120.tar.gz Shaarli-852872930fea73eb4699acb4d1c28cfd0a979120.tar.zst Shaarli-852872930fea73eb4699acb4d1c28cfd0a979120.zip | |
a11y fix: label and tabindex
Don't use tabindex values other than -1, 0. (see https://webaim.org/techniques/keyboard/tabindex).
Fix inputs without labels (the placeholder attribute is not a proper labelling method)
| -rw-r--r-- | tpl/default/loginform.html | 16 |
1 files changed, 7 insertions, 9 deletions
diff --git a/tpl/default/loginform.html b/tpl/default/loginform.html index bfc54815..edc440e3 100644 --- a/tpl/default/loginform.html +++ b/tpl/default/loginform.html | |||
| @@ -1,5 +1,5 @@ | |||
| 1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
| 2 | <html{if="$language !== 'auto'"} lang="{$language}"{/if}> | 2 | <html {if="$language !== 'auto'"} lang="{$language}"{/if}> |
| 3 | <head> | 3 | <head> |
| 4 | {include="includes"} | 4 | {include="includes"} |
| 5 | </head> | 5 | </head> |
| @@ -9,7 +9,7 @@ | |||
| 9 | <div class="pure-g pure-alert pure-alert-error pure-alert-closable center"> | 9 | <div class="pure-g pure-alert pure-alert-error pure-alert-closable center"> |
| 10 | <div class="pure-u-2-24"></div> | 10 | <div class="pure-u-2-24"></div> |
| 11 | <div class="pure-u-20-24"> | 11 | <div class="pure-u-20-24"> |
| 12 | {'You have been banned after too many failed login attempts. Try again later.'|t} | 12 | <p>{'You have been banned after too many failed login attempts. Try again later.'|t}</p> |
| 13 | </div> | 13 | </div> |
| 14 | <div class="pure-u-2-24"> | 14 | <div class="pure-u-2-24"> |
| 15 | <i class="fa fa-times pure-alert-close"></i> | 15 | <i class="fa fa-times pure-alert-close"></i> |
| @@ -22,20 +22,19 @@ | |||
| 22 | <form method="post" name="loginform"> | 22 | <form method="post" name="loginform"> |
| 23 | <h2 class="window-title">{'Login'|t}</h2> | 23 | <h2 class="window-title">{'Login'|t}</h2> |
| 24 | <div> | 24 | <div> |
| 25 | <input type="text" name="login" placeholder="{'Username'|t}" | 25 | <input type="text" name="login" aria-label="{'Username'|t}" placeholder="{'Username'|t}" |
| 26 | {if="!empty($username)"}value="{$username}"{/if} class="autofocus" tabindex="20"> | 26 | {if="!empty($username)"}value="{$username}"{/if} class="autofocus"> |
| 27 | </div> | 27 | </div> |
| 28 | <div> | 28 | <div> |
| 29 | <input type="password" name="password" placeholder="{'Password'|t}" class="autofocus" tabindex="21"> | 29 | <input type="password" name="password" aria-label="{'Password'|t}" placeholder="{'Password'|t}" class="autofocus"> |
| 30 | </div> | 30 | </div> |
| 31 | <div class="remember-me"> | 31 | <div class="remember-me"> |
| 32 | <input type="checkbox" name="longlastingsession" id="longlastingsessionform" | 32 | <input type="checkbox" name="longlastingsession" id="longlastingsessionform" |
| 33 | {if="$remember_user_default"}checked="checked"{/if} | 33 | {if="$remember_user_default"}checked="checked"{/if}> |
| 34 | tabindex="22"> | ||
| 35 | <label for="longlastingsessionform">{'Remember me'|t}</label> | 34 | <label for="longlastingsessionform">{'Remember me'|t}</label> |
| 36 | </div> | 35 | </div> |
| 37 | <div> | 36 | <div> |
| 38 | <input type="submit" value="{'Login'|t}" class="bigbutton" tabindex="23"> | 37 | <input type="submit" value="{'Login'|t}" class="bigbutton"> |
| 39 | </div> | 38 | </div> |
| 40 | <input type="hidden" name="token" value="{$token}"> | 39 | <input type="hidden" name="token" value="{$token}"> |
| 41 | {if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl}">{/if} | 40 | {if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl}">{/if} |
| @@ -48,4 +47,3 @@ | |||
| 48 | {include="page.footer"} | 47 | {include="page.footer"} |
| 49 | </body> | 48 | </body> |
| 50 | </html> | 49 | </html> |
| 51 | |||