Replace icon fonts with SVG images #100

New issue

Closed

opened 2023-07-11 17:02:40 +02:00 by Moiety · 2 comments

Moiety commented

2023-07-11 17:02:40 +02:00

(Migrated from koodu.ubiqueros.com)

Pages: all pages tested, specifically noticable in the nabvar

The use of icon fonts can lead to accessibility issues when people load custom web fonts for readability, such as OpenDyslexic.

This could be solved by replacing the icons with SVG images.

Fig 1. icons missing on the dashboard page

Fig 2. under “options” the SVG icons are still visible while the toolbar icons, which use an icon font, are replaced due to the user loading a replacement font

Some additional background from Heydon’s book “Inclusive Design Patterns”:

“Icon fonts become problematic when users choose their own fonts for web pages, as described by Seren D in “Death To Icon Fonts.” It’s important for inclusion to allow users to choose fonts which they are comfortable reading, especially if they experience difficulty with dyslexia. Your style sheets should be sensitive to this preference. The problem comes when the user-defined font does not support the characters used for the icons, and leaves generic “Glyph not defined” boxes in their place.”

Pages: all pages tested, specifically noticable in the nabvar The use of icon fonts can lead to accessibility issues when people load custom web fonts for readability, such as [OpenDyslexic](https://opendyslexic.org). This could be solved by replacing the icons with SVG images. ![Fipamo with icons missing due to a external font plugin](/attachments/5a3f0cb7-36b5-42cf-ab6d-3c7100832916) Fig 1. icons missing on the dashboard page ![some icons missing due to a replacement font, while svg icons are visible](/attachments/0175e5aa-b015-4a8c-bb27-b30fe1968585) Fig 2. under “options” the SVG icons are still visible while the toolbar icons, which use an icon font, are replaced due to the user loading a replacement font Some additional background from Heydon’s book “Inclusive Design Patterns”: > “Icon fonts become problematic when users choose their own fonts for web pages, as described by [Seren D in “Death To Icon Fonts.”](https://speakerdeck.com/ninjanails/death-to-icon-fonts) It’s important for inclusion to allow users to choose fonts which they are comfortable reading, especially if they experience difficulty with dyslexia. Your style sheets should be sensitive to this preference. The problem comes when the user-defined font does not support the characters used for the icons, and leaves generic “Glyph not defined” boxes in their place.”

are0h commented

2023-07-11 23:42:47 +02:00

(Migrated from koodu.ubiqueros.com)

Ah, I didn't even think about the custom fonts issue.

I use custom fonts for icons pretty extensively through out the site, but we'll change them to SVG so it doesn't bork out when people make changes for the sake of their needs.

Nice catch.

Ah, I didn't even think about the custom fonts issue. I use custom fonts for icons pretty extensively through out the site, but we'll change them to SVG so it doesn't bork out when people make changes for the sake of their needs. Nice catch.