[#11823] - a11y improvement for login form
- Closed
- 28 Aug 2016
- Medium
- Build: staging
- Easy Test
- # 11823
- Diff
- brianteeman:a11ylogin
- Success continuous-integration/travis-ci/pr The Travis CI build passed Details
User tests: Successful: Unsuccessful:
Every form with a fieldset should also have a legend. The login form does not
Summary of Changes
Add a legend to the fieldset using a new language string and with a css class that renders the text invisible.
Testing Instructions
Apply PR and go to login page (not module) on the front end
Check the code and you will find after the fieldset tag a legend tag
<legend class="element-invisible">Login Form</legend>
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Front End Components |
| Labels |
Added:
?
|
||
| Labels |
Added:
?
|
||
| Category | Front End Components | ⇒ | Front End Components Language & Strings |
| Category | Front End Components Language & Strings | ⇒ | Accessibility Components Front End Language & Strings |
| Labels | |||
| Easy | No | ⇒ | Yes |
Groupings of form controls, typically groups of related checkboxes and radio buttons, sometimes require a higher level description (such as "Shipping Method" for a group of shipping option radio buttons). This descriptive text can be associated to the group of form controls using <fieldset> and <legend>. The <fieldset> identifies the entire grouping and <legend> identifies the grouping's descriptive text. Using <fieldset> and <legend> ensures that the text description is read to screen reader users when the grouping is navigated to.
From http://webaim.org/techniques/forms/
@jeckodevelopment - Screen readers to not read hidden elements (display:none;). We have 2 options:
- Close this PR
- Update the PR and use
text-indent: 9999;instead ofdisplay:none;
Disagree
My mistake in my memory our class element invisible was the equivalent to
the bootstrap three class sr-only.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-08-28 16:15:39 |
| Closed_By | ⇒ | brianteeman |
Closed
Legend is not required, but instead optional. So not really any point in rendering unnecessary, hidden markup