New Issue

Replace icon fonts with SVG images #100

Open

opened by Moiety · 1 comments

Moiety commented

Collaborator

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

image.png

147 KiB

image.png

36 KiB

Moiety added the

Bugs

label

Moiety added the

Accessibility

label

are0h commented

Owner

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.

are0h added this to the Fipamo Beta 2.7 milestone

are0h added this to the Fipamo Beta project

are0h self-assigned this

are0h modified the milestone from Fipamo Beta 2.7 to Fipamo Beta 2.6.2