?
avatar C-Lodder
C-Lodder
24 Jul 2020

Summary

It's a known fact that SVGs are more accessible than icon fonts, so I'm going to suggest that Joomla starts supporting and using them.

OpenDyslexic Font is a rather popular tool used to change the font of a web page and assist those with Dyslexia.

Steps to reproduce the issue

  1. Install the OpenDyslexic Font Chrome extension: https://chrome.google.com/webstore/detail/opendyslexic-font-for-chr/cdnapgfjopgaggbmfgbiinmmbdcglnam?hl=en
  2. Go to your Joomla backend

Result

Majority of icon fonts are no longer displayed.

screenyt

I'm going to suggest #28351 is revisted again

avatar C-Lodder C-Lodder - open - 24 Jul 2020
avatar joomla-cms-bot joomla-cms-bot - change - 24 Jul 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 24 Jul 2020
avatar C-Lodder C-Lodder - change - 24 Jul 2020
The description was changed
avatar C-Lodder C-Lodder - edited - 24 Jul 2020
avatar dgrammatiko
dgrammatiko - comment - 24 Jul 2020

@C-Lodder I would be glad if you could do the PR

avatar brianteeman
brianteeman - comment - 24 Jul 2020

bizaar that only some of the instances of the icons are not displayed


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30177.

avatar C-Lodder
C-Lodder - comment - 24 Jul 2020

@brianteeman - Cause for the quickicons, the fas class is used on a <div>, whereas everywhere else is pretty much on a <span>

p, a, h1, h2, h3, h4, h5, input, ul, span, font, strong, th, td {
    font-family: var(--opendyslexic-chrome-sans) !important;
    line-height: 150%;
}
avatar brianteeman
brianteeman - comment - 24 Jul 2020

image

avatar C-Lodder
C-Lodder - comment - 24 Jul 2020

In that case, cause the icon-xxx fonts have their font-family property defined on the psuedo element (::before)

avatar brianteeman
brianteeman - comment - 24 Jul 2020

So the problem is two-fold I think

  1. that the icon- was not converted to a fas icon by @N6REJ in his prs
  2. the conversion is not correctly defining the font-family
    and
    You dont like font-icons and want svg
avatar C-Lodder
C-Lodder - comment - 24 Jul 2020

@brianteeman it has absolutely nothing to do with what I like or want. I'm giving you clear evidence that icon fonts (specifically Font Awesome) are not accessible, whereas SVG's have built in semantical elements. And because Joomla has some "icon only" interactive elements, this causes issues if a user is using the OpenDyslexic Font.

As I've said in other comments, I don't care whether Joomla sticks with icon fonts or moves to SVG. I'm raising an issue and giving a suggestion based on the research and testing I've done this morning.

avatar dgrammatiko
dgrammatiko - comment - 24 Jul 2020

@brianteeman typo3 has already transitioned to svg icons with a similar helper function as the one proposed in #28351
So Joomla will not the be the first CMS that will go that way but will be good to also not be the last one.

And a word from me about accessibility and the way the project handles things related to it: I will admit that you have an expertise in the field and you have invested a huge amount of time to bring things forward and thus the code is in a very good place but the CMS is not providing sufficient helper functions (eg you have to manually type the <span aria-hidden="true" class="fas fa-something"></span) for any icon and that is something that most 3rd PD will probably ignore because they either don't realise the impact of the code or they don't have the time to invest in a11y testing. Therefore providing a common way to display icons (an API) you make their life easier and also you guaranty that the extensions that follow the API are accessible (at least for those parts the CMS exposed some sort of API). Providing a11y code only for the core is the one part of the equation but proving a way so that every extension in the Joomla ecosystem is also a11y safe is the right path...

My 2c

avatar brianteeman
brianteeman - comment - 24 Jul 2020

@C-Lodder you have identified two bugs that need to be addressed irrespective of svg

@dgrammatiko I dont care if we use svg or fonts. In the absence of the code there is nothing to do. Writing helper classes etc as I am sure you are all too aware is way beyond my skillset. If only we had an accessibility team who could do that.

avatar dgrammatiko
dgrammatiko - comment - 24 Jul 2020

In the absence of the code there is nothing to do.

True but then again if you, as an expert in the field, and also the PD will not accept that a transition to svgs will be a welcome feature there is very little incentive for any of us (@C-Lodder or me or even @laoneo who's already got a similar solution in production) to provide such code. It's a bit of work that nobody will ever even try to do if there's a good chance that it might be rejected.
BTW the helper function could be adjusted to spit out either an svg icon html fragment or a (safe) font icon html fragment if the PD doesn't wanna go the svg icons route for the backend. At the end it's just code we can bend it to do whatever we want

avatar chmst chmst - change - 27 Jul 2020
Category Accessibility
avatar brianteeman
brianteeman - comment - 13 Nov 2020

The problem with the font not being displayed when the opendyslexic plugin is installed in chrome is nothing to do with joomla.

The plugin claims to support icon fonts but looking at the code in the plugin it only supports fontawesome v4 and not v5

I have submitted a pull request upstream to fix that. OpenDyslexic/opendyslexic-chrome#38

As explained elsewhere - an svg icon is not by default any more accessible than an iconfont. An svg can be made accessible but by default it is not.

This should be closed as an upstream problem as there is nothing that can be done in Joomla for this. For reference the chrome plugin doesn't work at all here on github
cc @carcam

avatar carcam
carcam - comment - 13 Nov 2020

Thanks @brianteeman !!

avatar C-Lodder C-Lodder - change - 13 Nov 2020
Status New Closed
Closed_Date 0000-00-00 00:00:00 2020-11-13 09:55:51
Closed_By C-Lodder
avatar C-Lodder C-Lodder - close - 13 Nov 2020
avatar C-Lodder
C-Lodder - comment - 13 Nov 2020

Closing. Will try again in 5 years

Add a Comment

Login with GitHub to post a comment