Skip to content

A11y icons #5253

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

Merged
merged 1 commit into from
Mar 18, 2017
Merged

A11y icons #5253

merged 1 commit into from
Mar 18, 2017

Conversation

810
Copy link
Member

@810 810 commented Mar 18, 2017

When reading our default markup for rendering icons, assisistive
technology may have the following problems.

The assistive technology will not find any content to read out to a user
The assistive technology will read the unicode equivalent, which does
not match up to what the icon means in context, or worse is just plain
confusing. In our use case it is always plain wrong. For example the
unicode character used to display the trashed icon is \4c which is equal
to L

When an icon is not an interactive element the simplest way to provide a
text alternative is to use the aria-hidden="true" attribute on the icon
and to include the text with an additional element, such as a < span>,
with appropriate CSS to visually hide the element while keeping it
accessible to assistive technologies.

When reading our default markup for rendering icons, assisistive
technology may have the following problems.

The assistive technology will not find any content to read out to a user
The assistive technology will read the unicode equivalent, which does
not match up to what the icon means in context, or worse is just plain
confusing. In our use case it is always plain wrong. For example the
unicode character used to display the trashed icon is \4c which is equal
to L

When an icon is not an interactive element the simplest way to provide a
text alternative is to use the aria-hidden="true" attribute on the icon
and to include the text with an additional element, such as a < span>,
with appropriate CSS to visually hide the element while keeping it
accessible to assistive technologies.
@810 810 added this to the 5.0.7 milestone Mar 18, 2017
@810 810 merged commit 66013d3 into Kunena:K5.0 Mar 18, 2017
810 added a commit that referenced this pull request Mar 30, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant