Skip to content

Accessible (and higher-performance) icons #14402

Open
@krassowski

Description

In #14320 @s596757 attempted to add alt tags on SVG icons. However, this is not allowed by specification and a number of solutions exists, including using <title> elements inside <svg> and a legacy workaround of using aria-label/ aria-labelledby.

If we were to use aria-labelledby we would need to manually modify each SVG we insert to ensure unique identifiers, either:

  1. adding a unique suffix to SVGs on each injection (which however would need to benchmarked as this could lead to performance deterioration as more intelligent browsers would not be able to deduplicate DOM nodes as those would not longer be identical), or
  2. the SVG injector could instead only insert the alt/desc tag once in a dedicated place in DOM (only inser it if an element with such an ID exists) and remove the element from SVG strings otherwise.

However, a better solution would be use of <title> which could be combined with the <use> tag which we previously also discussed in the performance meetings as a having a potential to improve performance of JupyterLab. An example for this patern is described in: https://css-tricks.com/accessible-svgs/#aa-icons

All solutions are problematic with respect to translations. We would need to write an extractor for strings and substitute them during injection.

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions