TIP: Custom user online indicator that handles any language

[Gumboots]

This is something I am messing with for my own use, but it may be useful to others.

The default Prosilver "user online" indicator suffers from two issues:

1. It's not at all accessible. Since it is only a background image it is invisible to screen readers, and there is no other labelling of online status anywhere.
2. It requires a different image (and a different folder and a different CSS file) for every language you want to support. This is a nuisance if you don't like making new images and writing new CSS.

So, obvious thing to do is to use a bit of custom markup that can call {L_ONLINE} straight from any language's common.php. Localisation is automatically taken care of. Not your problem. It can be styled any way you like. Making it handle multi-variant styles is a piece of cake.

To mimic the default Prosilver arrangement (which, in this case, I actually quite like) requires a bit of trickery, but nothing too outrageous.

online_en.png

online_es.png

The markup is just a span (or whatever) like this:

Code: Select all

	<div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->">
		<!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --><span class="user_online">{L_ONLINE}</span><!-- ENDIF -->
		<div class="inner">

Putting it just before .inner makes the most sense, because it will be readable for unsighted users just before the username, and because it allows you to use position: relative; on children of .inner (in case you need to) without that screwing things up.

The CSS for the Prosilver look goes like this (change colours to suit the style):

Code: Select all

/*	------------------	*/
/*	Online indicator.	*/
/*	------------------	*/
.user_online {
	pointer-events: none;
	position: absolute;
	/*	Online - en	*/
	top: 5.0rem;
	left: -1.4rem;
	width: 9rem;
	/*	Conectado - es	*//*
	top: 6.4rem;
	width: 11rem;
	/*	----------	*/
	background: #fff7;
	font-size: 1.3rem;
	line-height: 1.7rem;
	text-align: center;
	text-transform: uppercase;
	border: solid #0007;
	border-width: .1rem 0;
	clip-path: polygon(1.9rem 0, calc(100% - 1.9rem) 0, 100% 100%, 0 100%);
	transform: rotate(-45deg);
	transform-origin: top left;
}

This is for a style that has root tag font-size set to 62.%%, so .1rem = 1px. The default code there allows plenty of room for the English {L_ONLINE} text. The commented code under /* Conectado - es */ is for a longer banner that allows room for the Spanish {L_ONLINE} text (which seems to be the longest out of the dozen or so languages I checked). The banners have been checked for accuracy of positioning up to 200% font size.

The font as shown in both images is Roboto. Obviously you can apply any font styling you like: uppercase, small caps, italic, whatever.

ETA: Just found out the following is incorrect. The clipping actually works off border-box by default, so you can use a normal top and bottom border. I've edited the suggested code above to do it that way, which is less hassle. It still looks the same. All you need to do is make sure the top measurements for the polygon clip path take into account line-height plus the widths of any borders.

In this case line-height = 1.7 rem, borders = 2 x .1rem, so total = 1.9rem.

Do note that because this trick relies on clip-path to create the polygon you cannot use a top and bottom border. If you want to emulate those, one easy way is to use inset box-shadow with zero blur radius. Another way would be to use a linear-gradient, like this...

[Mannix_]

Accessibility didn't improve with your changes did it?

[Gumboots]

Lol. Which ones? Not in the CSS overrides I'm running here, because they can't touch markup. However, for the stuff I am messing with for my own use: yes. I'm up to my neck in it anyway, so if I see something I think could be improved I will often just do it.

[Mannix_]

I mean it's still invisible to screen readers. Although i'm not sure if it should be since it's just a visual indicator that doesn't mean/do much. But i like that it's language friendly so it is less code, no need for extra directories and images

[ssl]

Very good, however I didn't understand in which template to place this code

Code: Select all

	<div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->">
		<!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --><span class="user_online">{L_ONLINE}</span><!-- ENDIF -->
		<div class="inner">

[Gumboots]

I mean it's still invisible to screen readers.

No, it isn't. They will be able to read it without any issues at all. It's exactly the same as any other default text string in the phpBB interface. The presentation makes no difference to that (and screen readers will ignore the presentation anyway). It's just a span, like any other, containing standard text in any supported language.

Although i'm not sure if it should be since it's just a visual indicator that doesn't mean/do much. But i like that it's language friendly so it is less code, no need for extra directories and images

The visual indicator probably does not really need translation, since most people will quickly figure out that the stripe over there means said member is online. Some styles just use a green dot or whatever*, which is fine if you can see it. Where the accessible text is useful is when you cannot see any damned thing at all. Having it read out to you in your own language is going to be better than taking a wild guess.

*ETA: And obviously you could do this as a green dot directly after the username, if you wanted that look for your style. You'd just be putting the span somewhere else, and styling it to suit, with hidden overflow to hide the text from view while still allowing screen reader access.

ETA again: Basic green dot implementation...

Code: Select all

<!-- IF not postrow.U_POST_AUTHOR -->
<strong>
	{postrow.POST_AUTHOR_FULL}
</strong>
<!-- ELSE -->
{postrow.POST_AUTHOR_FULL}<!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --><span class="user_online">{L_ONLINE}</span><!-- ENDIF -->
<!-- ENDIF -->

Code: Select all

.user_online {
	display: inline-block;
	width: 1em;
	height: 1em;
	overflow: hidden;
}
.user_online::before {
	display: block;
	height: 1em;
	background: green;
	border-radius: 50%;
}

That will automatically hide the text from view.

[Gumboots]

Very good, however I didn't understand in which template to place this code

Yes I was a bit slack with instructions there.

To cover all bases there are three templates that need it added. The code is slightly different in each one.

viewtopic_body.html

Code: Select all

	<div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->">
		<!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --><span class="user_online">{L_ONLINE}</span><!-- ENDIF -->
		<div class="inner">

ucp_pm_viewmessage.html

Code: Select all

<div id="post-{MESSAGE_ID}" class="post pm has-profile<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->">
	<!-- IF S_ONLINE --><span class="user_online">{L_ONLINE}</span><!-- ENDIF -->
	<div class="inner">

memberlist_view.html

Code: Select all

<form method="post" action="{S_PROFILE_ACTION}" id="viewprofile">
	<div class="panel<!-- IF S_ONLINE --> online<!-- ENDIF -->">
		<!-- IF S_ONLINE --><span class="user_online">{L_ONLINE}</span><!-- ENDIF -->
		<div class="inner">

[ssl]

Perfect, this could be hard implemented in phpBB

[Anișor]

Nice but 4.0.0 is on the way and the image was dropped.
Instead, a green bullet (circle) will be used.

[danieltj]

Nice but 4.0.0 is on the way and the image was dropped.
Instead, a green bullet (circle) will be used.

4.0 could launch next week or in 5 years time. There's no schedule for its release so it's not really an argument to do, or not to do something. Besides, that is also temporary in a sense that it could change at any moment whereby someone could decide that the online indicator should appear in a different.

My point I'm trying to make is, don't take what is happening currently in the master branch of phpBB as anything that is set in stone for the future of the project. Many more changes can and will happen before it's release.

[Gumboots]

Another point is that regardless of what 4.0 ends up shipping with as default, some people may want the corner banner look for a custom style on 4.0. People are like that. They get different ideas. Some 3.3 styles use a green dot already. Some don't. As long as whatever is used is accessible it doesn't really matter what people want it to look like.

Which got me thinking a bit more. One possible issue with hidden text was mentioned here: Beware smushed off-screen accessible text.

It's an 8 year old article, so I don't know if current screen readers still have this issue, but since MDN still links to it it's probably worth considering. It has implications for the way the default phpBB/FA sr-only spans are done, because they don't declare white-space: nowrap; (I have added it to my custom style).

So, with that in mind, the simplest and most bulletproof way of doing a span with text inside as a green dot would be:

Code: Select all

.user_online {
	display: inline-block;
	width: 1em;
	height: 1em;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 1em;
	background: green;
	border-radius: 50%;
}

That will cover everything. There's no need for clip-path or any other trickery. The text is already hidden and the dimensions are already limited. Similarly, the sr-only class could be done like this:

Code: Select all

.sr-only {
	position:absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
}

Which should be more bulletproof than the current way without requiring any more code.

[danieltj]

the simplest and most bulletproof way of doing a span with text inside as a green dot would be:

Code: Select all

.user_online {
	display: inline-block;
	width: 1em;
	height: 1em;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 1em;
	background: green;
	border-radius: 50%;
}

I mean… that’s not correct. The simplest way is using aria-label=“” so screen readers can read the label out aloud to the user. The way Font Awesome works is that it’s designed for screen readers to ignore the icons as they’re for presentation only. Anything that isn’t presentational should have accompanying text or aria attribute.

[Gumboots]

If the text is included in a span as a standard phpBB text string it will be readable by default. It's no different to the other postprofile strings like "Location", "Posts", etc., and I'm fairly sure you are not intending to aria-label all of those. You only need aria-label if there is no accessible text. According to MDN it's also only meant for interactive elements, which an online indicator is not.

https://developer.mozilla.org/en-US/doc ... aria-label

Sometimes, the default accessible name of an element is missing or the accessible name does not accurately describe the contents of the element and there is no content visible in the DOM that can be associated with the object to give it meaning. A common example of such an element is a button containing an SVG icon without any text.

In cases where an interactive element has no accessible name or an accessible name is not accurate and there is no content visible in the DOM that can be referenced via the aria-labelledby attribute, the aria-label attribute can be used to define a string that labels the interactive element on which it is set. This provides the interactive element with its accessible name.

I mean sure, you could add aria attributes to absolutely every text string in the interface, but is that actually necessary if it's already accessible?

And I know FA hides the icons from screen readers, but the .sr-only spans are for the opposite purpose: to hide the text from sighted users while still leaving it accessible to screen readers. They provide the "accompanying text", which means an aria attribute is not necessary.

The simplest way is using aria-label=“” so screen readers can read the label out aloud to the user.

Well yes, you could do that. It means slightly more markup and slightly less CSS, so much of a muchness. But here's a thing: I think phpBB has iconitis to some degree and personally I prefer having no icons on the Quote and Edit post buttons, and using CSS to force the .sr-only spans to display instead:

Code: Select all

.post-quote .icon, .post-edit .icon {
  display: none;
}
.post-edit .sr-only, .post-quote .sr-only {
  position: static;
  margin: 0;
  padding-inline: 2px;
  font-weight: 700;
  font-variant-caps: small-caps;
}

So, if you remove the inline text and hide it all in an aria-label you are also removing that option for custom presentation, and you're not really gaining anything. The same applies to a green dot. If the text is inline in a span the CSS can be changed to display the text if someone wants that presentation. If it is hidden in an aria-label, you have to hack the markup.

Here's something else: https://www.a11y-collective.com/blog/aria-labels/

It’s crucial to understand that while aria-label can technically be applied to any element requiring an accessible name, its use is recommended primarily for interactive elements. This is because not all screen readers can actually read aria labels on non-interactive elements.