How Do I Modify an EXTjs app to be 508 Compliant?

Question

I have recently inherited a web app using the EXTjs framework. I'm not really that familiar with it, but I have been learning it the best I can over the last few months. I have recently been given an assignment to update the entire application to comply with 508 Compliance, that is to say, make the application accessible for those with vision issues. I was given a deficiency list that gives examples where the software doesn't comply for various reasons. I guess I need a little help in understanding how this works. I've looked at the EXTjs documentation and it does say that it has accessibility features available in it, but I haven't really been successful in finding what to do. Those using the application are using the JAWS screen reader if that makes any difference. A few of the things I know that I need to fix are:

• Some elements need to be tagged as a heading so the screen reader can read it programmatically an to give the web page some structure.
• When tabbing around a table/grid the data is read without any context/header information.
• Color is used as a visual cue to indicate action(ie required field). I'm supposing this is for color blindness and some other visual cue needs to be added.
• Modal windows can't be resized or moved by the keyboard.
• Needs a mechanism to bypass blocks of content that are repeated on multiple pages.
• Pages do not have titles(this is a single page app).
• Keyboard operable UI elements do not have a visible indication of focus(radio button group doesn't show focus, even if selected one does).
• Name/State of UI elements in the product can't be understood(ie the name of expand and collapse buttons are read as expand panel or collapse panel by assistive tech without context to what is being expanded or collapsed).

There are many other issues, but this gives some idea of the scope of the changes required. As I have stated above, I've done a lot of examination of the EXTjs documentation at their site as well as google searches on how to make applications more accessible. But I'm not really seeing what I need. Much of this application is just configuring EXTjs templates and then loading them with much of the meat of the application being handled by the EXTjs built in js code.

I would appreciate any help, useful sites with examples, or code snippets on how to accomplish some of this. I'm hoping that once I get started with some examples, I can just go on from there.

Thanks.

Answer 1

Most items come with aria support. Personally I would add look into each component and add an automated aria support. E.g. button ==> aria.label = button.text

Take a look at ariaAttributes, ariaDescribedBy, ariaLabel and ariaLabelledBy. Some have ariaErrorText, ariaHelp.

Next take a look at tabIndex. You want to ensure that you can use TAB to jump through the fields, buttons, ...