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

A11y icons #5253

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 5.0 enhance labels Mar 18, 2017
@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
1 check was pending
1 check was pending
continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

1 participant
You can’t perform that action at this time.