Skip to content

WCAG: Focus borders on links #11404

@ahukkanen

Description

@ahukkanen

Describe the bug

Not all links have focus borders and the focus border colors do not pass the accessibility contrast requirements (3:1 contrast ratio).

WCAG 2.1: 1.4.3, 2.4.7

To Reproduce

  1. Go to https://alpha.try.decidim.org/
  2. Navigate any page with tab navigation
  3. See that every link has a focus border with a correct contrast ratio 3:1
  4. See that the focus border is visible with all the links

E.g. navigating this page:
https://alpha.try.decidim.org/processes_groups/3

The focus border is not visible when a proposal from the proposals listing is selected.

Same thing also on the proposals page here:
https://alpha.try.decidim.org/processes/slinkydog/f/41/

Expected behavior

The focus border should be visible on all links.

The focus border should use the highlight color that can be configured from the admin panel.

The focus border should have a contrast ratio of 3:1, but this depends on the "highlight" configuration which is up to the organization admin to configure (acceptable tradeoff).

Screenshots

In the screenshot, the first proposal is currently actively selected and does not display the focus border:

Proposals focus border

Stacktrace

No response

Extra data

  • Device: computer
  • Device OS: Ubuntu 22.04
  • Browser: Chrome 115.0.5790.98
  • Decidim Version: 0.28.0.dev
  • Decidim installation: alpha.try.decidim.org

Additional context

No response

Metadata

Metadata

Assignees

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions