Skip to content

Update SVGs usage #41

@gutakk

Description

@gutakk

Some issues with this implementation:

  • Performance: this SVG image would need to be rendered in the DOM as many time as there are rows in the table. Besides, this image would be fetched very late when rendering the first row.
  • Accessibility: this image would not be rendered by screen readers

Instead, prefer using CSS background for that:

<a class="list-keyword__status list-keyword__status--processed" href="/keyword/{{ $k.ID }}"><span class="sr-only">Processed</span></a>

See https://tailwindcss.com/docs/screen-readers

WHen using inline SVG images, prefer to create a sprite image as well.

Originally posted by @olivierobert in #32 (comment)

and

This is another example of when a background image should be used instead:

<div class="navigation__logo">
  <a href="/"><span class="sr-only>">Go Google Scraper</span></a>
</div>

sr-only is for screen-reader so for accessibility

Originally posted by @olivierobert in #42 (comment)

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions