Page MenuHomePhabricator

(Don't) Add caption to mentee overview table
Closed, ResolvedPublicBUG REPORT

Description

This issue has been raised by SonarQube and in a gerrit review comment, see report but it's also present in the current Mentor dashboard in production

List of steps to reproduce (step by step, including full links if applicable):

What happens?:
An accessibility error is yield since <caption> on <table>Special elements is essential for screen readers

What should have happened instead?:
<table> element should include a <caption> with proper table description

Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc.:

Event Timeline

kostajh added subscribers: Urbanecm_WMF, kostajh.

This seems pretty simple to fix. @Urbanecm_WMF is it something you could work on?

Sure thing. I'm not sure what the <caption> should contain though. Just an alt text for the dashboard? Or something more reasonable? What do you think, @Sgs @kostajh ?

Sure thing. I'm not sure what the <caption> should contain though. Just an alt text for the dashboard? Or something more reasonable? What do you think, @Sgs @kostajh ?

From what I can read in MDN docs page I think this caption text needs to be expressive of the table content. Something close to what we show for the "Who's in your table" text content. ie: Mentees whose account was created within the past two weeks or who have edited in the last six months, and have the newcomer homepage enabled. Data is updated every three hours.

@Urbanecm_WMF I have tested the <caption> element in the mentee overview table and this is how it would look in the Vue version:

Screenshot 2022-06-28 at 18.42.40.png (2×2 px, 525 KB)

I'm not sure how well this plays with the current info box that we provide. We would probably want to style this in some way. cc @RHo

@Urbanecm_WMF I have tested the <caption> element in the mentee overview table and this is how it would look in the Vue version:

Screenshot 2022-06-28 at 18.42.40.png (2×2 px, 525 KB)

I'm not sure how well this plays with the current info box that we provide. We would probably want to style this in some way. cc @RHo

Hi @Sgs - ideally I would expect to have this caption element visible on the table like this, as that is the intention of the info icon shows the existing info text as supplementary instead.

Can we use the method for adding a summary attribute instead as Approach 4 in the W3C guidelines suggests where it is a non-visible element?
https://www.w3.org/WAI/tutorials/tables/caption-summary/

If not, I would recommend instead making the caption text much much more succinct title, something like "Your mentees (data updated every 3hrs)", and style so that it is Text-align left with Base20 colour text.

Hi @Sgs - ideally I would expect to have this caption element visible on the table like this, as that is the intention of the info icon shows the existing info text as supplementary instead.

Alright

Can we use the method for adding a summary attribute instead as Approach 4 in the W3C guidelines suggests where it is a non-visible element?
https://www.w3.org/WAI/tutorials/tables/caption-summary/

If not, I would recommend instead making the caption text much much more succinct title, something like "Your mentees (data updated every 3hrs)", and style so that it is Text-align left with Base20 colour text.

I don't think using the summary attribute is a good option for two reasons:

  • In the w3 docs there's a note stating: The summary attribute is deprecated in HTML5.
  • SonarQube will continue to argue that there's no caption for the table we are creating

This is how the caption looks using text-align left and color Base20.

Screenshot 2022-06-29 at 09.56.10.png (1×1 px, 233 KB)

Hi @Sgs - ideally I would expect to have this caption element visible on the table like this, as that is the intention of the info icon shows the existing info text as supplementary instead.

Alright

Can we use the method for adding a summary attribute instead as Approach 4 in the W3C guidelines suggests where it is a non-visible element?
https://www.w3.org/WAI/tutorials/tables/caption-summary/

If not, I would recommend instead making the caption text much much more succinct title, something like "Your mentees (data updated every 3hrs)", and style so that it is Text-align left with Base20 colour text.

I don't think using the summary attribute is a good option for two reasons:

  • In the w3 docs there's a note stating: The summary attribute is deprecated in HTML5.
  • SonarQube will continue to argue that there's no caption for the table we are creating

Yes, that's what I kinda thought when reading it, but figured it was worth asking!

This is how the caption looks using text-align left and color Base20.

Screenshot 2022-06-29 at 09.56.10.png (1×1 px, 233 KB)

Cool, thanks @Sgs - one question is whether we can move the caption to below the table? And could we also add 8px spacing between the table and caption?

Cool, thanks @Sgs - one question is whether we can move the caption to below the table? And could we also add 8px spacing between the table and caption?

The caption is showing at the top of the table as a default browser behavior (note that in the HTML document the caption is inside the table element). I guess we can do CSS magic to place it at the bottom but I wonder if that defeats the purpose stated in the w3 page Captions help users to find a table and understand what it’s about and decide if they want to read it.

As per the spacing there's no issue on adding it.

I am not sure if the MenteeOverview component needs a caption. The examples given in https://www.w3.org/WAI/tutorials/tables/caption-summary/ are aimed towards tables that appear within the text of an article, but this is a UI component that happens to use <table> element for its contents.

Cool, thanks @Sgs - one question is whether we can move the caption to below the table? And could we also add 8px spacing between the table and caption?

The caption is showing at the top of the table as a default browser behavior (note that in the HTML document the caption is inside the table element). I guess we can do CSS magic to place it at the bottom but I wonder if that defeats the purpose stated in the w3 page Captions help users to find a table and understand what it’s about and decide if they want to read it.

Right, but if we just style using CSS wouldn't the screenreader still read it first? It really would be preferable to place at the bottom, also if @kostajh's comment that perhaps it is not necessarily needed is true.

As per the spacing there's no issue on adding it.

Great, can it be the spacing-small 0.5em size on Codex?

Change 814743 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Mentor dashboard: remove mentee table caption

https://gerrit.wikimedia.org/r/814743

I am not sure if the MenteeOverview component needs a caption. The examples given in https://www.w3.org/WAI/tutorials/tables/caption-summary/ are aimed towards tables that appear within the text of an article, but this is a UI component that happens to use <table> element for its contents.

I agree, done in gerrit 814743

Change 814743 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Mentor dashboard: remove mentee table caption

https://gerrit.wikimedia.org/r/814743

Sgs renamed this task from Add caption to mentee overview table to (Don't) Add caption to mentee overview table.Jul 18 2022, 6:08 PM
Sgs closed this task as Resolved.
Sgs claimed this task.