[#14988] - [a11y] icons for Multilingual status module
- Fixed in Code Base
- 1 Apr 2017
- Medium
- Build: staging
- # 14988
- Diff
- brianteeman:a11y-multilang
User tests: Successful: Unsuccessful:
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.
In this case we have the text and it is displayed so we just need to add the aria-hidden to prevent the icon being "read aloud"
This PR addresses the use case shown in the image below
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration com_languages |
Just for screen readers if i remember correctly - but any changes to that
css are beyond the scope of this PR ;)
http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail
Virus-free.
www.avg.com
http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail
<#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>
On 29 March 2017 at 13:34, Lodder notifications@github.com wrote:
Was the element-invisible class introduced in Joomla for screenreaders,
or just to hide elements? If it's for screenreaders, it should be updated,
to include clip-path, along with some other tweaks:
https://github.com/twbs/bootstrap/blob/ca8320a64567091e69521565c75af4
363db73d2b/scss/mixins/_screen-reader.scss—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#14988 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8UhhyA3j_Amp4S0kxk5hWOZhg_CJks5rqk_YgaJpZM4Ms323
.
--
Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
https://brian.teeman.net/ http://brian.teeman.net/
Per an example from fontawesome.io,
<i class="fa fa-car" aria-hidden="true" title="Time to destination by car"></i>
<span class="sr-only">Time to destination by car:</span>
should:
<span class="icon-pending" aria-hidden="true"><span class="element-invisible"><?php echo JText::_('WARNING'); ?></span></span>
be:
<span class="icon-pending" aria-hidden="true"></span><span class="element-invisible"><?php echo JText::_('WARNING'); ?></span>
I don't know if it matters.
Thanks I will update this
| Labels |
Added:
?
|
||
I have tested this item
Code review.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/14988.
I have tested this item
Before applying the patch we see there is no aria-invalid on the icons in the multi-language status, after applying the patch I see the aria-invalid=true is set on the icons.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/14988.
| Status | Pending | ⇒ | Ready to Commit |
RTC after two successful testes.
wilsonge
- | Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2017-04-01 22:06:08 |
| Closed_By | ⇒ | wilsonge | |
| Labels |
Added:
?
|
||
Was the
element-invisibleclass introduced in Joomla for screenreaders, or just to hide elements? If it's for screenreaders, it should be updated, to includeclip-path, along with some other tweaks: https://github.com/twbs/bootstrap/blob/ca8320a64567091e69521565c75af4363db73d2b/scss/mixins/_screen-reader.scss