We Keep Coding

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

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.

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, ...

Should I inject style tags into the head dynamically or include include style tags in the body?

I have some html content that gets embedded into a page via a server side call. So, when the page's html is being compiled on the server, a call is made to another server to return some html, which is then embedded within a div somewhere in the body. The problem is, this content contains it's own css. So, I wrote a script to inject style tags into the HEAD on ready, which works fine on desktop browsers. However, on mobile devices there's a fairly significant flash of unstyled content. I know that you're technically not supposed to include style tags in the body, but in this case would it yield better results to just include them in the body instead of injecting them into the head?

In this case, it sounds like the right solution is to fix up your architecture so that the server-side compiler can include CSS for the remote page in the page head. This probably involves separating the CSS of the remote page(s) out of the markup there and then grabbing it as a separate file to be included in the page head during compilation.
Since the right solution is not always feasible given a myriad reasons, compromise is often required. Leaving the CSS in the remote markup, if it produces the result you desire, could be the best solution for you. Or perhaps some other hack to get the CSS into the head server-side could be appropriate. You need to decide if it is worth the effort to do any of these things, if they are possible for you to accomplish given your constraints.

Some discussion here. In my experience a lot of enterprise content does it. Does that mean it's the RIGHT thing to do? I dont know. But it's certainly not frowned upon in my experience.
Source: https://www.w3.org/wiki/The_web_standards_model_-_HTML_CSS_and_JavaScript
Why separate?
Efficiency of code: The larger your files are, the longer they will take to download, and the more they will cost some people to view (some people still pay for downloads by the megabyte.) You therefore don’t want to waste your bandwidth on large pages cluttered up with styling and layout information in every HTML file. A much better alternative is to make the HTML files stripped down and neat, and include the styling and layout information just once in a separate CSS file. To see an actual case of this in action, check out the A List Apart Slashdot rewrite article where the author took a very popular web site and re-wrote it in XHTML/CSS.
Ease of maintenance: Following on from the last point, if your styling and layout information is only specified in one place, it means you only have to make updates in one place if you want to change your site’s appearance. Would you prefer to update this information on every page of your site? I didn’t think so.
Accessibility: Web users who are visually impaired can use a piece of software known as a “screen reader” to access the information through sound rather than sight — it literally reads the page out to them, and it can do a much better job of helping people to find their way around your web page if it has a proper semantic structure, such as headings and paragraphs. In addition keyboard controls on web pages (important for those with mobility impairments that can't use a mouse) work much better if they are built using best practices. As a final example, screen readers can’t access text locked away in images, and find some uses of JavaScript confusing. Make sure that your critical content is available to everyone.
Device compatibility: Because your HTML/XHTML page is just plain markup, with no style information, it can be reformatted for different devices with vastly differing attributes (eg screen size) by simply applying an alternative style sheet — you can do this in a few different ways (look at the [mobile articles on dev.opera.com] for resources on this). CSS also natively allows you to specify different style sheets for different presentation methods/media types (eg viewing on the screen, printing out, viewing on a mobile device.)
Web crawlers/search engines: Chances are you will want your pages to be easy to find by searching on Google, or other search engines. A search engine uses a “crawler”, which is a specialized piece of software, to read through your pages. If that crawler has trouble finding the content of your pages, or mis-interprets what’s important because you haven’t defined headings as headings and so on, then your rankings in relevant search results will probably suffer.
It’s just good practice: This is a bit of a “because I said so” reason, but talk to any professional standards-aware web developer or designer, and they’ll tell you that separating content, style, and behaviour is the best way to develop a web application.
Additional stackoverflow articles:
Using <style> tags in the <body> with other HTML
Will it be a wrong idea to have <style> in <body>?

Best practice - pre-write HTML in document with display:none, or create with JS?

I am developing a large scale HTML5 app, and I really wonder about this issue. I will have a lot of dialog boxes and tabs that will open by user interaction.
I wonder what is the best practice - writing all the dialog boxes and tabs in the HTML document with display:none to all of them, or create these HTML sections on the fly with JS or jQuery every time the user making the relevant interaction.
What is better in terms of performance, ease of development, readability, etc?
Any help will be appreciated.

I'll try to address this question as good as I can.
1 - As I said in the comments, Avoid inline styling.
First and foremost this is because inline styling voilates DRY.
Having to repeat the same thing over and over again for this is very bad for maintenance and for developing since instead of changing code once you have to change it at ~100 places.
2 - Avoiding inline styling is also good for accessibility, some screen readers and search engine crawlers do indexing work and reading work based on css selectors and thusly using inline styling will force them to either ignore or misintrepret things.
3 - When working as developers it's easy to do inline styling "just for the fun" but what you're actually doing is mixing concerns. HTML is the content and CSS is the design.
Mixing these two usually leads to headaches and making my job as a developer that comes after you a pain in the effin ass since I have no idea what's styled and how.
Now, onto performance.
When you use inline styles, what you're telling the browser is basically "hey, for every page page view apply these styles to all of these elements." Now, this just became really apparent why this is bad.
You have no ability to cache and store your css and basically forces the browser to rerender your styles every time. Using an external CSS file will actually help you speed up your site since the browser caches it.
That was that for the css part.
The javascript you had asked about.
As I said, hide things with css and show with javascript. Now why do you want to do this instead of pulling everything in?
Well, you can do both. If you're only a webbrowser experience then you can do either, it doesn't matter. I myself prefer to have stuff in the DOM because it relates to content and if you're a large app having dozens of dozens of ajax calls will only make it harder for maintenance. I believe if you have to ajax stuff in make sure it counts and is logical and not just for the kicks (I think this applies if only you have jQuery and plain javascript at your disposal).
If you're working with backbone.js, for example, it's based on views and introduces some form of "MVC" into your frontend enabling you to have views with subviews that can pull content in from the server.
Hope that helps a bit with making a decision! :)

I would say it depends on how many tabs your application has and how big these are.
Big content inside the tabs mean that the application will take long to load when started and consume much ram. If this is the case, I suppose to load them as needed.
Small content inside the tabs will load fast, so load everything at once to increase performance when the tabs are clicked.
Don't forget to run some tests on older computers with a slow internet connection to see how your application behaves. Not everyone has the newest and fastest hardware.

VS Extension to manipulate HTML / CSS

I am looking to enhance my programming experience and I believe I can do that by creating a Visual Studio (2012) extension. I have started to dig into the documentation on MSDN, but it's dense and I am working through it.
I had a few questions:
Is an extension the correct approach for the scenario described
below?
If so, any idea which namespace I should start digging into?
Any sage wisdom/links RE: "pitfalls" or "gotcha"?
The Setup
I have a block of HTML and it has some inline CSS on certain elements. I'd like to right-click on the element and apply the inline code to a new or existing stylesheet (CSS).
The Code
<div>
<div class="ui-bar-d ui-bar" >
<span class="WBHeaderDetail" style="margin-left: 5px; margin-right: 5px;">
Name: <em class="WBHeaderDetailValue" style="text-decoration: underline;">#ViewBag.JobName</em>
</span>
<span class="WBHeaderDetail" style="margin-left: 5px; margin-right: 5px;">
Status: <em class="WBHeaderDetailValue" style="text-decoration: underline;">#ViewBag.Status</em>
</span>
<a data-role="button" data-theme="b" data-icon="check" data-inline="true" data-mini="true" >Save</a>
</div>
</div>
Arguably, the operation that extension would expose could grab a reference to a given element and inspect for inline CSS (style tag), remove it from the element, and then append that CSS to a new or existing stylesheet in the project/solution. Whether or not the element already has a value for the 'class' attribute could impact the vendor selected for this project.
UPDATE
Saw this on: http://www.asp.net/vnext/overview/aspnet/whats-new
Smart Tasks
In Design view, complex properties of server controls often have associated dialog boxes and wizards to make it easy to set them. For example, you can use a special dialog box to add a data source to a Repeater control or add columns to a GridView control.
However, this type of UI help for complex properties has not been available in Source view. Therefore, Visual Studio 11 introduces Smart Tasks for Source view. Smart Tasks are context-aware shortcuts for commonly used features in the C# and Visual Basic editors.
For ASP.NET Web Forms controls, Smart Tasks appear on server tags as a small glyph when the insertion point is inside the element:
Can I get my code into that dialog?
THANKS!

I made a small VS extension last year for class that turned out pretty well. It had to do with sorting, formatting and re-organizing C++ code files. It's a little different than what you want to do, but I can suggest that you take a look at CodeMaid. It has a surprising number of features, and since it's open source, the source code really helped me out when I was working on my extension.
Unfortunately, you're working with HTML and Visual Studio only provides the code model (basic AST) for C# and a small bit of C++. You're unlikely to get any help from visual studio with HTML editing.
So I would do 2 things. First, look at these tutorials. They'll help you create the base for your extension and get you familiar with the API. (You'll likely have to look for others to augment your knowledge, as MS tutorials aren't the greatest.) Second, polish up on your regular expressions. The best way to complete what you want is probably to parse the file yourself and locate all instances of inline style tags. Then add a right-click menu item and locate the appropriate tag when you need to.
But again, I would start with the basic tutorials. The VS extension API is a bit odd, so you'll probably want to get used to it by doing simple stuff first.
Good luck, you'll need it. :p
EDIT: I know this doesn't answer your question directly, just offering a bit of advice.

Yes a VSIX is the way to go.
You can take a look at some of the code from Web Essentials. Web essentials does something similar to what you want to do.
The following is a link to the CSS sorter on github: https://github.com/madskristensen/CssSorter
And this one is a link to the HTML ZenCoding feature:
https://github.com/madskristensen/zencoding
Since both of them involve dealing with HTML, CSS you could get a lot of information looking at the code. The only difference with your project is that you're actually targeting both at the same time and are looking into accessing multiple files. Unofrtunately, for HTML and CSS I don't know wether there's a built-in parser available.
There are a few packages availble on NuGet though, so you could try these out:
ExCSS Stylesheet Parser: http://nuget.org/packages/ExCSS/
HtmlAgilityPack: http://nuget.org/packages/HtmlAgilityPack/
I haven't worked with these packages directly, but I guess you'll have to try them out and see if it fits.
As for the smarttasks: this is normally a part of the control designer and I don't think it's appropriate for what you want to do. I would just add your extension to the context menu

javascript and seo [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
I have a javascript snippet that clients can put on their webpages that loads some text associated with embedded flash objects (like Slideshare presentations) on that page. Does Google crawl this type of content? Will this provide any SEO benefit? If not, what else should I consider. I don't want to force people to embed the actual content since they typically have multiple pages that use this script and the there is typically a lot of text. Any suggestions?

google does execute on page javascript quite well, but the current seo consensus is that external javascript (i.e.: asynchronous loaded content )does not count as part of the page.
this means, that script (the loaded text) is not seo valuable.
if you want the text to be valuable it must be onpage, means it must be in the html of the page, so basically you will have to go with the big (text already included) js snippet.
but before you rush to make it "seo-valuable"e please be aware that duplicate content is usually not valuable. so if the text shows up on different pages it might not be useful to include the text at all.

Flash is popular on the Web, but each presents challenges to the search engines in terms of indexing the related content. This creates a gap between the user experience with a site and what the search engines can find on that site.
It used to be that search engines did not index Flash content at all. In June 2008, Google announced that it was offering improved indexing of this content
(http://googlewebmastercentral.blogspot.com/2008/06/improved-flash-indexing.html).
This announcement indicates that Google can index text content and find and follow links within Flash files. However, Google still cannot tell what is contained in images within the Flash file. Here are some reasons why Flash is still not fully SEO-friendly:
Different content is not on different URLs
This is the same problem you encounter with AJAX-based pages. You could have unique frames, movies within movies, and so on that appear to be completely unique portions of the Flash site, yet there’s often no way to link to these individual elements.
The breakdown of text is not clean
Google can index the output files in the SWF file to see words and phrases, but in Flash, a lot of your text is not inside clean or tags; it is jumbled up into half-phrases for graphical effects and will often be output in the incorrect order. Worse still are text effects that often require “breaking” words apart into individual letters to animate them.
Flash gets embedded
A lot of Flash content is only linked to by other Flash content wrapped inside shell Flash pages. This line of links, where no other internal or external URLs are referencing the interior content, means some very low PageRank/link juice documents. Even if they manage to stay in the main index, they probably won’t rank for anything.
Flash doesn’t earn external links like HTML
An all-Flash site might get a large number of links to the home page, but interior pages almost always suffer. For embeddable Flash content, it is the HTML host page earning those links when they do come.
SEO basics are often missing
Anchor text, headlines, bold/strong text, img alt attributes, and even title tags are not simple elements to properly include in Flash. Developing Flash with SEO in mind is just more difficult than doing it in HTML. In addition, it is not part of the cultural lexicon of the Flash development world.
A lot of Flash isn’t even crawlable
Google has indicated that it doesn’t execute external JavaScript calls (which many Flashbased sites use) or index the content from external files called by Flash (which, again, a lot of Flash sites rely on). These limitations could severely impact what a visitor can see versus what Googlebot can index.
Note that it used to be that you could not test the crawlability of Flash, but the Adobe Search Engine SDK does allow you to get an idea as to how the search engines will see your Flash file.

You can have the content on an external page.
If you don't want Google to crawl it, block it with robots.txt
If you don't want Google to index it (possibly a better option) use x-robots or noindex in the head.
Whether you use javascript to pull it into the page, iframes, or both really comes down to implementation and what the included page may need to access on the page, tracking, sessions etc.

Although google does not crawl flash and java script so well but these are not the only things crucial for SEO. There are many other things which matters such as keyword density, quality of content, inboubd and outbound linking, titles and content should be well managed with proper tags etc. So if flash/java script is necessity then use it but do not use it in excess.

Google is not efficient at reading or indexing flash elements. If I had to publish content like slideshare, I would produce a PDF. This can be indexed with no problem, it could drag traffic to my website.

Google crawls Flash objects to some extent. But in my experience a best solution (if Flash is imminent) is to use SWFObject for alternative HTML text. This will make your Flash and your Site 100% Google friendly and, more importantly, user friendly.
For more information go here:
http://www.adobe.com/devnet/flashplayer/articles/alternative_content.html

People read way too much into what Google will think about the technology or specific code they use on their site. If you're on the up-and-up and not using the code to cloak, deceive visitors or hijack sessions...you're going to be just fine. Will you rank better if you subbed all text for Flash? Maybe a little, but at the end of the day it's the quality of your content (yes, even if it's not text-based), the number of people that find it useful (via high quality links) and other small factors.
8 years ago, your answer would have been more valid for not including JS, but it just doesn't matter much anymore, Google treats navigable websites the same and ranks primarily around "quality", not usability excessive keyword rich text.