Replace icon fonts with SVG images #100

Open
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.

Fipamo with icons missing due to a external font plugin
Fig 1. icons missing on the dashboard page

some icons missing due to a replacement font, while svg icons are visible
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.
ro added this to the Road to Version One project 2024-05-07 22:36:21 +02:00

icon fonts have been removed and replaced with SVGs

icon fonts have been removed and replaced with SVGs
ro self-assigned this 2024-06-05 21:39:31 +02:00
Sign in to join this conversation.
No milestone
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: projects/fipamo#100
No description provided.