Ext.net 3.1 Ext JS 5.1 Accessibility ext-aria

**Intellica** · Jul 05, 2015, 5:35 PM

looking at the Sencha documentation is says in ext js 5+ the ext-aria package is a separate cmd package

"As of Ext JS 6+, ARIA functionality integrates directly into the component life-cycle. This means you wonâ€™t need a special â€œariaâ€ package to get correct ARIA behavior. Applications will now support screen readers (like JAWS) without the need for special inclusion.

However, in Ext JS 5, the â€œext-ariaâ€ package is a separate Cmd package that provides support for ARIA States and Properties. The â€˜ext-ariaâ€™ package should be included in the Sencha Cmd generated app.json fileâ€™s requires block like any other package."

Looks like ext.net 3.1 comes with ext js 5.1. I was able to export the ext-aria package using the Sencha Cmd tool but I don't know how I would get it linked into ext.net? We need as much 508 support as we can get. This is the link I was reading: https://docs.sencha.com/extjs/5.1/co...ssibility.html

any help greatly appreciated!

thanks!

**Daniil** · Jul 09, 2015, 10:03 AM

Hi @Intellica,

Welcome to the Ext.NET forums!

That is a good question, thank you.

Looks like ext.net 3.1 comes with ext js 5.1.

Yes, that is right. To be more specific, it comes with ExtJS 5.1.0. Currently, we are preparing Ext.NET 3.2.0 release with ExtJS 5.1.1.

Currently, we don't have easy settings to enable ExtJS extended ARIA support, but it is a must-do for our next major release that will be based on ExtJS 6.

As for Ext.NET 3, it is still not difficult to get full ExtJS ARIA support.

The ARIA package is a combination of the JavaScript file and CSS files (the ARIA theme). You can easily add the required files on the page.

To attach a JavaScript file, you need to add this into the page's <head>.

<script src="ext-aria-debug.js"></script>

The file is in ext-5.1.x\packages\ext-theme-aria\build\.

To reuse the ARIA theme, please do:

<ext:ResourceManager runat="server" ThemePath="aria-theme/ext-theme-aria-all.css" />

The aria-theme folder is the ext-5.1.x\packages\ext-theme-aria\build\resources\ folder.

Example

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script src="ext-theme-aria-debug.js"></script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" ThemePath="aria-theme/ext-theme-aria-all.css" />

        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>

        <ext:Button runat="server" Text="Button" Handler="Ext.Msg.alert('Greetings', 'Hello!');" />
    </form>
</body>
</html>

Hope this helps.

**Daniil** · Jul 10, 2015, 10:14 AM

We created an Issue to incorporate the ARIA theme into Ext.NET.
https://github.com/extnet/Ext.NET/issues/831

And the theme has been added in the revision #6470.

Now it is possible to just

<ext:ResourceManager runat="server" Theme="Aria" />

and you'll have the page with the ARIA theme. As usual it is possible to set a theme globally in Web.config.

Also the special ARIA JavaScript package will be included automatically with enabling the ARIA theme.
https://docs.sencha.com/extjs/5.1/co...l#ARIA_Package

That all is meant to help you and others to create highly accessible applications, meet the Section 508 and ARIA compliance requirements and support screen readers (like JAWS).

**Intellica** · Jul 14, 2015, 5:01 PM

is there an easy way to get Aria support without using the theme? my limited understanding is that ARIA is a set of special accessibility attributes which can be added to any markup. screen readers like JAWS can use the "aria attributes" to read back text to the user.

I'm not sure the aria theme will work for us but I think having the aria attributes work would be of great benefit....

**Daniil** · Jul 14, 2015, 5:10 PM

Probably, attaching this JavaScript file on the page should suite your needs.

ext-5.1.x\packages\ext-aria\build\ext-aria-debug.js

**Intellica** · Jul 14, 2015, 5:32 PM

thanks I'll play with it and looking forward to any future enhancements in this area.

**Intellica** · Aug 22, 2015, 2:19 PM

well i spent allot of time playing with this and now have a better understanding of how it all works. even if you get the ext-aria linked in it doesnt mean other themes beside the aria theme automatically get the ability to fire correct aria states. I was able to play with some of the controls using javascript and wire up some aria states, but I see why extjs just pushes the aria theme, as its already all wired up. it looks like this theme has improved over previous versions and my app seems to work nicely when switched to the aria theme. Im going to test it with JAWS on monday. if it works my plan is to give the user a way to switch to the aria theme at login and everyone else can use the default theme (which has much improved keyboard support over previous versions!)

as an example you can see in the image that when using the Aria theme, aria properties and states are indeed working....

Click image for larger version.

Name: aria1.png
Views: 75
Size: 4.6 KB
ID: 24162

now what would be nice is if extjs just correctly wired up aria to the other themes.

**Daniil** · Aug 24, 2015, 7:46 AM

even if you get the ext-aria linked in it doesnt mean other themes beside the aria theme automatically get the ability to fire correct aria states

Yes, it looks like that something is going to work with the ARIA theme only. Though, I am not sure what exactly and why. Could you, please, demonstrate the difference with some simple test case? Like there is the only component on the page. The ARIA JavaScript is attached via <script>. And if change the theme from Aria to something else, then something changes. I would like to understand better what this "something" is. And what are the specific things in the ARIA theme. That is mostly for my understanding. If you don't have time/desire to come up with a sample, please disregard.

it looks like this theme has improved over previous versions and my app seems to work nicely when switched to the aria theme.

That is great to hear!

Im going to test it with JAWS on monday.

Looking forward to hear the results.

as an example you can see in the image that when using the Aria theme, aria properties and states are indeed working....

Does the presence of those attributes mean that it is working?

I see role="tab" and aria-selected="false" attributes even if I don't use the ARIA theme, but just attach the ARIA JavaScript file.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script src="ext-theme-aria-debug.js"></script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Theme="Crisp" />

        <ext:TabPanel runat="server">
            <Items>
                <ext:Panel runat="server" Title="Tab 1" />
                <ext:Panel runat="server" Title="Tab 2" />
            </Items>
        </ext:TabPanel>
    </form>
</body>
</html>

For some reason I don't see the aria-hidden="false" attribute, but it doesn't appear with the ARIA theme as well. Probably, it is because of your test differs from my one.

now what would be nice is if extjs just correctly wired up aria to the other themes.

I didn't find any clarifications on Sencha's plan on that matter. Though, as far as I can see they put quite a lot of efforts into ARIA support.

**Intellica** · Aug 24, 2015, 1:37 PM

I see role="tab" and aria-selected="false" attributes even if I don't use the ARIA theme, but just attach the ARIA JavaScript file.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script src="ext-theme-aria-debug.js"></script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" Theme="Crisp" />

        <ext:TabPanel runat="server">
            <Items>
                <ext:Panel runat="server" Title="Tab 1" />
                <ext:Panel runat="server" Title="Tab 2" />
            </Items>
        </ext:TabPanel>
    </form>
</body>
</html>

hmm interesting. can you wire up a combobox using the default theme and then see what it does in your environment?
just something like this:

<ext:ComboBox ID="mycbo" 
            runat="server" 
            Editable="false" 
            FieldLabel="My Label" 
            Padding="2" 
            LabelWidth="120">
       
        <Items>
            <ext:ListItem Text="One" Value="-1" />
            <ext:ListItem Text="Two" Value="2"  />
            <ext:ListItem Text="Three" Value="1" />
        </Items>
         <Listeners>
        </Listeners>
        </ext:ComboBox>

in my testing when you try to scroll through the combo elements without the aria theme applied it does nothing as far as telling the screen reader you are scrolling through the items. if I switch to the aria theme I can see aria events fire as i use the keyboard to go through each item in the combobox.
i'm swamped right now so I wont be able to do an example anytime soon :)

**Daniil** · Aug 25, 2015, 8:32 AM

Sorry, I am not really sure how to test it. To be more precise, how to determine the aria events are being fired. Do you need a special device to test it - a screen reader or such? I would appreciate if you guide me. Just to clarify. Yes, I am trying to help with ARIA, but I am not really an expert here.

Thread: Ext.net 3.1 Ext JS 5.1 Accessibility ext-aria

Thread Tools

Search Thread

Display

Ext.net 3.1 Ext JS 5.1 Accessibility ext-aria

Similar Threads

[CLOSED] accessibility for Ext.Net

[CLOSED] Which accessibility standard supported by Ext.Net

Ext.NET HTML compliant code (and accessibility)

Posting Permissions

Sitemap

Downloads

Resources

Thread: Ext.net 3.1 Ext JS 5.1 Accessibility ext-aria

Thread Tools

Search Thread

Display

Ext.net 3.1 Ext JS 5.1 Accessibility ext-aria

Similar Threads

[CLOSED] accessibility for Ext.Net

[CLOSED] Which accessibility standard supported by Ext.Net

Ext.NET HTML compliant code (and accessibility)

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us