Results 1 to 7 of 7

Thread: Accessibility - Not able to add aria tags to components

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60

    Default Accessibility - Not able to add aria tags to components

    ExtJs 5.1, Browsers - IE10, FF 35.0.1


    From past few days we are researching on ADA implementation using ExtJs 5.1 in-order to migrate present ADA complaint project to ExtJs 5.1. Aria tags are not recognized by ExtJs 5.1, expect ariaRole and ariaLabel . we are not able to add any aria tags to the components like ariaDescribedby, ariaLabelledby, ariaLive, ariaHaspopup,ariaAtomic,ariaRelevant etc.


    STAND-ALONE TESTCASE
    https://fiddle.sencha.com/#fiddle/iti

    ADDITIONAL INFO

    Code:
    Ext version tested:
    
    • Ext 5.1 rev 0
    Browser versions tested against:
    • ____
    • IE10
    • FF 35.0.1
    • Chrome 40.0.2214.115
    DOCTYPE tested against:
    • ____
    Description:
    • From past few days we are researching on ADA implementation using ExtJs 5.1 in-order to migrate present ADA complaint project to ExtJs 5.1. Aria tags are not recognized by ExtJs 5.1, expect ariaRole and ariaLabel . we are not able to add any aria tags to the components like ariaDescribedby, ariaLabelledby, ariaLive, ariaHaspopup,ariaAtomic,ariaRelevant etc.
    • In order to let screen reader like JAWS to announce any content changes in a component (aria-live,aria-atomic) or to add any help text for active elements (aria-describedby, aria-labelledby, aria-haspopup) for sighted users we need aria tags to be added to components.
    Steps to reproduce the problem:
    • Add "ext-aria" in app.json to make it Sencha accessibility to apply
    • Using Tab key navigate to "Help" link and ariachange button
    The result that was expected:
    • When navigation comes to Help link the Screen reader JAWS should announce "Help link as popup. Press enter to open the popup and Press Escape to close the list"
    • When navigated to ariachange button and click the button
    • Screen readers JAWS should announce change of disabled button to Enabled.
    The result that occurs instead:
    • ariaDescribedby, ariaHaspopup tags are not rendered to help link, as result of JAWS is not reading help content and has pop up
    • arialIve and ariaAtomic are not rendered to disabled button as result JAWS will in not announcing "Enabled" change

  2. #2
    Sencha - Ext JS Dev Team nohuhu's Avatar
    Join Date
    Jun 2011
    Location
    Redwood coast
    Posts
    402

    Default

    When ext-aria package is included, you can use ariaAttributes object on any component to provide custom ARIA attributes.

    You can find examples of using custom attributes in the ARIA example.

    Regards,
    Alex.
    Regards,
    Alex.

  3. #3
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60

    Default

    Hi nohuhu,


    We tried including "ext-aria package", we are researching from few days on how extent WCAG ADA can be implemented using ExtJs 5.1.0, 5.0.1 and 4.2.2. We raised this bug as custom aria tags are being ignored in all versions mentioned above. only ariaRole and ariaLabel are accepted rest are ignored(in 5.x). We didn't find any example where custom aria tags are used.


    Please point us to any example using any of below attributes ariaDescribedby(aria-describedby), ariaLabelledby(aria-aabelledby), ariaLive(aria-live), ariaHaspopup(aria-haspopup), ariaAtomic(aria-atomic), ariaRelevant(aria-relevant).

  4. #4
    Sencha - Ext JS Dev Team nohuhu's Avatar
    Join Date
    Jun 2011
    Location
    Redwood coast
    Posts
    402

    Default

    I think you are confusing Ext JS properties with element attributes that have ARIA significance. ext-aria package makes use of ariaRole, ariaLabel, ariaLabelledBy, and ariaDescribedBy; mostly because these require some special processing.

    Other attributes do not have corresponding properties because Ext JS does not do anything with these. However you can add ariaAttributes object with any custom attributes you want applied to your component.

    See ARIA example, app/view/Viewport.js and app/view/Wizard.js in particular. Both of these classes use custom ARIA attributes.

    Regards,
    Alex.
    Regards,
    Alex.

  5. #5
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60

    Default

    Hi Alex,


    Thanks for the information, it really helped us. we had one last observation can you please help us.


    Example 1:- ariaAttributes is working fine for xtype = "button", below is the code and inline comments of attributes functioanlity

    Code:
     {
        xtype: 'button',
        text: 'Disabled',
        id  : 'change',
        ariaLabelledBy: 'linkhelpTxt',                         //Not Working
        ariaDescribedBy: 'linkhelpTxt2',                     //Not Working
        ariaAttributes: {
           'aria-live': 'polite',                             //Working
           'aria-atomic': true,                           //Working
           'aria-relevant': 'all',                           //Working
           'aria-haspopup' : true,                       //Working
               'aria-describedby' : 'linkhelpTxt'   //Working   -- Is it recommended to use 'aria-describedby' under ariaAttributes field like this?
         }    
    }
    Example 2:- ariaAttributes is not working for xtype = component and autoEl tag a(anchor), below is the code and inline comments
    Code:
    {
       xtype: 'component',
       autoEl:{
         tag: 'a',
         href:'javascript:void(0);',
             html:'Help popup with aria tags'
       },
       id:'popid',
       ariaLabelledBy: 'linkhelpTxt',                          //Not Working
       ariaDescribedBy: 'linkhelpTxt2',                      //Not Working
       ariaAttributes: {
            'aria-haspopup' : true,                                   //Not Working
            'aria-describedby' : 'linkhelpTxt',                 //Not Working
        },
    }

    Is anything we missed in coding the anchor (link) tag with aria attributes in Example 2.

  6. #6
    Sencha - Ext JS Dev Team nohuhu's Avatar
    Join Date
    Jun 2011
    Location
    Redwood coast
    Posts
    402

    Default

    Hi agarapati,

    Regarding the first issue: ariaLabelledBy and ariaDescribedBy properties should contain valid DomQuery selectors for finding the elements that label or describe the given component, respectively. If you want your component to be labelled by an existing element, provide the selector that finds that element by its id:

    Code:
    {
        xtype: 'button',
        text: 'Disabled',
        ariaLabelledBy: '#linkhelpTxt',
        ...
    }
    Note that in this case you have to either include an element with id "linkhelpTxt" in your HTML markup, or create that element dynamically.

    On the other hand, ariaLabel property should contain the text that labels the given component. This text will be rendered into aria-label attribute.

    Regarding second issue: ARIA attributes are only applied to components with widget roles: http://www.w3.org/TR/wai-aria/roles#widget_roles

    Roles are assigned to components using ariaRole property. The default value for Ext.Component is undefined; Ext.button.Button class defines ariaRole as 'button'. This is why ARIA attributes are applied to buttons but are not applied to plain components by default.

    You can solve this issue either by providing ariaRole property in the configuration blob for your component, or subclassing Ext.Component and then instantiating that subclass.

    Regards,
    Alex.
    Regards,
    Alex.

  7. #7
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60

    Default

    Thanks Alex. You can mark this thread as Answered, I tried but didn't find any options how to do it.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •