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. |
