Sorry but this is not the correct use of aria-labelledby

See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute for the correct usaage of aria-labelledby

Basically you have two instances of aria-labelledby one on the link and one on the date
aria-labelledby

The correct way to do this (and I am not sure we need to) is to set an id on the link and then refer to that link using aria-labelledby on the date

(updated title and tags)

What is a problem?

1. If you use the keyboard and have no control over the mouse, you will never see the contents of a title attribute.
2. If you are using a screen reader you probably will not hear the title attribute because some readers do not support it and in others, you need to change the factory settings to read the title attribute.
3. If you are using a tablet or touchscreen phone, you will never see the title attribute

See: https://www.mediacurrent.com/blog/dont-rely-title-attribute-accessibility/

What is the right solution?
Do not use the title attribute. Do not pass on important information in the title attribute.
What can be done in this case?
We have two title attributes:

• First in the link to the account of the logged in user (User ID). My suggestion: remove this information is unnecessary here.
• The second one in the badge contains the label "Last activity". Without this label, the date in the badge is incomprehensible to keyboard users and screen reader users.

To solve the problem for users of screen readers, you can place text that is visible only to screen readers (sr-only).
To solve a problem for keyboard users, you simply need to add some visible information.
In addition: Do we need to use a badge element from a bootstrap?

BEFORE we can even really consider these changes you must realise that this approach is used in a lot more places than just this module. For a start every module on the admin control panel is created the same way.

Yes. The same problem we have in the modules: Popular Articles, Recently Added Articles.
However, the 'title' problem is in many, many other places, e.g. in links on all list of elements ('Edit ....', etc.)

Personally I am not convinced we have a problem especially as we are not "passing important information"

I am going to check with my drupal a11y connections for their views.

The aria-labelledby strings are incorrect and do not match that of the ID

@C-Lodder you are right and I will change the code as soon as I know what is needed and how the label should be built.

So please can I get your meaning for the following? @brianteeman @C-Lodder @zwiastunsw ?

The "logout" button must show which user is concerned. I can add the user's ID to the sr-only info.
or:
The discussion whether a title is needed or not could be solved, if we simply write Text::_('JLOGOUT') on the button instead of the icon.
Then no title is needed. There is plenty of place for the text on the button, and it is informative too.
The User's id could be a aria-label .. here ?

The link to the User has the user's ID in the title. This information is important.
We could add the information to the username: i.e. johndoe (id: 56) and we do not need any title or tooltip.

The date must have the information that it is the latest visit date. It can be added as sr-only information, togehter with the ID of the user. The badge is decoration. It should be css only.

Does the date really need to have the information that it is the last visit date. We dont have similar text anywhere else when we display a date eg articles list

I dont see any reason for the user id to be displayed in this module or that it is important information. Perhaps I missed some reason that it is impoprtant?

The badge already is css - i dont see your point

Are you sure about the title not being available to screenreaders. NVDA seems to not have an issue in my tests

The log out button already has sr-only text

If information is relevant, it must be accessible to all. The 'title' attribute is certainly not accessible to people who use only the keyboard (they cannot use the mouse).
If the information is not relevant, remove it, because the redundant noise of information makes it difficult to understand the content. But it's more a question of usability than accessibility (although... I don't know if it is certain).

The title attribute is not be accessible to keyboard user however they can see that it is a link etc and of course all important information must be available to everyone

The real question here in this specific case is "are the title information actually of any use at all?"

I am not convinced they are.

There is no value to knowing the userid

There is no reason for a sighted user to know the date of the last activity as it is obvious from the context. For a non sighted user there is sr-only text already available

There is no reason for a sighted user to know that the red x button is to log someone out as it is obvious. For a non sighted user there is sr-only text already available.

As to the final point that I believe this PR tried to address of connecting the date to the username I am not convinced that is needed either for a screenreader as the elements are all inside the same list and a screenreader would announce the entire item as "item:superuser - link last activity 2017-01-10" it doesnt need to be "item:superuser - link last activity of superuser 2017-01-10". or am i wrong on that?

I agree that the user ID is not necessary. It has been added by someone but I think we can remove all redundant information if it is not a b/c break.
Reducing redundant information as @zwiastunsw mentioned is a good point.

Speaking just on this specific case there would be no b/c break in removing the user id information

Unfortunately I cannot test with screenreader, but am ready for more changes ;)

@brianteeman The log out button has still a title.
I would like to write "Logout" on the button. As it is now, the icon could as well mean "delete user", so I have left the title. We know that the button means "logout" but novice users maybe don't.

in the context of a module called logged in users i dont think it is unreasonable to assume it means logout. it wouldnt make sense to delete a user in that context

I have tested this item ✅ successfully on 93f889d

I have tested this item ? unsuccessfully on 93f889d

1. Screen reader (NVDA) does not announce information: Logo and Last activity because the code for the screen reader is inside a tag with aria-hidden="true" attribute
2. Screen reader announce part of URL: "index.php?option=com_login&task=logout"
3. Removing the "title" attribute from the button and from the badge causes that the meanings of the button and the date have to be guessed.
4. Should the "Log out" link not be a button? The essence is the action (logging out), not the redirection to another page.

1. sorry that was my fault
2. isnt that because of the removal of the "useless" title?
3. I disagree

@zwiastunsw could you repeat the test? I have moved the sr-only part.

About the Link - what can we do there? It is a link to the users logout.

The code is now correct. However, I have a problem with a successful test.
I did not propose to delete the attributes of the title. I just wrote: Do not use them unless they contain relevant information. The Logout without label button is an error. It must be labelled. For everyone, not just blind people.
My suggestions:

1. Change the link to a button (if possible) - semantically it is button, not link.
2. Use the label "Logout" on the button
3. Add a visible label before the date: Last login (not "Last activity" because it is not true)
4. Delete text that is visible only to the screen reader
   Without combining everything will be accessible!

I do not agree with point 3.

Using text on the button seems a good solution - accessible for all.

"I do not agree...": that is not an argument. He has nothing to discuss here.

I was saving typing out again the reason.

There is no reason for a sighted user to know the date of the last activity as it is obvious from the context. For a non sighted user there is sr-only text already available

First: Don't Make Me Think (Steve Krug)
Second: There is no reason to believe that one user will understand from the context and another will not, because he is blind.
Third: There is no reason not to write everything that this date means. There is plenty of space here.

Just because there is space doesn't mean you have to fill it ;)

The more text you write the less people read.

If you apply your logic to this date then we have to add text everywhere in Joomla for almost every single field

If this date does not have any meaning, just throw it away (in my opinion it is not necessary here). If it is important, write down what it means. In other places it is written what dates mean. And if it is not written, then - you are right - it should be written.

PS I did not write that an explanation should be given, because there is a place. Don't assign your thoughts to me.

I did not meant that the date has no meaning
I meant that writing some words next to the date was unnucessary

Why has anyone previously added a title attribute to this date? To explain what it means. In Joomla 1.0 - 1.5 there was a table and there was a column header. Consent, the context says something about that date. But look at a different module: Popular articles. There is also a date. Is this the date of creation? Is this the date of publication? Is this the date of modification?
I would like to say that the lack of a solution is not a solution. A description of this date is important information.

Let me resume:

• The button (log out) is accesible by using a text "log out" on it
• The button is still a link. We can open another issue for that.
• Superfluous title on the User's name is removed.

Now the discussion is not a11y but UX:
Is it necessary to add the Text "Latest login" to the date.?

A pragmatic approach would be to change the text in the headline "Logged-in users. (Date of latest login)". - or "Date of last login?".
I think that this would be sufficient. It has no impact on the design and everyone hopefully understands it - this can be done by a language override or in ht language file of the module.

I agree - I even tried to change that once in the past

The more I think about this the more I think that using a list for this is not the correct solution. This is two dimensional data so it really should be a table.

With the correct table headers and correctly setting the scope attribute for the columns and rows we will be able to resolve all the identified accessibilty issues.

@brianteeman : I agree :)

I will make a proof of concept soon

proof of concept for mod-popular #20962

I think that this PR can be closed - solved #20962

@chmst should i close this PR?

@franz-wohlkoenig yes, as we have a solution.

Set to "closed" on behalf of @franz-wohlkoenig by The JTracker Application at issues.joomla.org/joomla-cms/20666

closed as stated above.