tylerchilds / cutestrap

A strong, independent CSS Framework. Only 2.7KB minified & gzipped.
https://www.cutestrap.com
GNU General Public License v3.0
1.57k stars 79 forks source link

Text link not accessible #25

Closed weboverhauls closed 5 years ago

weboverhauls commented 8 years ago

The text link is not fully accessible since it relies on color alone to denote that it's a link.

Suggestion 1: return the underline. (highly recommended)

Suggestion 2: provide more visual affordance that the standalone text is a link such as adding an icon.

WCAG references: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color http://www.w3.org/TR/WCAG20-TECHS/F73.html

PS: Since this is a link, strange that it's listed under Buttons and the class names say button.

image

thisconnect commented 8 years ago

Suggestion 1: return the underline. (highly recommended)

I agree especially because all other links in cutestrap have the underlines

Suggestion 2: provide more visual affordance that the standalone text is a link such as adding an icon.

One should be free to choose an icon set, so I hope cutestrap does NOT include icons

Since this is a link, strange that it's listed under Buttons and the class names say button.

Other frameworks use button style link as well.

tylerchilds commented 8 years ago

Definitely will add the underline, that was just an oversight of mine when developing.

Won't be adding icons, but I might build a light weight icon set at some point in the future to be used in conjunction with cutestrap.

patrickhlauke commented 8 years ago

Since this is a link, strange that it's listed under Buttons and the class names say button.

I'd suggest that, to make it clearer, the example should add the btn--link class to a <button>, and the <a> should get another class like btn instead...

patrickhlauke commented 8 years ago

...something like

<button>Default</button>
<button class="btn--secondary">Secondary</button>
<button class="btn--link">Link</button>
<a class="btn" href="#">Link styled as button</a>

cute-btns

tylerchilds commented 5 years ago

Resolved in version 2, also everything will have a focus outline by default.