diff --git a/.changeset/two-ideas-hug.md b/.changeset/two-ideas-hug.md new file mode 100644 index 0000000000..ef13b2f08c --- /dev/null +++ b/.changeset/two-ideas-hug.md @@ -0,0 +1,5 @@ +--- +'@solid-design-system/docs': patch +--- + +Updated accessibility information for `sd-teaser media` diff --git a/packages/docs/src/stories/components/teaser-media.mdx b/packages/docs/src/stories/components/teaser-media.mdx index 416f7a133e..87addf2348 100644 --- a/packages/docs/src/stories/components/teaser-media.mdx +++ b/packages/docs/src/stories/components/teaser-media.mdx @@ -69,7 +69,7 @@ Used as a flexible container that groups related items and links them to further - Adopt a consistent, semantically correct heading hierarchy to enable quick scanning across multiple teasers on a page. Teaser headings should be the first item in the DOM, introducing a new thematic region and separating the following content from the previous region. - Include descriptive alt text for the media slot, ensuring that non-text content is accessible. - For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content. -- Avoid placing essential information or actions in expandable teaser areas since they are visible on mouse hover. +- Avoid placing essential information or actions in expandable teaser areas since they are only visible on click. - Verify that each link is announced in a way that conveys its unique destination or function to screen readers. - Ensure that the background images you choose for each teaser variant provide enough contrast with the text to maintain readability.