ExtJS & FontAwesome: Screen reader compatibility
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have an application which has to be screen readable (for blind people) and I'm struggling to read a FontAwesome Icon. Right now I have this for example:
{
xtype: 'actioncolumn',
items: [
{
iconCls: 'x-fa fa-envelope',
}],
dataIndex: 'edit',
text: 'Send E-Mail'
}
And I use NVDA Screen reader -> https://www.nvaccess.org/download/
However it cannot read this text ("Send E-Mail") on mouse hover. I know that font-awesome has option to include aria-label="Send E-Mail" but how can I apply it to ExtJS item?
extjs font-awesome
asked Nov 23 '18 at 13:42
harunB10harunB10
67511329
add a comment |
I have an application which has to be screen readable (for blind people) and I'm struggling to read a FontAwesome Icon. Right now I have this for example:
{
xtype: 'actioncolumn',
items: [
{
iconCls: 'x-fa fa-envelope',
}],
dataIndex: 'edit',
text: 'Send E-Mail'
}
And I use NVDA Screen reader -> https://www.nvaccess.org/download/
However it cannot read this text ("Send E-Mail") on mouse hover. I know that font-awesome has option to include aria-label="Send E-Mail" but how can I apply it to ExtJS item?
extjs font-awesome
asked Nov 23 '18 at 13:42
harunB10harunB10
67511329
I'm currently working this issue as well. Have you found a solution?
– harryBundles
Dec 6 '18 at 11:03
@harryBundles Not yet. Apparently fonts are not screen readable for now.
– harunB10
Dec 7 '18 at 8:33
add a comment |
I have an application which has to be screen readable (for blind people) and I'm struggling to read a FontAwesome Icon. Right now I have this for example:
{
xtype: 'actioncolumn',
items: [
{
iconCls: 'x-fa fa-envelope',
}],
dataIndex: 'edit',
text: 'Send E-Mail'
}
And I use NVDA Screen reader -> https://www.nvaccess.org/download/
However it cannot read this text ("Send E-Mail") on mouse hover. I know that font-awesome has option to include aria-label="Send E-Mail" but how can I apply it to ExtJS item?
extjs font-awesome
asked Nov 23 '18 at 13:42
harunB10harunB10
67511329
I have an application which has to be screen readable (for blind people) and I'm struggling to read a FontAwesome Icon. Right now I have this for example:
{
xtype: 'actioncolumn',
items: [
{
iconCls: 'x-fa fa-envelope',
}],
dataIndex: 'edit',
text: 'Send E-Mail'
}
And I use NVDA Screen reader -> https://www.nvaccess.org/download/
However it cannot read this text ("Send E-Mail") on mouse hover. I know that font-awesome has option to include aria-label="Send E-Mail" but how can I apply it to ExtJS item?
extjs font-awesome
extjs font-awesome
asked Nov 23 '18 at 13:42
harunB10harunB10
67511329
asked Nov 23 '18 at 13:42
harunB10harunB10
67511329
asked Nov 23 '18 at 13:42
harunB10harunB10
67511329
asked Nov 23 '18 at 13:42
harunB10harunB10
67511329
asked Nov 23 '18 at 13:42
harunB10harunB10
67511329
67511329
I'm currently working this issue as well. Have you found a solution?
– harryBundles
Dec 6 '18 at 11:03
@harryBundles Not yet. Apparently fonts are not screen readable for now.
– harunB10
Dec 7 '18 at 8:33
add a comment |
I'm currently working this issue as well. Have you found a solution?
– harryBundles
Dec 6 '18 at 11:03
@harryBundles Not yet. Apparently fonts are not screen readable for now.
– harunB10
Dec 7 '18 at 8:33
I'm currently working this issue as well. Have you found a solution?
– harryBundles
Dec 6 '18 at 11:03
I'm currently working this issue as well. Have you found a solution?
– harryBundles
Dec 6 '18 at 11:03
@harryBundles Not yet. Apparently fonts are not screen readable for now.
– harunB10
Dec 7 '18 at 8:33
@harryBundles Not yet. Apparently fonts are not screen readable for now.
– harunB10
Dec 7 '18 at 8:33
add a comment |
2 Answers
2
active
oldest
votes
Have you tried this:
{
iconCls: 'x-fa fa-envelope',
tooltip: 'Send E-Mail',
}
answered Nov 26 '18 at 16:02
Fabio BarrosFabio Barros
959310
It works but only when I hover the tooltip. I want screen reader to work when I hover the icon.
– harunB10
Nov 26 '18 at 16:14
What version of Extjs you are using?
– Fabio Barros
Nov 26 '18 at 16:28
ExtJS 6. The latest one.
– harunB10
Nov 26 '18 at 16:29
Try use that property in the button: ariaLabel: 'Send E-mail'
– Fabio Barros
Nov 26 '18 at 16:31
Already tried that. Didn't work.
– harunB10
Nov 26 '18 at 16:32
add a comment |
I wasn't able to find a way to make the "actioncolumn" compliant, so I have converted them to a "widgetcolumn" and that works better. The downsides to this is that you cannot have multiple "widgets" in one column, so each of actions will get its own column and you have buttons in the columns instead of the more elegant icons. But, what can you do, Ext....
{
xtype: 'widgetcolumn',
text: 'Edit', //column header
align: 'center',
width: 60,
widget: {
xtype: 'button',
width: 40,
iconCls: 'x-fa fa-pencil',
ariaLabel: 'click to edit',
handler: 'edit'
}
}
For the handler, the arguments are a little different since it's now a button (this is specific to my case, using the record id):
edit: function(button) {
var grid = button.up('grid'),
store = grid.getStore(),
recordId = button.getWidgetRecord().getId(),
record = store.findRecord('id', recordId);
//and so on....
}
answered Dec 7 '18 at 10:49
harryBundlesharryBundles
74212
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447821%2fextjs-fontawesome-screen-reader-compatibility%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Have you tried this:
{
iconCls: 'x-fa fa-envelope',
tooltip: 'Send E-Mail',
}
answered Nov 26 '18 at 16:02
Fabio BarrosFabio Barros
959310
It works but only when I hover the tooltip. I want screen reader to work when I hover the icon.
– harunB10
Nov 26 '18 at 16:14
What version of Extjs you are using?
– Fabio Barros
Nov 26 '18 at 16:28
ExtJS 6. The latest one.
– harunB10
Nov 26 '18 at 16:29
Try use that property in the button: ariaLabel: 'Send E-mail'
– Fabio Barros
Nov 26 '18 at 16:31
Already tried that. Didn't work.
– harunB10
Nov 26 '18 at 16:32
add a comment |
Have you tried this:
{
iconCls: 'x-fa fa-envelope',
tooltip: 'Send E-Mail',
}
answered Nov 26 '18 at 16:02
Fabio BarrosFabio Barros
959310
It works but only when I hover the tooltip. I want screen reader to work when I hover the icon.
– harunB10
Nov 26 '18 at 16:14
What version of Extjs you are using?
– Fabio Barros
Nov 26 '18 at 16:28
ExtJS 6. The latest one.
– harunB10
Nov 26 '18 at 16:29
Try use that property in the button: ariaLabel: 'Send E-mail'
– Fabio Barros
Nov 26 '18 at 16:31
Already tried that. Didn't work.
– harunB10
Nov 26 '18 at 16:32
add a comment |
Have you tried this:
{
iconCls: 'x-fa fa-envelope',
tooltip: 'Send E-Mail',
}
answered Nov 26 '18 at 16:02
Fabio BarrosFabio Barros
959310
Have you tried this:
{
iconCls: 'x-fa fa-envelope',
tooltip: 'Send E-Mail',
}
answered Nov 26 '18 at 16:02
Fabio BarrosFabio Barros
959310
answered Nov 26 '18 at 16:02
Fabio BarrosFabio Barros
959310
answered Nov 26 '18 at 16:02
Fabio BarrosFabio Barros
959310
answered Nov 26 '18 at 16:02
Fabio BarrosFabio Barros
959310
959310
It works but only when I hover the tooltip. I want screen reader to work when I hover the icon.
– harunB10
Nov 26 '18 at 16:14
What version of Extjs you are using?
– Fabio Barros
Nov 26 '18 at 16:28
ExtJS 6. The latest one.
– harunB10
Nov 26 '18 at 16:29
Try use that property in the button: ariaLabel: 'Send E-mail'
– Fabio Barros
Nov 26 '18 at 16:31
Already tried that. Didn't work.
– harunB10
Nov 26 '18 at 16:32
add a comment |
It works but only when I hover the tooltip. I want screen reader to work when I hover the icon.
– harunB10
Nov 26 '18 at 16:14
What version of Extjs you are using?
– Fabio Barros
Nov 26 '18 at 16:28
ExtJS 6. The latest one.
– harunB10
Nov 26 '18 at 16:29
Try use that property in the button: ariaLabel: 'Send E-mail'
– Fabio Barros
Nov 26 '18 at 16:31
Already tried that. Didn't work.
– harunB10
Nov 26 '18 at 16:32
It works but only when I hover the tooltip. I want screen reader to work when I hover the icon.
– harunB10
Nov 26 '18 at 16:14
It works but only when I hover the tooltip. I want screen reader to work when I hover the icon.
– harunB10
Nov 26 '18 at 16:14
What version of Extjs you are using?
– Fabio Barros
Nov 26 '18 at 16:28
What version of Extjs you are using?
– Fabio Barros
Nov 26 '18 at 16:28
ExtJS 6. The latest one.
– harunB10
Nov 26 '18 at 16:29
ExtJS 6. The latest one.
– harunB10
Nov 26 '18 at 16:29
Try use that property in the button: ariaLabel: 'Send E-mail'
– Fabio Barros
Nov 26 '18 at 16:31
Try use that property in the button: ariaLabel: 'Send E-mail'
– Fabio Barros
Nov 26 '18 at 16:31
Already tried that. Didn't work.
– harunB10
Nov 26 '18 at 16:32
Already tried that. Didn't work.
– harunB10
Nov 26 '18 at 16:32
add a comment |
I wasn't able to find a way to make the "actioncolumn" compliant, so I have converted them to a "widgetcolumn" and that works better. The downsides to this is that you cannot have multiple "widgets" in one column, so each of actions will get its own column and you have buttons in the columns instead of the more elegant icons. But, what can you do, Ext....
{
xtype: 'widgetcolumn',
text: 'Edit', //column header
align: 'center',
width: 60,
widget: {
xtype: 'button',
width: 40,
iconCls: 'x-fa fa-pencil',
ariaLabel: 'click to edit',
handler: 'edit'
}
}
For the handler, the arguments are a little different since it's now a button (this is specific to my case, using the record id):
edit: function(button) {
var grid = button.up('grid'),
store = grid.getStore(),
recordId = button.getWidgetRecord().getId(),
record = store.findRecord('id', recordId);
//and so on....
}
answered Dec 7 '18 at 10:49
harryBundlesharryBundles
74212
add a comment |
I wasn't able to find a way to make the "actioncolumn" compliant, so I have converted them to a "widgetcolumn" and that works better. The downsides to this is that you cannot have multiple "widgets" in one column, so each of actions will get its own column and you have buttons in the columns instead of the more elegant icons. But, what can you do, Ext....
{
xtype: 'widgetcolumn',
text: 'Edit', //column header
align: 'center',
width: 60,
widget: {
xtype: 'button',
width: 40,
iconCls: 'x-fa fa-pencil',
ariaLabel: 'click to edit',
handler: 'edit'
}
}
For the handler, the arguments are a little different since it's now a button (this is specific to my case, using the record id):
edit: function(button) {
var grid = button.up('grid'),
store = grid.getStore(),
recordId = button.getWidgetRecord().getId(),
record = store.findRecord('id', recordId);
//and so on....
}
answered Dec 7 '18 at 10:49
harryBundlesharryBundles
74212
add a comment |
I wasn't able to find a way to make the "actioncolumn" compliant, so I have converted them to a "widgetcolumn" and that works better. The downsides to this is that you cannot have multiple "widgets" in one column, so each of actions will get its own column and you have buttons in the columns instead of the more elegant icons. But, what can you do, Ext....
{
xtype: 'widgetcolumn',
text: 'Edit', //column header
align: 'center',
width: 60,
widget: {
xtype: 'button',
width: 40,
iconCls: 'x-fa fa-pencil',
ariaLabel: 'click to edit',
handler: 'edit'
}
}
For the handler, the arguments are a little different since it's now a button (this is specific to my case, using the record id):
edit: function(button) {
var grid = button.up('grid'),
store = grid.getStore(),
recordId = button.getWidgetRecord().getId(),
record = store.findRecord('id', recordId);
//and so on....
}
answered Dec 7 '18 at 10:49
harryBundlesharryBundles
74212
I wasn't able to find a way to make the "actioncolumn" compliant, so I have converted them to a "widgetcolumn" and that works better. The downsides to this is that you cannot have multiple "widgets" in one column, so each of actions will get its own column and you have buttons in the columns instead of the more elegant icons. But, what can you do, Ext....
{
xtype: 'widgetcolumn',
text: 'Edit', //column header
align: 'center',
width: 60,
widget: {
xtype: 'button',
width: 40,
iconCls: 'x-fa fa-pencil',
ariaLabel: 'click to edit',
handler: 'edit'
}
}
For the handler, the arguments are a little different since it's now a button (this is specific to my case, using the record id):
edit: function(button) {
var grid = button.up('grid'),
store = grid.getStore(),
recordId = button.getWidgetRecord().getId(),
record = store.findRecord('id', recordId);
//and so on....
}
answered Dec 7 '18 at 10:49
harryBundlesharryBundles
74212
answered Dec 7 '18 at 10:49
harryBundlesharryBundles
74212
answered Dec 7 '18 at 10:49
harryBundlesharryBundles
74212
answered Dec 7 '18 at 10:49
harryBundlesharryBundles
74212
74212
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447821%2fextjs-fontawesome-screen-reader-compatibility%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I'm currently working this issue as well. Have you found a solution?
– harryBundles
Dec 6 '18 at 11:03
@harryBundles Not yet. Apparently fonts are not screen readable for now.
– harunB10
Dec 7 '18 at 8:33