diff options
-rw-r--r-- | assets/css/_declare-vars.scss | 21 | ||||
-rw-r--r-- | content/notebook/fediverse/in-depth-image-descriptions.md | 2 |
2 files changed, 22 insertions, 1 deletions
diff --git a/assets/css/_declare-vars.scss b/assets/css/_declare-vars.scss index 4a9513c..e81f410 100644 --- a/assets/css/_declare-vars.scss +++ b/assets/css/_declare-vars.scss | |||
@@ -29,3 +29,24 @@ | |||
29 | ), | 29 | ), |
30 | ) | 30 | ) |
31 | ), 'dims'); | 31 | ), 'dims'); |
32 | |||
33 | @include iro.props-store(( | ||
34 | --dims: ( | ||
35 | --font-size: ( | ||
36 | --50: iro.fn-px-to-rem(11px), | ||
37 | --75: iro.fn-px-to-rem(13px), | ||
38 | --100: iro.fn-px-to-rem(14px), | ||
39 | --150: iro.fn-px-to-rem(16px), | ||
40 | --200: iro.fn-px-to-rem(18px), | ||
41 | --300: iro.fn-px-to-rem(20px), | ||
42 | --400: iro.fn-px-to-rem(24px), | ||
43 | --500: iro.fn-px-to-rem(28px), | ||
44 | --600: iro.fn-px-to-rem(32px), | ||
45 | --700: iro.fn-px-to-rem(36px), | ||
46 | --800: iro.fn-px-to-rem(40px), | ||
47 | --900: iro.fn-px-to-rem(45px), | ||
48 | --1000: iro.fn-px-to-rem(50px), | ||
49 | --1100: iro.fn-px-to-rem(60px), | ||
50 | ), | ||
51 | ) | ||
52 | ), 'sm'); | ||
diff --git a/content/notebook/fediverse/in-depth-image-descriptions.md b/content/notebook/fediverse/in-depth-image-descriptions.md index 9fe7e48..8af09ff 100644 --- a/content/notebook/fediverse/in-depth-image-descriptions.md +++ b/content/notebook/fediverse/in-depth-image-descriptions.md | |||
@@ -18,7 +18,7 @@ Imagine you're using an online shop. | |||
18 | What you'll typically see is a list of products where each list item has a small preview image, a product name and some other metadata.\ | 18 | What you'll typically see is a list of products where each list item has a small preview image, a product name and some other metadata.\ |
19 | Now imagine that the shop displays a long textual description for each product instead. | 19 | Now imagine that the shop displays a long textual description for each product instead. |
20 | This is what the timeline appears like to screen reader users if long image descriptions are used. | 20 | This is what the timeline appears like to screen reader users if long image descriptions are used. |
21 | And unlike people seeing the text, they don't have the luxury of skimming to grasp vital information quickly -- they can only skip the rest of the description at any point, or wait for the screen reader to read all of it. | 21 | And unlike people seeing the text, they don't have the luxury of skimming to grasp vital information quickly -- they can only wait for the screen reader to read all of it or until they decide to skip the rest. |
22 | 22 | ||
23 | Detailed descriptions are only helpful when the user has decided the content is interesting to them. | 23 | Detailed descriptions are only helpful when the user has decided the content is interesting to them. |
24 | Currently, most fedi frontends put them in the attachment's `alt` attribute, which is fine if the user is currently viewing a single post instead of the timeline. | 24 | Currently, most fedi frontends put them in the attachment's `alt` attribute, which is fine if the user is currently viewing a single post instead of the timeline. |