dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-07-08 12:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve accessibility for image captions

Browse source
This commit is contained in:
Daniel Bulant 2022-05-17 14:40:44 +02:00
parent b1967f5db1
commit c14e6e1074
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/lib/components/posts/image.svelte
View file

@ -1,18 +1,24 @@
<script> <script>
import Described from "./described.svelte";
export var src; export var src;
export var alt; export var alt;
export var title; export var title;
</script> </script>
<Described> <figure>
<img {src} {alt} {title} name="content"> <img {src} {alt} {title} name="content">
<slot /> <figcaption>
</Described> <slot />
</figcaption>
</figure>
<style> <style>
img { img {
border-radius: 5px; border-radius: 5px;
} }
figcaption {
text-align: center;
color: gray;
width: 100%;
display: inline-block;
}
</style> </style>