accessibility: Add aria-describedby to login/forgot password (LMS-602)

Also adding the email description to the login page and applying the
same aria attribute to the correspondin input on that page.

From LMS-602:

> There is additional explanatory text, marked up in a span element after
> the email input. The input elements should be explicitly associated with
> this additional text using the aria-describedby attribute. This will
> require an ID to be assigned to the span element.
This commit is contained in:
Xavier Antoviaque
2013-09-09 08:17:15 -03:00
parent 9c6987d010
commit f708806118
2 changed files with 4 additions and 3 deletions

View File

@@ -19,8 +19,8 @@
<ol class="list-input">
<li class="field required text" id="field-email">
<label for="pwd_reset_email">${_("Your E-mail Address")}</label>
<input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" />
<span class="tip tip-input">${_("This is the email address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
<input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" aria-describedby="pwd_reset_email-tip" />
<span class="tip tip-input" id="pwd_reset_email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
</li>
</ol>
</fieldset>

View File

@@ -113,7 +113,8 @@
<ol class="list-input">
<li class="field required text" id="field-email">
<label for="email">${_('E-mail')}</label>
<input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" />
<input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" aria-described-by="email-tip" />
<span class="tip tip-input" id="email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
</li>
<li class="field required password" id="field-password">
<label for="password">${_('Password')}</label>