link to "Implementing X.Y.Z" not sufficiently clear as a link

[nitedog]

To me, the rounded shading around the "Implementing X.Y.Z" seem more like a button or tag function rather than a link (to an external resource)?

[hidde]

I would like to use this visual treatment for links to success criteria and sections in accessibility specifications and plan to add it to our Design Components.

If we manage to consistently use it (I do in the Authoring Tools List, and would also like to use it in the Techniques/Understanding redesign), we can help users identify these types of links more easily, because they get a consistent visual treatment that is different from other links.

[nitedog]

Why not reuse existing treatments/styles (eg. from QuickRef or other WAI pages)?

[hidde]

QuickRef is ‘old’ WAI styling, the redesigned WAI site has no treatment for this yet, so this would introduce just that (as a reusable thing for all WAI properties).

The intended benefit of this, as compared to making everything regular looking links, is that consistently applied visual difference can aid scanning.

[hidde]

Proposal: keep it as it is.

[iadawn]

I would be strongly against the proposed styling.

I don't think the visual affordance is strong enough. I would suggest the inclusion of a information icon to emphasise the additional content. This is more of a blend between the old and the new.

[hidde]

Is the below what we mean by 'old'?

In QuickRef, I noticed in the source that this is what we call button.

The closest we have to a button in our Design Components is the Button and it comes with a small variant and an icon variant.

So maybe we can do something like this:

but with a info icon instead of a magnifying glass icon?

That would not fix the problem identified by @nitedog , as it does not make it look more like a link, but maybe this is a good compromise?

[iadawn]

I am assuming that is what you meant by 'old' when you first referenced it. I don't know that the icon button fits the bill. That seems to be repurposing a component in a different way. If you were looking at the styling included in ART for the Implementing links as a new design element it is more about developing that pattern appropriately.

It may be that there it has two uses; one which requires the icon as it isn't as clear cut that it is a a link.

[hidde]

@iadawn I think it makes sense to, as you say, develop it as a new design element (in fact, that's what we've done). There are design elements for this same purpose in the QuickRef tool, but that uses our “old” design, as opposed to our “2019 WAI website redesign”, which my current implementation tries to follow, because if our visual design is the same across all of our websites/webapps, users will feel at home more easily.

The current implementation is to put in a tag-like design. Some rationale:

• tags signify a thing belongs to a thing, in this case the implementing page belongs to this success criterion
• an underline, I feel, would make it more prominent / attention-seeking, so I opted for no underline
• this design matches what we do in the Authoring Tools List, and could do in various other places, too, to hopefully make it easier for users to find sources related to the thing they're looking at.
• as a user, I would try and click on it or tab to it, as it would make sense to me that it is a link. That may not be the case for others.

I still support current implementation, but am more than happy to look at alternatives. What do people think we should do instead?

cc @iadawn, @nitedog, @slhenry

[hidde]

Example with link underlined:

I would recommend not to go for that, because I feel it less clearly identifies “related source” and looks to similar to everything else. If anyone does feel this is better, let's discuss it in the group to see where consensus lies.

[nitedog]

This works better for me than the initial design. However, I think it may be good to indicate that the link takes the user away from the context of the tool, like maybe an arrow. It would also be nice to have some more visual design but I don't feel strongly about that at all.

[hidde]

Hidde discussed with Shawn, will update design to be more like “Understanding” links in QuickRef, with icon, white background and subtle border color, but have the rounded corners of buttons the new WAI website.

[shawna-slh]

Looking at the tool more, I think it would it make sense to have the same treatment for the Principle links, e.g., what is now: "More details: A.1 Authoring tool user interfaces follow applicable accessibility guidelines" -- yes?

[hidde]

Agreed!

I've reused our Small Secondary Button, and made it lighter (1px border instead of 2px and normal font weight instead of bold).

Preview: https://atag-report-tool-ljoh5rlgb.now.sh/principle/2

[hidde]

This is what that looks like:

It made me wonder if it would be better to list just the principle there, like “A.1” rather than the full name:

[shawna-slh]

It made me wonder if it would be better to list just the principle there, like “A.1” rather than the full name:

I think we want the full name because we want the actual Principle text there to provide more description.

[shawna-slh]

From Hidde & Shawn discussion: quieter gray border and blackish text -- more like old QuickRef yet with colors from the new design palette

[hidde]

This is now added!

[shawna-slh]

hey Hidde. I'm getting a colored border and too light gray text.
Maybe it's a caching issue?

QuickRef link style is:
(text) color: #333
border-color: #ccc

Using new site colors, I think would be:
(text) color: #1d1d1d (or possibly #3b3b3b)
border-color: #ddd

+1 to smaller font like you have

(Eric wanted me to re-open issues when I had additional comments. Let me know if that's not what you want.)

[hidde]

Hi Shawn, thanks for the feedback! I missed setting a color on the border, it was green-ish. Have updated it to be #3b3b3b for the text #ddd for the border (which is called “line grey” in our CSS so that seems a perfect fit). Have added the hover that is in quickref, with a gray background, let me know if you're not a fan and I'll remove it.

I have also improved alignment with the Level indication:

• They had a slightly different font size ( .8125rem which computed to 13.33px, vs smaller which computed to 13px). Have updated the level indication to match, because the button size is set in WAI CSS, so they're both 13.333px.
• I aligned them vertically

I think this is better, feel free to reopen again!

[shawna-slh]

Perfect! Great! that also addresses #139 (feel free to close that if you don't see other tweaks)