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

Tabs #100

Open
govuk-design-system opened this Issue Jan 15, 2018 · 41 comments

Comments

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Apr 16, 2018

@adamsilver and @trevorsaint have very kindly agreed to develop this component, using their work on tabs in the Reform pattern library. The Sass and JavaScript for their tab component is available on GitHub.

@ignaciaorellana ignaciaorellana moved this from Agreed to In progress in GOV.UK Design System Community Backlog Apr 18, 2018

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented May 2, 2018

@adamsilver and @trevorsaint have reported that the original version of the component is being used successfully in the following services (amongst others):

Criminal Justice Services (CPP)

  • Prosecutors
  • Legal Advisers
  • Court Administrators
  • Online reporting (SJP performance data)

Judiciary UI internal systems (HMCTS)

  • Divorce
  • Civil Money Claims
  • Financial Remedy
  • Continuous Online Resolution (COR)
  • Court Case Data (CCD)

Rural Payments (Defra)

@penx penx referenced this issue May 2, 2018

Open

Get to version 1 #61

5 of 11 tasks complete
@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented May 4, 2018

Tabs component criteria

Following 2 discussions with @adamsilver and @trevorsaint we've agreed that, in addition to meeting the Design System criteria, this component will meet the following additional criteria:

Coding criteria

The tabs component must:

Design criteria

The tabs component must:

  • be based on existing elements from the Design System
  • be operable with a keyboard
  • be usable on a small-screened device
  • degrade gracefully if JavaScript is not available
  • handle cases where tabs run across multiple lines
  • handle cases where the user changes their default colours
  • let users bookmark the selected tab
  • not have a visited state
  • appear in the browser history
  • have an optional bordered variant

Guidance criteria

The tabs component guidance must:

Research criteria

The component must have been tested with a representative range of users in a prototype or live service.

Accessibility criteria

The tabs component guidance must:

  • be focusable with a keyboard
  • indicate when a tab has keyboard focus
  • inform the user that it is a tab
  • inform the user if it is selected
  • inform the user about the label of the tab
  • inform the user about the total number of tabs
  • inform the user about the number of the current tab out of the total number tabs
  • allow to switch between tabs using arrow keys
@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented May 8, 2018

I'm wondering if it's helpful to split this work into smaller chunks, something like:

  1. Visual design, HTML, guidance. The tabs are links to page where that tab is selected.
  2. JavaScript, ARIA (if needed), history API

I think 1. might be significantly easier to do, and easier to get through the process and deliver value quickly. We could then enhance it to 2.

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented May 8, 2018

@trevorsaint and @adamsilver - what do you think? Would that help, or do you think that both chunks will be ready in good time?

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented May 8, 2018

We've already tackled all of those things now and we're close to finishing V1 (subject to crit etc).

@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented May 8, 2018

We just had a quick discussion about this on the team - to try and summarise (these are all just thoughts and not a steer in any particular direction):

It might be tricky to convey when teams should use version 1 (full page navigation, tabs link to content on separate pages) and version 2 (all content on one page, enhanced with javascript to switch between them).

Version 1 seems to be in wide use around government.

Version 1 is useful when the pages are quite large, and combining them in version 2 would mean users download a lot of data they don't necessarily need.

We need to be careful to only use ARIA on version 2, it would be incorrect on version 1.

@timpaul timpaul changed the title Tabs Tabbed panel May 9, 2018

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented May 9, 2018

Following a productive discussion with @adamsilver and @trevorsaint we've agreed the following:

  • we'll rename this component from 'tabs' to 'tabbed panel'
  • the default style will now be bordered
  • this component is now specifically for bordered tabbed panels
  • we'll create a new component called 'tabbed navigation'
  • this is for the other use case, the non-JS tabs
  • for now, the visual style of both components will be the same (without the border for tabbed navigation)
  • we may iterate the style of tabbed navigation if we find it's confusing to users
@joelanman

This comment has been minimized.

@accessiblewebuk

This comment has been minimized.

Copy link
Member

accessiblewebuk commented May 10, 2018

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented May 11, 2018

DWP using JS tabbed interfaces with research showing the need and proof of accessibility testing
https://github.com/dwp/design-examples/tree/master/tabs

@adamsilver

This comment has been minimized.

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented May 11, 2018

These DWP internal services use tabbed panels with JS:

  • Manage Bereavement Support Payment
  • Access to Work Integrated System
@abbott567

This comment has been minimized.

Copy link

abbott567 commented May 11, 2018

Probably worth mentioning on here that our stance on tabs at DWP was not to have both tabbed navigation and javascript tabs with the same styling. The reason being that if they look the same, the expected behaviour is the same, but it's not.

We opted to keep our tabs styling for the progressive enhanced version, and for our tabbed navigation, we are going to switch to a component with different styling. This way you don't see two things that look identical and have an inconsistent experience with how they work.

Also, the user need for having the JS tabs over the tabbed nav fell out of research we did on Bereavement, where our agents were getting disorientated. The tabs were a little way down the page, and when we used the non-js version it would pop them back to the top and they would lose their place.

We also tried doing it with anchor links to the ID's, but it never quite puts them back to the same place. It's still jarring, and it was creating unnecessary cognitive load to try and orientate themselves again.

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented May 14, 2018

Some of the Accordion guidance, I think, is relevant to Tabs.

https://paper.dropbox.com/doc/Accordions-4lnTjyNru2mN1XXjA1Xf3

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented May 17, 2018

Judicial case manager screenshots

With a cheeky example of sub nav too.

Big screens

image

Small screens

jui-prototype herokuapp com_app_case_bv18d00150_parties nexus 5x

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented May 17, 2018

Court Case Data Screenshots

Big screen

image

Small screen

image

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented May 17, 2018

Bank holiday screenshots

Big screen

image

Small screen

image

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented May 17, 2018

Find a charity uses tabbed panels

http://beta.charitycommission.gov.uk/charity-details/?regid=219830&subid=0

Big screens

image

Small screens (broken)

image

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented May 17, 2018

Find and compare schools screenshots

Big screens

image

Small screens (broken)

image

@timpaul timpaul removed the candidate label May 18, 2018

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Jun 8, 2018

Working group review session

This proposal was reviewed by a panel of designers from GDS, HMRC, DWP, EA and Home Office on the 24 of May 2018.

The panel agreed that the pattern should be published in the GOV.UK Design System.

The panel also made the following recommendations:

Before publication

  • rename the component to 'tabs'
  • the first paragraph should be more closely defined, to make the use case really clear
  • the first paragraph should avoid overly negative words like 'risk'
  • make sure that the 'When to use' content has sufficient prominence
  • avoid nested bullets if possible as they’re not as accessible
  • add information about maximum number of tabs to use
  • add more context to the example tab
  • make sure the example matches the guidance (for example, the tab labels)
  • double-check that the light grey has sufficient contrast

After publication

  • review the style of closed tabs - are they obvious enough?
@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented Jun 8, 2018

Also, for after publication to have a variant where the panel is borderless (on the left, right and bottom).

@steven-borthwick

This comment has been minimized.

Copy link

steven-borthwick commented Jun 11, 2018

We tend to use tabs solely for staff systems, agents at DWP have IE11. The grey background colour (#f8f8f8) for the inactive tabs doesn't display at all, whereas the darker grey does (#dee0e2) does display. See the screenshot from a Windows machine using IE11.
tab_component

@timpaul timpaul changed the title Tabbed panel Tabs Jun 13, 2018

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Jun 18, 2018

The guidance and examples have now been updated, following the feedback from the working group. Thanks all for your help.

@jbuller

This comment has been minimized.

Copy link

jbuller commented Jul 25, 2018

How much as this been tested with low vision users?
I'm suprised the difference beteween the selected and unselected tabs is so subtle, the matching title aside admittedly, but seeing both could be a challenge at high magnification

@abbott567

This comment has been minimized.

Copy link

abbott567 commented Jul 25, 2018

@jbuller we had the same concern. @steven-borthwick pointed it out a month ago that it also doesn’t show up on government machines so all the tabs are white. Must be because of the compression as the desktop is technically streamed. The tab pattern we developed in DWP had a darker grey background. It would be good if somebody from the design system team could update on this.

@ignaciaorellana

This comment has been minimized.

Copy link
Contributor

ignaciaorellana commented Jul 26, 2018

Hi @abbott567 and @jbuller , thanks for your question and feedback. This component is currently marked as experimental because we know it needs more research and testing. We have used the research section in the component's guidance to describe known gaps, and we will add this issue as a point to further research. We will talk to the original contributors to see if they can help, and if not, we'll ask the community to help us do proper user research. If you have any research that you're able to contribute, it would be great if you could share some details here. @alex-ju has some comments about this, could you add them here? Many thanks :)

@alex-ju

This comment has been minimized.

Copy link
Member

alex-ju commented Jul 26, 2018

Indeed the light grey on non-active tabs is only slightly different than the white on selected tabs, but the idea was to differentiate using the border and the active state (yellow border) when interacting with it.
screen shot 2018-07-26 at 09 44 38

Our tests with IE11 (screen shot below) show the same slight difference.
screen shot 2018-07-26 at 10 04 47

Bottom line is that potential ways to improve the component will be to try a darker shade of grey or inactive tabs and/or potentially a thicker border.

@abbott567

This comment has been minimized.

Copy link

abbott567 commented Jul 28, 2018

@alex-ju I think the concern is that a lot of people won't realise these are clickable. The background only has a contrast ratio of 1.06:1 which is almost the same as the white. It maybe wouldn't be as much of an issue if the blue link style was used or the darker grey like in Steves example. But at the moment the other tabs look like body text to anyone with poor vision or poor equipment, rather than buttons or links.

@abbott567 abbott567 referenced this issue Aug 7, 2018

Open

Colour #38

@fofr

This comment has been minimized.

Copy link

fofr commented Aug 8, 2018

Before switching to the design system we used a similar tab design but where the tab label was styled as a link, which tested well with our admin users:

screen shot 2018-08-08 at 11 13 42

If the tab text is styled as a link does this resolve some of the concerns around the grey?

@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented Aug 8, 2018

@fofr Not that this is a blocking comment to your suggestion, but just for context: I think originally it was to convey that these are not normally functioning links (they don't take you to another place on the page, or to another page) but instead act as tabs. I think this is probably up for discussion though. The link style certainly has clear affordance.

@abbott567

This comment has been minimized.

Copy link

abbott567 commented Aug 18, 2018

Just realised there is no hover state on any of the tabs. Will this not compound the problem with it looking like body text? Also, is it accessible to not have a hover state at all?

aug-18-2018 09-25-16

@adamsilver

This comment has been minimized.

Copy link
Collaborator

adamsilver commented Aug 18, 2018

Given the thread so far, I suggest the next, simplest iteration would be:

  • make the grey background darker to meet accessibility guidelines
  • add a hover state (beyond just the cursor change)

image

Then, if that's not enough, we could change the colour:

image

Then, if that's not enough, we could look at:

  • borders
  • underlines (which I'm not keen on as per Joe's explanation above)
@ignaciaorellana

This comment has been minimized.

Copy link
Contributor

ignaciaorellana commented Sep 4, 2018

Hi,
I hope this is the right place - I had promised to include the BBC tabs in out next user testing. Had a test with a relatively unskilled long-time blind (or nearly blind) iPhone user which I have uploaded here on Youtube:
https://www.youtube.com/watch?v=6lVLHGOsylU
I hope you can work out what happens without me translating the German captions...

This was original posted by @detlevhfischer in alphagov/govuk-design-system#526

@36degrees

This comment has been minimized.

Copy link

36degrees commented Sep 5, 2018

For context, I believe @detlevhfischer's comment is related to this issue – alphagov/govuk_frontend_toolkit#464 (comment)

Thanks!

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented Sep 24, 2018

Here's a version of the same video with English language narration: https://accessuse.eu/en/tabbed-interfaces.html#govuk

@detlevhfischer

This comment has been minimized.

Copy link

detlevhfischer commented Sep 24, 2018

@timpaul The video on https://accessuse.eu/en/tabbed-interfaces.html#govuk is actually not the same as the one I uploaded to youtube. It is an earlier stage (the user had not yet been told that he has to activate the tabs to open the respective panel, and develops his own strange mental model --- by counting). The video on YouTube https://www.youtube.com/watch?v=6lVLHGOsylU shows another sequence with the same user that followed after that.

@amyhupe

This comment has been minimized.

Copy link
Contributor

amyhupe commented Oct 15, 2018

Dropbox Paper audit

On 15 October 2018 the Design System team reviewed a Dropbox Paper document discussing the Tabs component.

The aim was to reduce the number of places containing guidance and code by:

  • migrating relevant, useful content into the Design System itself
  • recording important research findings in the community backlog
  • removing the original Dropbox Paper page

Below is a record of the outcomes of that review.

If you need to, you can see the original Dropbox Paper content in the internet archive.

Review outcomes

Updates to the Design System

The Design System team will carry out the following updates to ensure that relevant, useful content from the Dropbox Paper file is added to the Design System.

  • Add guidance to the Design System saying how the tabs component works when JavaScript is not available.

This was referenced Nov 19, 2018

@timpaul timpaul referenced this issue Jan 22, 2019

Open

Make sure that the Design System meets WCAG 2.1 #677

1 of 23 tasks complete
@abbott567

This comment has been minimized.

Copy link

abbott567 commented Feb 6, 2019

Hi, does anybody know what's happening about the colour contrast on the tabs component? It was initially called out in June of last year, and it's still causing us issues 8 months later. We're still maintaining a DWP version of the tabs component with a WCAG-AA compliant contrast just so it shows up on Government equipment. It would be good to get some sort of indicator on the progress of this as it continues to be a pain to manage. Thanks.

@dashouse

This comment has been minimized.

Copy link

dashouse commented Feb 6, 2019

@abbott567 We're doing a large piece of work at the moment to meet WCAG 2.1 AA (so our users can by 23rd September 2019) - You can see what we're looking at here alphagov/govuk-design-system#677

There's lots wrapped up in this from a colour contrast / broader colour palette perspective frontend wide but tabs will be a part of it.

@abbott567

This comment has been minimized.

Copy link

abbott567 commented Feb 6, 2019

Cool, thanks @dashouse 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment