how to make screen readers read entire page when angular changes states? - javascript

Requirement: on each page change the screen reader must read the entire page content.
We use firefox+NVDA to do our testing, and since angular doesnt "change pages" we have tried the following to make it read the entire page when changing states:
aria-live="assertive"
This for the most part read the changes in text in our site,but it only reads what its being added, in our case we have a table being filled with ng-repeat and it reads the information being added but without any context (it doesnt say what row or column is being read)
Another issue was forms, when being filled by angular, the screen reader will read it before they were populated by angular, this was solved with a $timeout but still when aria-live reads the changes it would skip some parts, and if we added aria-atomic to force read, we had some selects with multiple options, and those were read (all of them, we have more than a hundred options). which is not how screen readers read, they only read the first ten options or the ones visible when you click on them.
Remember that without any aria-live or aria-atomic, when you change states in angular the user is not notified of any changes.
after almost giving up we decided that maybe our focus was wrong, we needed to make each state its own page so we used the following:
function ForceNVDARead() {
$(window).on('hashchange', function () {
location.reload();
});
}
This for every change in the URL will force a reload. This works GREAT, everything was being read correctly, we almost thought this solved everything. Except this causes double requests from the client to our server.
Is there any way to make NVDA read the contents of an angular state like a regular page load, without having to force the reload of the page?
Please dont say use aria-roles only or something like that that doesnt work for this and we already have them, we need the application to read everything when changing states.
ANY help is appreciated, we are about to give up, and restart the project without angular as we are not able to achieve our accessibility requirement.

Requirement: on each page change the screen reader must read the entire page content.
This is fundamentally not a requirement from an accessibility point of view, it is the equivalent of making someone looking at the screen to read everything one line at a time, or use readquick, it is not natural usage.
Screenreader accessibility is acheivable when using Angular, but we need to reset some assumptions:
When you have page updates, the key is to manage the focus, and move to the new content. That allows people to read in their own way, not the way you have been assuming they have to read.
ARIA live is intended for small updates elsewhere on the page (away from the keyboard focus), not the whole content, it is not the answer here, I would drop it completely.
If people are reading forms before they have loaded, that might be a side effect of trying to force the reading with ARIA-live. If not, then trying using focus-management to place focus at the top of the form when it has loaded.
It is probably worth reading a tutorial on NVDA usage, or talking to a 'native' user. I can say from experience you are not using it in the way end users do, so get to understand better what 'normal' interactions are like.
If you drop the use of ARIA-live and go with focus management you'll probably solve most of the issues, but there may well be more questions later from a different point of view.

Related

replacing showModalDialog causes loss of form post functionality

I am replacing the showModalDialog function which no longer works in Chrome and FF. We have many applications using that. The problem is, pop up windows do post instructions to the web server and update the database. For instance if there's a list of accounts on screen and edit is clicked on one of the accounts, an edit page appears as a pop up, posts changes back to the web server, then the list is refreshed with changes. The entire list may be refreshed or just text that changed.
I made a javascript function to do pop up content using overlays. I thought it would be simple to replace showModalDialog calls with the javascript function, but I did not consider post instructions sent by the pop up page to update the database, and complexity to facilitate that. Posting can be done via ajax-like functionality, encapsulated in a set of functions. Before I start writing code to do this I'd like to know what other people have done in this circumstance. Thanks
I wrote some javascript to do everything I want. Since my pop up windows had javascript, I needed to run javascript upon rendering modal content, and also when the modal content went away. This will produce any number of overlays on top of each other, managing each. Content can optionally appear in a frame with a title bar, closely matching the functionality of showModalDialog.
Download at http://bikehappy.org/modal.html . If used, please give feedback saying if it works and provide update suggestions.

Save the state of page. Cookie or session?

I have a little web app (which only has 1 page) that allows user to input and select some options. The input texts and selections will be displayed in another div in the form of table. You may want to refer to the example here: http://jsfiddle.net/xaKXM/5/
In this fiddle, you can type anything and after you clicked submit it will get the text input and append them to another table #configtableTable
$('#labels #labelTable tr:last').after(addmore);
$('#configtable #configtableTable tr:last').after(displaymore);
I'm using cherrypy as a mini web server (and thus major codes are written in python) and i know that it has session here but i have no idea how to use it at all as the example given is not really what i want to see.
FYI, i'm not using PHP at all and everything is in a single page. i simply show and hide them. But I want the page to remain as showing #configtableTable and hiding #labelTable even after refresh. Note that the fiddle is just part of the web app which will only show all these after getting a reply from another device.
Not sure about cookie because all the links i've found seem broken. How about jQuery session? Is it applicable in my case? I need some examples of application though :(
okay, to conclude my questions:
1. can i save the page state after refresh? and how? which of the methods mention above is worth trying? is there any examples for me to refer? or any other suggestions?
2. can i simply DISABLE refresh or back after reaching a page?
Thanks everyone in advance :)
Don't disable Refresh and / or back navigation. It's a terrible idea - user's have a certain expectation of what actions those buttons will perform and modifying that leads to a bad user experience.
As for saving state, while you could use session or cookies, if you don't need that data server side, you can save the state on client side as well.
For example, you could use localStorage
Alternatively, you could create an object out of the data in the table, JSON.stringify() it and append it to the url like this: example.com#stateData.
In case of either option, at page load, you'd have to check if there is state data. if you find there is, then use it to recreate the table, instead of displaying the form.
The disadvantage of the first, is that not all browsers support localStorage.
The disadvantage of the second is that URLs have a length limit and so this solution won't necessarily work for you if you're expecting large amounts of data.
EDIT
It appears that Midori does support most HTML5 features including localStorage however, it's turned off by default.. (I'm trying to find a better reference). If you can, just point Midori to html5test to see what HTML5 features it supports.

Applying Choices in Fields using View in Lotus Domino Web application

I can't quite figure out a work around for using "Use view dialog for choices" in a web based application.
My Question is how can i convert this settings in my field in the Control Tab then Choices, in choices "Use view dialog for choices" then Use current database and access view and a specific column.
Thanks in advance :)
"Use view dialog for choices" is almost always a way to get around the restrictions on the return value of a formula. For instance, you'd use it when #DbColumn in a choices formula for a listbox or dialog list choices formula would cause an error.
The upshot of that is that there's no "one-shot" workaround for the web. A direct functional replacement would be to open the view in a pop-up window or overlay div, and attach some JavaScript to the view in order to override the default web behaviour and force the return of values to a field on the main document. This approach will work well, but it may require server settings that allow the entire view to be served at once (the maximum lines to display per page will probably be less than you need), and it's subject to breakage if the HTML used to display the view ever changes.
You can use LotusScript or Java in a WebQueryOpen agent to populate a conventional widget (the list of a element) in a Rich Text field, either using PassThru HTML or a "Treat contents as HTML" form. That would involve getting the view, then doing a document-by-document (or category-by-category) run through the view index to get the column values you need. (If you take this approach, use the ColumnValues rather than the document field name to retrieve the values -- the cost of opening the document to read the values is high, and your code will take many times longer to run.)
You can also get the view as need using an AJAX request and a ?ReadViewEntries query, which will return an XML representation of the view. Again, you may have to have the maximum view lines per page limit upped in order to get the amount of data you need. You can get around that, though, by using a "suggest" method that doesn't begin retrieving data until the user enters at least one character into the field.
All of these approaches mean using a separate form for the web. That's easy enough -- you simply create a form with the same alias (or name, if you're not using aliases) as the one you're using for the Notes client. In the list of forms in Designer, you can use the hidewhen tab to hide one from the Notes client and the other from the web. (Note that you can create an additional form for mobile devices the same way if necessary.)
I can't get more specific than this with the information at hand. If this is insufficient to point you in the right direction, then edit your question to be more specific (and post a comment to this reply -- I don't spend a lot of time on SO, but I do spend time on other StackExchange sites, so I'll be notified).
Unfortunately, you have to develop it yourself.
http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=AJAX%20Name%20Picker
AJAX-based name picker is a good start I guess.

Avoiding too many submits to the page

I have an HTML page in which a table with innumerable no of cells are placed all over the page. In detail a employees 24 hour day schedule is divided into 30 min cell means 48 cells in row by 100 employees on average. Each cell on click opens a popup which on submit submits the whole page again.This is been in use since ages but a new client wants this should happen after all the random popups modfications are complete(means all changes should happen only once). This is mostly written in java,javascript with a custom framework.My qusetion is what is the dual approach for this kind of situation. Most generic answeres I researched is AJAX implementation but i feel some tweaking inside the javascript might fulfill the requirement.
Without AJAX, the only solution I can think of is not submitting the form every time one value is changed, but having a "Save" button that saves them all at once.
However, AJAX would be the best solution. All you do then is submit a iny amount of data to the server and that is dealt with, all while the user stays on the current page.
Mozilla's tutorial is probably the best on the subject if you're using plain Javascript. The various frameworks like jQuery have really simple built-in functions.
It's not absolutely necessary to use XML. A quick and dirty method for data for which you know the format and that is fairly similar is to just pass the data back and forth using the XMLHTTPRequest object. You could detect changes to individual cells with Javascript and events to store the cells that are modified and their new contents. Create the functions to pass the data back to a server page that updates the database.
This can be extremely fast. In one app I worked on, the HTML was 100k per refresh and this dropped to 5k or less when only the data was updated.
AJAX would definitely be the best solution for that. But seeing as you're hesitant to do a rewrite, two ways of improving come to mind:
Change the architecture of the table so that not every change requires a submit - it should be possible to change as many fields as necessary, and then save them all with one submit action. That depends on the table's structure, though, and the way the saving script works - a rework might be necessary, hard to tell without knowing more.
Create an invisible IFRAME, give it a name, and set all <form> elements' target attribute to that IFRAME. There would still be a submit action for every pop-up, but it would be submitted into the invisible Iframe, while the page does not have to be reloaded, and the user can continue working. This not really a beautiful solution but might do the job, at least as long as there are no file uploads involved.

Use jQuery to append star to menu item if the linked page's content has changed since last visit

I would like to create a similar effect to Apple's Safari 4 Beta Top Sites page -
when when you view it and a page's content has changed since you last visited, it displays a blue star in the top right hand corner to notify you.
I would like to do the very same, but only within my website and instead of an image I would like to append a '*' or some other character to the menu item's link.
I'm sure you would use the jQuery Cookie Plugin, but my scripting is not that advanced and I do not know how to dynamically change the cookie's content. Have I explained properly? How would I do it?
Many thanks in advance
Server side:
Read the website f.ex every minute and save the timestamp if changed content.
Save the users' visit timestamp to the page
Ajax:
Check if the websites update timestamp is newer than your visitors' timestamp, if yes make the star class visible, when the user clicks on the link, make the star disappear and update the users timestamp.
--
Showing a star or an image or whatever with Jquery is not the big deal here, it's a oneliner, the complex problem is to detect website changes, because minor changes can occur, but the main content could not change. The easiest way to do this would be if the website provides rss, then there's probable that the important new content will be published via rss.
You're asking a very vague question. Have you even attempted this? Please try it first then ask for help along the way.
Also, this is not something you necessarily need jQuery for. You could do it completely on the backend. But it's hard to say which solution is best for you without know anymore details.
I guess I would recommend using php and storing the cached page into a db (in other words the user would have a "fav pages" account) then when the user visits the "fav pages" webpage, you would fetch all the users favorite pages and compare it to what has been stored in the db. But for certain pages (for example if they have a date/time string), it would be very difficult to tell if the change was something the user wants to know about. Probably you would need to create a complex algorithm to decide what change is good change and what change is just certain website features.

Categories

Resources