Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More accessible design for Organisation switcher #284

Open
gregtyler opened this issue Dec 15, 2021 · 0 comments
Open

More accessible design for Organisation switcher #284

gregtyler opened this issue Dec 15, 2021 · 0 comments

Comments

@gregtyler
Copy link
Contributor

Summary

The Organisation switcher currently floats the link to the right, which can be an issue for accessibility: the link can be hard to see and click, and isn't clearly associated with the organisation name.

A more appropriate design (and one already adopted in some services) would be to button the link alongside the text:
image

Since this may be a visually-breaking-change for some services, we should make this new design opt-in as a minor release, and then change the default behaviour in a future release. Therefore I propose adding a new option to the Nunjucks macro: link.position can be "inline" or "right" (currently defaulting to "right").

The "inline" option could use standard GOV.UK Design System classes rather than needing bespoke MOJ Frontend classes. For example:

<div class="moj-organisation-nav" aria-label="Organisation switcher">
  <strong class="govuk-body govuk-!-font-weight-bold">Bristol (HMP)</strong>
  <a href="#" class="govuk-link">Change your location</a>
</div>

Describe alternatives you've considered

Due to the simplicity of this component, I'm not sure there are any other suitable options that don't amount to a full redesign.

Additional context

Raised in the accessibility audit and later via Slack.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant