Yeah probably you’re right… I might confuse things up here
This makes considerably more sense than any other proposal here. But I still don’t understand why the links aren’t underlined for accessibility purposes.
@timkaye replying here to keep this specific concern in the same thread as the petition.
Is there an accessibility concern with rearranging the fields on the profile page, or was your comment referring to something else?
My concern is that there are links there that aren’t underlined. Normally, accessibility would require that they be underlined. Yet this page is used so often, and by so many people, that it suggests to me that there might be a reason why those links are not underlined.
If there is such a reason (and I don’t know, which is why I asked) then who knows what moving those links around does in terms of accessibility? Until we have answers to these questions, I think it would be entirely wrong to make any changes to the layout because, frankly, we have no idea what the implications are.
1 Like
OK, note that I’ve moved these comments back over to the petition to rearrange the login page.
This accessibility concern is a specific example of something we would learn more about in the process of revising the history of the login screen.
1 Like
Title changed from “Petition to center lost password/back links on login page” to “Center lost password/back links on login page” according to petition title guidelines.
Recommended, yes. Required, no. There’s also difference between links in the main content and navigational links. WCAG requires non-color designator for main content links, which is usually an underline but could be something else technically.
From WebAIM:
Although users are accustomed to seeing links in the main content underlined, they are also accustomed to seeing tabs and main navigational features (oftentimes created as graphics rather than text) without underlining. In these cases, the linked items should be designed so it is apparent that the user can click on them to perform an action.
I think this is why those links are not underlined. They are not part of the main content, they are navigational in nature.
1 Like
Actually, they are part of the main content, which we already discussed when we talked about how footers are centered, not content.
And they don’t have any other non-color designation of being a link.
1 Like
If that is the reason - and it’s a big if - moving them around clearly makes things worse.
As things currently stand, there’s a page footer and a site footer, each treated quite differently. But the petition seeks to meld everything together because some people think it looks nicer. That’s the epitome of how changing things for arguable aesthetic improvement can easily make things worse for those already at a disadvantage.
3 Likes
I should have been more specific. It should have been “body text”. We’re talking about paragraphs of text, like a blog post. That’s where underlining or any non-color designator is required by WCAG.
Navigational links, or stand alone links, they need to stand out but they don’t have to be underlined. As WebAIM points out, many people are accustomed to these links not being underlined.
Well, for a login page, this is the main content, body text. You can’t pick apart the WCAG differently for each page.
1 Like
HTML structure has no relevance on the text/content. For WCAG, structural header, main content, footer has no relevance when it comes to links. Body text refers to the literal body of text, sentences and paragraphs. This is an important distinction to understand success/failure criterion for links.
Those 2 links, forgot password and go back to site, are navigational links. They are not within any text. So they do not require non-color indicator to help color blind users. If they were part of a paragraph, then yes they would need underline to help users identify them as links and not just regular text.
Here’s the failure test for links:
https://www.w3.org/TR/WCAG20-TECHS/F73.html
Note this part, bolding is mine:
While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link.
I’m not picking WCAG apart for each page 
I’m applying WCAG guidelines to a T. Location of links matters, within text or stand-alone such as navigation.
I would go as far as saying I don’t think I have ever seen an example of an underlined lost password link.
Indeed it does. So moving links around without looking seriously at the implications for those with diminished sight is clearly a no-no.
I’ve been looking around at some of the login forms that I use. One that stands out and actually has to be fully accessible and even ADA compliant is from the US government. The login.gov SSO service. Screenshot below.
Interestingly, they do have underlined links @ozfiddler
This design actually works well. Even though they left-aligned links, it doesn’t look like it’s about to fall over on one side because the elements and design work well together to create a balanced look.
The large Sign In button (which seems to be popular across many websites) and links being part of the white box make the design balanced. Links in the footer are irrelevant for our discussion.
So, here’s a mock-up of what this might look like in CP inspired by login.gov. 3 different variations, with some minor adjustments. I think this looks clean, well-balanced, and accessible for everyone. I can help implement this. Thoughts?
Edit: Added option 4.
2 Likes
Ah, that’s interesting. Putting the links inside the white box suddenly makes the left-aligned much more sensible.
Any reason you didn’t put all 4 links inside? I’m not sure I see the point of one being left out.
(Oh, and I feel duty bound to point out that it fails the “instantly familiar” test 
)
Agreed. No. 1 (and therefore 2) is great, but let’s have all 4 links in the box.
@ozfiddler @anon95694377 I’ve added option 4 with all links in the white box in my original post. I thought leaving one at the bottom might serve as a footer that ideally the privact policy link would occupy.
I like 4. If you wanted to subtly differentiate the privacy link from the others, you could use a grey horizontal line, same as they have done in the login.gov example (but I don’t think it is necessary).
1 Like
