I would like to put a link inside an aria-live region when an event happens.
However when voiceover reads the aria-live region it does it as text and does not read that there is a clickable link.
so my markup when the event happens is
<div role="region" aria-live="assertive">
hello world
</div>
Voiceover reads hello world when the event happens and then puts the context back on the element it was on prior to the event being raised.
Is there a way to make voiceover read the content in aria-live as more than just straight text?
No, that's the purpose of aria-live - it announces the text that changed. No other info, such as the role (link or button or list) is announced.
You can "force" additional text to be read but you have to do it manually. So you could add something like this:
<div role="region" aria-live="assertive">
hello world <span class="sr-only"> link </span>
</div>
so you would hear "hello world link", but I would remove that extra text after it's announced otherwise when the user navigates all the elements manually (by using swipe right with voiceover), they'll hear:
"hello"
"world link"
"link"
(See What is sr-only in Bootstrap 3? for info on the "sr-only" class).
But that's not really a good workaround. Hearing "hello world link" when your new element is added makes it sound like "hello world" is the link when only "world" is the link.
There's probably a better solution for what you're trying to achieve if you explain the UX a bit more.
Related
Well, I have this button
The problem is I need put a default context in my module but since V9 string xpath search was deprecated, that's good I think. But I need replace this button and the only name it has is this thing:
<button name="%(action_account_invoice_payment)d" type="action" states="open" string="Register Payment" groups="account.group_account_invoice" class="oe_highlight"/>
How the heck gonna replace this button if this has no name putting a context?
Sometimes this kind of things are not in the documentation and is very awful the no explanation from the code.
PS: I cannot alter the core code because I have a module for that :(
Is there a way to prompt a user for input (several arguments) and pass the input to a command prompt using HTA/VBScript? The command may take anywhere between 1-2 minutes to run before the next command is executed. This command returns "results" which I would like to display at the bottom of a window in a frame. This could be tricky since I don't know if there is a return code to check for.
For example: The quick brown input1 jumped over the lazy input2
The user would have to input in the textbox "fox dog" delimited by either a space or a comma. If the command executes successfully, it will say "the fox was able to jump over the dog" - if the command fails, it will say "the fox fell short".
Several different commands would have to be executed one after another as long as the previous command completes successfully.
I'm going to answer this as you're not sure where to start and you're thinking about programming an HTA like it is Basic - prompt user -> print answer - when it is actually more like visual basic where you have a form with input boxes and buttons and code that interacts with that form.
The "form" in an HTA is created using HTML (so you need to know some HTML) and the code that interacts with the HTML objects is either Javascript or VBscript*.
I beleive that HTAs offer a great way experiment with programming without having to install servers or import code libraries etc. You can just open Notepad** and start writing code.
You can copy the code below that does roughly what you describe in your question and use it as a starting point to experiment more.
<html>
<style>
#output {font-size:2em;}
</style>
<script language="vbscript">
sub updateText_OnClick
output.innerHTML = "The quick brown " & input1.value & " jumped over the lazy " & input2.value
end sub
</script>
<body>
Brown: <input type="text" name="input1"/>
Lazy: <input type="text" name="input2"/>
<input type="button" name="updateText" value="update"/>
<br/><br/>
<div id="output">The quick brown ? jumped over the lazy ?</div>
</body>
</html>
** You can use something like Notepad++ or another code editing program that will highlight your code and make it easier to spot if you have forgotten to close your quotes "" or misspelled a word.
*VBscript no longer works if you use the meta tag for IE 11 and above.
More example scripts https://gallery.technet.microsoft.com/ScriptCenter/site/search/?f%5B0%5D.Type=SearchText&f%5B0%5D.Value=HTA&x=0&y=0
I recommend the HTA helpomatic as it has useful code snippets.
Using Spring / Thymeleaf i18n, I'd like to create a HTML paragraph message like "Click here", in which there is a link only for the word "here". What is the best way to do this?
The way I tried doesn't look nice and also results in a like break:
In messages.properties file:
error.generic.click=Click
error.generic.here=here
And in the HTML file:
<p th:text="#{error.generic.click}"></p><p><a th:text="#{error.generic.here}" th:href="#{/contact}"></a></p>
Answer
Your way seems okay to me. If you just want to fix the newline issue go ahead with the following one:
<p>
<span th:text="#{error.generic.click}"></span>
<a th:text="#{error.generic.here}" th:href="#{/contact}"></a>
</p>
The span will make "Click" stay on the same line as "here". However i'd just go for a link that say "Click here" instead of just "here".
For example in german you could say "Hier klicken". "Hier" would mean "here" and "klicken" would mean "click". The Problem is that the meaning for the words changed but the position didn't. You would end up with a link saying "klicken" instead of "Hier".
Not recommented
There is another approach, but it has some drawbacks. You could use:
<p th:utext="#{error.generic}"></p>
with the following messages.properties:
error.generic=Click here
The drawback on this one is that you can't use th:href anymore. I would not recomment this way. However this can be helpfull when using no th:* and just plain html tags. So i wanted to mention it.
<a href="#" role="button" >
<span aria-hidden="true"> First</span>
<img src="D:/kk.JPG" alt="First name" width="20px" height="20px"/>
</a>
JAWS reads it as First First name button instead of First name button.
Is this a Firefox issue? How do I resolve this without using aria-label for the outer anchor tag.
The problem, here, is that JAWS does not consider this element itself, but it is used in the calculation of the text alternative for the link.
To solve this, you can try to remove the redundant text from the img alternative name.
I would make a guess on the pertinence of the image alt here as it is inside a link with other text, so you don't have to describe the image but the purpose of the link.
Of course, if you hadn't said so, I would have suggested to use aria-label.
See the following page: webaim.org/blog/alt-text-and-linked-images
In the above example, because text within the link provides the content of the image and the function of the link, the image itself can be given an empty alt value. An image within a link is something very specific: you don't have to consider the image alternative but the link alternative.
According to WCAG, when an image is the only element inside a link, it should describe the purpose of the link. When you use aria-hidden=true on the only other element, you fall in this situation. As a consequence: the alt for this image should describe the purpose of the link and you have to forget about the description of the image. That's being said, as this does not work in Jaws/Firefox, if you can remove the redundant part, it's the best option
I'm having a problem with CKEditor changing my original paragraph formatting with negative side effects.
I start with a basic paragraph loaded into CKEditor using setData():
<p><span style="font-size:50px">My Text</span></p>
... more document content ...
In the editor, I move the cursor to the end of the phrase "My Text" and press enter (with config.enterMode=CKEDITOR.ENTER_BR setting enabled). Inspecting the markup inside the editor I now see:
<p><span style="font-size:50px">My Text<br><br></span></p>
... more document content ...
Then, when I call getData() to pull the contents from the editor and save the document to a database, the HTML extracted by getData() looks like this:
<p><span style="font-size:50px">My Text</span><br> </p>
... more document content ...
This is a problem because while editing, the <br> tag was inside the <span> and was subject to the 50px font size style. The user saw a 50px blank line before the next piece of document content. After saving the HTML to a database and reloading later the <br> tag is now outside the <span> and is not subject to the 50px font sizing and the blank line appears much smaller than before.
The round trip fidelity of the text formatting is not preserved and the user is frustrated by the results.
Can someone help me understand the results I'm seeing with <br> tags being reformatted and moved around during the editing life cycle, and how I might fix this problem?
Using CKEditor v4.4.1