From 23719e24ab4285203ddd1e2e6496f43f39f6a401 Mon Sep 17 00:00:00 2001 From: Mikael Arvola Date: Wed, 21 Aug 2024 08:39:06 -0500 Subject: [PATCH] Clarify accessibility notes for button labels. --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9480651..b75d446 100644 --- a/README.md +++ b/README.md @@ -104,7 +104,14 @@ those will utilize the first link in the contents. that needs to be described, consider placing it below the heading. If it's at the top with an alt text, it may be confusing for screen readers if it comes before the title of the card. - **Centered text** can be harder to read, so avoid longer card text that's centered. -- Make sure **links and buttons** are descriptive, using `ilw-sr-only` if needed to add context. +- Make sure **links and buttons** are descriptive, using `ilw-sr-only` if needed to add context. For example: + +```html +Learn More About Cards +``` + +Note that [WCAG Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name) specifies that the +name and label must begin with the same words, so the hidden portion should be at the end. ## External References