Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible AT label repetition In the Annotation editor panel #2707

Open
gautierchomel opened this issue Dec 11, 2024 · 4 comments
Open

Possible AT label repetition In the Annotation editor panel #2707

gautierchomel opened this issue Dec 11, 2024 · 4 comments
Assignees

Comments

@gautierchomel
Copy link
Member

In the Annotation editor panel, radio buttons used to set up Highlight type are repeating accesisble name as aria-label={${__("reader.annotations.highlight")}...
line 212 and label title={${type === "solid_background" ? __("reader.annotations.type.solid")... line 214

I guess that label is sufficient and line 212 can be avoided.

@arthur-lemeur
Copy link
Collaborator

The way I thought it was :

  • The screen reader interacts with the input element (as it's only visually hidden with z-index: -1 css so it will use the "aria-label" tag to get its name.
  • The design only show the label tag, containing the symbol of highlight style (the SVG in the label tag), the title attribute allows to display more information as a tooltip (i.e the name of the highlight type) for users who might need more context when hovered.

@gautierchomel
Copy link
Member Author

I guess that AT will avoid repeating, still I see no use of aria-label here as title exists and both are identical.
label title provides a sufficient accessible name for the input element.

@gautierchomel
Copy link
Member Author

Ok, you're probably right; it's better to put belt and braces because the label has no textual content.

From https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/

Rule 3: Prefer Native Techniques
In HTML documents, whenever possible, rely on HTML naming techniques, such as the HTML label element for form elements and caption element for tables. While less flexible, their simplicity and reliance on visible text help ensure robust accessible experiences. Several of the naming techniques highlight specific accessibility advantages of using HTML features instead of ARIA attributes.

Rule 4: Avoid Browser Fallback
When authors do not specify an accessible name using an element or attribute that is intended for naming, browsers attempt to help assistive technology users by resorting to fallback methods for generating a name. For example, the HTML title and placeholder attributes are used as last resort sources of content for accessible names. Because the purpose of these attributes is not naming, their content typically yields low quality accessible names that are not effective.

@gautierchomel
Copy link
Member Author

To test with screen readers.

@gautierchomel gautierchomel self-assigned this Dec 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants