mirror of
https://github.com/sveltejs/svelte.git
synced 2024-12-01 17:30:59 +01:00
993b40201c
* New FAQ, new renderer * Push blog stuff * Fix blog posts * Add tutorial to be rendered * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Revamp a lot of renderer, make it (soft) compatible with sveltekit * Remove markdown types * Clean up faq +page * Document stuff * Make the options more explicity * chore(site-2): Restructure docs pt 2 (#8604) * Push * Update readme * Push * inor accessibility fix * minr stuff * Add prepare * Run prettier * Remove test script * pnpm update * Update sites/svelte.dev/src/routes/examples/[slug]/+page.svelte Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update sites/svelte.dev/package.json Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
36 lines
1.4 KiB
Markdown
36 lines
1.4 KiB
Markdown
---
|
|
title: Dynamic attributes
|
|
---
|
|
|
|
You can use curly braces to control element attributes, just like you use them to control text.
|
|
|
|
Our image is missing a `src` attribute — let's add one:
|
|
|
|
<!-- prettier-ignore -->
|
|
```svelte
|
|
<img src={src} />
|
|
```
|
|
|
|
That's better. But Svelte is giving us a warning:
|
|
|
|
> A11y: <img> element should have an alt attribute
|
|
|
|
When building web apps, it's important to make sure that they're _accessible_ to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup.
|
|
|
|
In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
|
|
|
|
<!-- prettier-ignore -->
|
|
```svelte
|
|
<img src={src} alt="A man dances." />
|
|
```
|
|
|
|
We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
|
|
|
|
## Shorthand attributes
|
|
|
|
It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
|
|
|
|
```svelte
|
|
<img {src} alt="A man dances." />
|
|
```
|