Question

我有一个应用程序，该应用程序必须对屏幕可读（适用于盲人），并且正在努力阅读FontAwesome图标。现在我有这个例子：

{
    xtype: 'actioncolumn',
    items: [
    {
        iconCls: 'x-fa fa-envelope',
    }],
    dataIndex: 'edit',
    text: 'Send E-Mail'
}

我使用NVDA屏幕阅读器-> https://www.nvaccess.org/download/

但是，在鼠标悬停时它无法读取此文本（“发送电子邮件”）。我知道font-awesome可以选择包含aria-label="Send E-Mail"，但是如何将其应用于ExtJS项目？

Answer 1

您尝试过吗：

{
    iconCls: 'x-fa fa-envelope',
    tooltip: 'Send E-Mail',
}

Answer 2

我找不到使“ actioncolumn”兼容的方法，所以我将它们转换为“ widgetcolumn”，效果更好。这样做的不利之处在于，一列中不能有多个“窗口小部件”，因此每个操作都将具有其自己的列，并且该列中有按钮，而不是更优雅的图标。但是，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'
    }
}

对于处理程序，参数现在有所不同，因为它现在是一个按钮（这是我特定的情况，使用记录ID）：

edit: function(button) {
    var grid = button.up('grid'),
        store = grid.getStore(),
        recordId = button.getWidgetRecord().getId(),
        record = store.findRecord('id', recordId);
    //and so on....
}

ExtJS和FontAwesome：屏幕阅读器兼容性

2 个答案: