Suggested a11y improvement

[Gumboots]

From this topic: Link to quote

ETA: Incidentally, in default form that link is terrible for a11y. It has no available description of what it does, not even the dreaded title attribute. Obviously a pseudo won't help for screen readers either. It really needs a proper language string.

Out of the default language strings, the most likely suspects for hijacking are probably these:

Code: Select all

'POST_DISPLAY'			=> 'Display this post',
'JUMP_TO_PAGE'			=> 'Jump to page',

Either of those would be a reasonable fit for this purpose. The relevant code seems to be this (prosilver/template/bbc.html):

Code: Select all

<a href="{@msg_url}" data-msg-id="{@msg_id}">&#8593;</a>

So you could change that to one of these options:

Code: Select all

<a href="{@msg_url}" data-msg-id="{@msg_id}">{L_GOTO_PAGE} &#8593;</a>

Code: Select all

<a href="{@msg_url}" data-msg-id="{@msg_id}">{L_POST_DISPLAY} &#8593;</a>

[danieltj]

You can make this better by using aria-label. Screen readers will recognise it's a link and if read aloud, using the correct string inside the label attribute will mean that users are told that it's a link to view a post in reference.

edit: view tracker ticket and the pull request.

[Gumboots]

Yup, that will help. Personally I'd still be inclined to have something a bit more noticeable/descriptive for sighted users too, but in a pinch a custom pseudo will do for that. An .sr-only span holding the language string would also work (it could be turned into a tooltip for sighted users, if someone wanted to).

The other thing that occurred to me was to link the quote date to the original post. It makes use of otherwise useless text that is already there, and if it is visually a link (via styling) then **** wrote (date goes here) is a pretty clear indication that it links to the post made on that date.

[danieltj]

I appreciate the feedback, my thought process is to try not to change too much in a point release. Users with poor eyesight may still not see it however that’s where the screen reader comes in (if used) to provide audio descriptions.

Feel free to open your own PR for this though. Collaboration on tickets is a positive thing.

[Gumboots]

Fair enough about the point release. I tend to think more in terms of custom coding.

[bonelifer]

Not sure if this does what you are looking for. https://github.com/skynettechnologies/p ... essibility

[Gumboots]

Just had an obvious thought, which should have occurred to me earlier.

Doing it via a markup change will only apply the changes to quotes made after the change. All previously existing quotes will have the old presentation locked into the database. It would be necessary to run a custom database query to apply the change to existing quotes.

Which is not necessarily a major drama, but it would probably be a good idea to provide people with an example of the relevant query if it is not going to be built into the default upgrade script.

[danieltj]

It won’t because the quote HTML is saved in the database as BBCode tags and only converted to HTML which includes the arrow when parsed / displayed on the front-end.

There is an issue here though which is the change requires BBCodes.html to be updated in the style so any styles that don’t inherit from prosilver will require updates. Having said all that, no databases changes are needed so it’s fine.

[Gumboots]

Cool. In that case I'll just hack the template and see what I can come up with.

[Gumboots]

Having said all that, no databases changes are needed so it’s fine.

Just scratched my previous post content, as having had a break and another look at it I figured out where I went wrong. There are two instances of the linked arrow in the template, and obviously I had to edit both to cover all bases. I only edited one before, and missed the other one. It works now, which is good. I'm using this:

Code: Select all

				<xsl:if test="@post_url">
					<xsl:text> </xsl:text>
					<a href="{@post_url}" data-post-id="{@post_id}" onclick="if(document.getElementById(hash.substr(1)))href=hash">{L_JUMP_TO_PAGE}</a>
				</xsl:if>
				<xsl:if test="@msg_url">
					<xsl:text> </xsl:text>
					<a href="{@msg_url}" data-msg-id="{@msg_id}">{L_JUMP_TO_PAGE}</a>
				</xsl:if>

It could be made more complex, but this suits me.

[danieltj]

Thanks for highlighting that, I'd completely missed that second instance of it. I'll update the pull request and probably look at changing the icon as well as a Font Awesome icon would be much more suitable considering they're used throughout core anyway.