I have a <div> tag where I’m updating the text every few milliseconds. Visually, I can see the text flashing by, which is good.
I want to make it an aria-live region so I can hear the text flashing by too, but I don’t want JAWS to read every text change. It'll get too bogged down.
So if I change the text 4 times by the time jaws finishes reading the first change, I want jaws to ignore the other 3 changes and to just say the next change (5th change), and so on. The missed 3 changes aren't important.
So I sort of have an aria-live region that's not really alive and it's not really dead. I need some kind of zombie middle ground.
I've tried various combinations of 'polite' and 'assertive' as well as aria-busy but nothing I've tried works.
Any ideas?
You can keep an empty <div aria-live="polite"></div> in the bottom of your document. Then inject a copy of the text you want to say at certain intervals into the aria-live div and then remove the text from the aria-live div a second or so later.
Be careful how you use it though. I could see examples of usage being announcing percentage of loading, or for a live population counter where you may want to announce it every couple of seconds or so.
For the most part though let the screen-reader do what it's meant to do. Sometimes we over-think a solution.
Related
I am trying to use the built in inspector tool in Google Chrome to manipulate the site http://www.di.se (as it probably has one of the most # layouts I have ever seen on a popular website) with around 300 000 visitors daily.
It seems to be mainly built with three HTML frame tags with the names: historyFrame, headerFrame and contentFrame. I can remove the headerFrame that covers a huge part of the view. However, I don't know how to change the contentFrame size so that it will cover the entire screen.
I have tried to add a CSS height property but it does not seem to change anything. If this is solvable I would be very thankful and so would 300000 other users :) Thanks!
The frameset, which is the parent of the frame you removed, specifies the heights for each of the frames, currently rows="0,210,*". So if you remove the header frame, the content frame becomes the second frame and gets a height of 210. By changing this attribute to 0,* the problem should be fixed.
However I'm not able to modify this property in Chrome's toolkit. Maybe this is a limitation of the developer tools of Chrome. After all, frames are old (removed even from HTML5), so maybe they didn't pay much attention to supporting it.
Note though that the top frame contains the advertising that probably pays for the site. If you got this working and all 300.000 users would use your solution, then the site would probably seize to exist, and you got 300.000 unhappy users. So think twice before you do this.
You can do it by:
First deleting the first Frame(header)
and modify this:
from:
rows=".260,*"
To:
rows="1,*"
So you have only the frame you want, no useless data and the frame you want take 100% of the screen.
I have a couple of questions about the problem of hiding text inside an anchor tag and only displaying a background image.
Note to those about to bombard me with links to other articles and tell me that this is a repeat question: I have scoured this site and the web in general and read the solutions (and by solutions I mean mostly hacks) people came up with. What most people seem to be doing (or have done up until recently) was the -9999px hack. Also popular is/was wrapping the text in a span and doing something like this or visibility: hidden.
Now, I personally think that "hiding" the text would really only make sense in the first place if it was hidden dynamically, i.e. displayed only if the background image wasn't loading (for whatever reason). However, all the "solutions" I found effectively remove the text completely or at least hide it permanently so even if the background image isn't loaded, the text still wouldn't be displayed.
So here are my questions:
Why would one want to have text and then permanently hide it at all? Why not just leave the anchor empty - i.e. just don't put any text in it - and only have the image displayed? Why have text and then go through the headache of figuring out how to hide it? What's the point of that? Am I missing something here?
Now that we have CSS3, are there actual non-hacky, dynamic ways to hide text when the background image is displayed and have the text appear when the image - for whatever reason - fails to load? I couldn't find any resources so I am assuming this is not supported but maybe one of you ninjas knows better?
There are different possibilities why to do that:
Search Engines scan the web and also gather content that is visually hidden. The site gets better in terms of semantics and has a higher page rank.
Many visually impaired people rely on content that's read to them by screenreaders. Sometimes text in the alt-tag is just not enough. Background images don't even have such a tag.
To your second question:
To me there is no known way to check if a background-image is successfully loaded and is also shown (a totally different story!). CSS only styles content according to defined rules. There may be a javascript way to do it, but in my opinion it isn't worth the cost because mostly this text isn't really a fallback. It has a different purpose as stated above.
quick question regarding the TextEvent:LINK.
It stopped working recently when I switched my interface and I'm not quite sure why or how to fix it.
I have a movie clip which contains a text area and a scroll handler. 3 of these are added to my interface, although only 1 at a time is active in the display, depending on which tab you click.
All of that works fine, but once I change the chat object (textfield and scrollbar) in the display, it seems to stop working, and I'm not quite sure why. I'm not creating new instances all together, just adding and removing from a parent clip upon clicking different tabs.
Any idea what would be or could be causing this? As far as I can tell nothing is over or obstructing the clip containing the text field and scroll bar. The scroll bar actions work fine, which is next to the text field, however there seems to be no action going on as far as clicking links in the text field. I can select text in this text field as well, so I'm a bit confused :<
Thanks for your help.
Edit - Textfield is selectable, I know they need to be for the event to work.
I'm not entirely sure about the layout and the behavior of the project, but from my own bitter experience with TextEvents I learned that the less you mess around with the textfield, the better.
Maybe you should consider hiding the textfield instead of adding/removing it, i.e. changing the way the UI works without actually touching the affected elements in any way whatsoever.
If that's not possible, I'd try "rewriting" the text in the field and reattaching the event listener once the object is made visible again.
Hope you solve it quickly, texts are a pain in Flash.
My question is not language based or OS based. I guess every system is offering some sort of TextOut(text, x, y) method. I am looking for some guidlines or articles how should I implement selection of outputed text. Could not find any info about this.
The only thing which comes to my mind is like this:
When user clicks some point on the text canvas I know the coordinates of this point. I need to calculate where exactly it will be in my text buffer. So I am traversing from the begining of the buffer and I am applying to each character (or block of text) a style (if it has any). After this, I know that after given style the letter has given size. I am adding its width and height to previously calculated X,Y coordinates. In this way, I am traversing the buffer until the calculated position has not reached the point that has been clicked by the user. After I reach the point within range of some offset I have starting point for the selection.
This is the basic idea. I don't know if this is good, I would like to know how this is done for real like for example in Firefox. I know I could browse the sources and if I won't have a choice I'll do it. But first I am trying to find some article about it...
Selecting text is inherently specific to the control which is containing it and the means it stores that text.
A very simple (though questionably inefficient means) is to run the text flow algorithm you are using when clicking on a point and stopping the algorithm when you have reached what is closest to that point. More advanced controls might cache the text layout to make selections or drawing their content more efficient. Depending on how much you value CPU time or memory there are ways to use caches and special cases to make this “hit test” cheaper.
If you can make any assertions (only one font in the control, so every line has the same height) then it is possible to make these tests cheaper by indexing the font layout by lines and then doing simple arithmetic to find out which line was clicked on. If your text control is also using monospace fonts (every character occupies the same width as well as height) then you are in even more luck, as you can jump straight to the character information via a lookup table and two simple divisions.
Keep in mind that writing a text control from scratch is obscenely difficult. For best practice, you should keep the content of the document separate from the display information. The reason for this is because the text itself will need to be edited quite often, so algorithms such as Ropes or Gap Buffers may be employed on the data side to provide faster insertion around the caret. Every time text is edited it must also be rendered, which involves taking that data and running it through some kind of formatting / flow algorithms to determine how it needs to be displayed to the user. Both of these sides require a lot of algorithms that may be annoying to get right.
Unfortunately using the native TextOut functions will not help you. You will need to use methods which give you the text extents for individual characters, and more advanced (multiline for example) controls often must do their own rendering of characters using this information. Functions like TextOut are not built to deal with blinking insertion carets for example, or performing incremental updates on text layouts. While some TextOut style functions may support word wrap and alignment for you, they also require re-rendering the entire string which becomes more undesirable in proportion to the amount of text you need to work with in your control.
You are thinking at a much lower level than necessary (not an insult. you are thinking that you need to do much more work then you need to). Most (if not all) languages with GUI support will also have some form of selectionRange that gives you either the string that was selected or the start and stop indices in the string.
With a modern language, you should never have to calculate pixels and character widths.
For text selection in Javascript, see this question: Understanding what goes on with textarea selection with JavaScript
I like to display more info on certain keywords in a web page. I don't want to send the visitor to another page and I prefer to show the extra info on top of the current page.
The keywords are in an html list. It's basically a list of features and I want to offer more info about the features. So I have two ideas based on having 'More Info' or '?' hyperlinks.
The user hovers on the link and a popup window shows up with the info and goes away when they hover away.
They click on the link, a popup window with an 'X' shows up and they click on the X to close.
Which one offers a better friendlier user experience?
I like #1 because they don't have to click to open and click to close but the disadvantage is that windows might open inadvertently while they are mousing over the page.
Both are pretty annoying, but if I had to pick the lesser of two evils, I'd go with properly done mouseovers.
You can setup Javascript on the page to handle the accidental mouse over, and instead wait for a few seconds before displaying the popup window.
What would your users expect? Try not to break those expectations.
Maybe try a hallway usability study, grabbing a handful of users as they walk past the office, and just ask them to tell you what they would expect. :)
Asking Stack Overflow is a good idea too, but you won't get the advantage of context, which is very important with usability testing.
As a user myself, I find it annoying when I move a mouse and something pops up unexpectedly. Even with a javascript delay (which is better), I still think it's unexpected that something would pop up when I didn't explicitly click on it.
But, that might vary depending on the context of your application.
Personally, I'd go with the click option. There's a standard Way Things Work on the web which says that hovers are for information about the link itself and what action clicking on it will do ("See more comments", "Click for help", etc.), whereas clicking is what actually performs the action.
If you do decide to go with the hover option, make sure that you code it such that users can select the text in the popup. It's really annoying when you just want to copy some useful information somewhere and the GUI hides it before you can reach it.
Adding to what the others have said, I would also prefer the click option.
The problem I have with the hover option is that, and maybe this is just me, if the hoverable area is on the small side, I have a hard time keeping my mouse still enough to keep hovering. The cursor tends to move off the link in the middle of reading and my nice help text disappears.
People don't expect a pop-up on hover - I'd definitely go with the click.
Edit / addition: think about the website you visit every day - text and pictures are (generally) static, and hovering, at most, changes the colour or add underline to a link, or displays a small menu of clickable links.
When clicking on a link, you expect something to happen - a redirect to another page, a pop-up box with information, a form being submitted, etc.
I'm not saying this is the best way to do things, but it is the way 99% of the web works, and asking users to deal with pop-up boxes on hovers or the like is a good way to turn them away. I know I personally don't read any pages with double-underlined links; it's a good indication that an accidental break in scrolling to read the content might end up with my mouse over a link with an advertisement tied to it.
Having a little graphic beside clickable text, or otherwise denoting that clicking will lead to more information is a great way of providing contextual information without frustrating people. For most of the world, pop-ups without clicking still == advertisements or spyware.
Edit / clarification: I don't mean a pop-up in the new window sense, just a lightbox-style javascript pop-up. Don't take the user away from the page, and give them a very visible button to click to close the pop-up. I guess what I'm saying is that people don't expect something to happen without clicking, especially not if it's going to take up more space on the screen.
As a couple of additional precedents to consider, you might want to consider the functionality of the acronym and abbr HTML tags. Both allow you to provide extra information on a particular piece of text in the page, and both work on the "hover" principle.
Points to ponder:
If items are so dense that everywhere you move the mouse something pops up on hover then do NOT do hover!
Can you make hover show very brief info, and have click show more detail? This may be the best of both worlds if it works for you.
Can you have a dedicated box that displays info when you hover? This may be better than any pop-up. Opinions vary...
In the end it's what works for your app, from your users' point of view.