search

sarapis / orservices

ORServices is an open source, smartphone-friendly directory application that enables you to collect, verify, organize and share information about social services in your community with your stakeholders, beneficiaries, partner organizations and more.
https://sarapis.org/human-services/orservices/
22 stars 16 forks source link

Improve link accessibility #72

Open HaSistrunk opened 3 years ago

HaSistrunk commented 3 years ago

Is your feature request related to a problem? Please describe.

Some links use only text color to indicate that they are links. This is a common thing in design, but for users with low vision or who cannot perceive the color difference, color alone is not enough to allow them to recognize a link. They need a "non-color designator".

When a link has other contextual clues or styles that help users know it's a link, that's fine. But links surrounded by non-link text can be tough to spot without an underline or another visual queue.

Describe the solution you'd like

Review site text to identify links that are indicated by color alone and add underlines.

An approach that has been useful for me in the past: Set styles for a element in css globally to text-decoration: underline (or don't override the browser defaults to remove underlines), and then review the site for exceptions. Target those exceptions with text-decoration: none, but leave links underlined by default.

Links will have :focus styles as part of issue #56, but also consider improving usability and accessibility with :hover styles for links as well. Hover style ideas that are common: change of color, underline is removed, or text is highlighted.

Additional context

WebAIM summarizes the accessibility of link appearance concisely.

HaSistrunk commented 1 year ago

It looks like this issue has been addressed. I'm seeing links underlined by default and link hover styles that remove the underline, which all works well.