I have following Error message on screen, but its not readable by JAWS version 15 screen reader.
<span aria-live="assertive" aria-invalid="true">
<span class="accessibleText">Error</span>Enter a valid Phone number.</span>
I have also tried role='alert' and aria-atomic='true'properties but its still not readable on Chrome and IE browser.
You need a role="alert" and you need a change to the DOM (text) inside the role="alert" element. Use JavaScript to change the text inside the accessibleText span, or add/remove the entire span from the DOM with JavaScript.
More details here: Jaws doesn't read error message
<span aria-live="assertive" aria-invalid="true">
<span role="alert" class="accessibleText">Error</span>Enter a valid Phone number.</span>
Related
I'm doing something with NVDA (the screen reader) and with aria too, the thing is that i want to make nvda able to read the content that is in a button as a text. For example, i want it to say "Log in dialogue" instead of "dialogue" in the NVDA speech viwer when click on it.
I tried with many aria roles and do things with aria-describedby, but i can't make it work, can someone help me with this? thanks. Here is the line that i'm trying to modify
</div Login Button
Try this:
<a href="%" role="button">
<div aria-hidden="true" class="login-icon"></div>
Login Button
</a>
role="button" will make the anchor link work as a button for screen-readers. When you have an anchor tag with text inside it, you need not give aria-describedby or aria-labelledby. If you want the screen-reader to read out something other than the text you put in the anchor tag (in your case 'Login Button'), use aria-label if its a small text, otherwise you can use aria-labelledby if you want to reference any particular div or h2 or h3 with an id.
If you want to use aria-label, you can do this:
<a href="%" role="button" aria-label="Text other than Login Button">
<div aria-hidden="true" class="login-icon"></div>
Login Button
</a>
I'm using joomla (last version) and just added this template in tinymce :
<a href="/test" class="darkimagediv">
<img src="/images/logo2.png">
<div>
<div>
Test
</div>
</div>
</a>
It displays fine in the popup dialog just before inserting, but when I do it is inserted like that:
<p><a class="darkimagediv" href="test"> <img src="images/logo2.png" /></a></p>
<div>
<div>Test</div>
</div>
<p> </p>
Which is very bad.
I'm superuser and text filtering is off in the global configuration. I don't find any cleanup option in tinymce, so I need to find which script modify my html but I don't even know if I must search tinymce or joomla itself.
If you are pasting code Don't use a rich text editor.
The editor is doing what it is supposed to and correcting your incorrect markup. Either way, if you want to insert markup, incorrect or not, then don't use a rich text editor.
We are re-designing a site and part of that re-design involves making the site accessible to screen readers and the like. I'm using latest version (2.8.0). Here's what's happening --- validation for all text, select and textarea fields in our forms work perfectly. In order to be accessible, checkbox and radio inputs are wrapped in tags. The html for a set of checkboxes looks like this:
<div class="form-group">
<p id="applicant_type_desc" style="margin-bottom: 6px;"><strong>I am: <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">Required</span></strong> <em class="small">(check all that apply)</em></p>
<div class="checkbox">
<label id="applicant_type_patient_desc">
<input type="hidden" name="applicant_type_patient" id="" value="N">
<input type="checkbox" name="applicant_type_patient" id="applicant_type_patient" value="Y" {checked_applicant_type_patient} aria-labelledby="applicant_type_desc applicant_type_patient_desc" data-parsley-multiple="type" data-parsley-error-message="Please specify whether you are a patient, relative, employee or other.">
A patient
</label>
</div>
followed by more checkbox divs without error messages and ended with an end div for the for form-group wrapper.
If I load the form and click 'submit', all the text fields are validated properly. If I add 'required' to the checkbox above, when 'submit' is clicked nothing happens and the form is submitted with no validation at all.
The same thing happens when I try to validate a radio button set as required.
There is some custom jQuery and parsley code which creates a div to hold all the error messages and transforms the error messages into links to the field id so that a screen reader can follow them and focus on the field in error. But imho, this should have no effect on why the form validation doesn't kick in.
I'm absolutely baffled.
FYI - I tried this using an earlier version (2.0.3) of parsley and the validation actually worked, although all my custom error processing was ignored.
Any insight would be greatly appreciated.
As it turns out, parsley handles the errorswrapper element differently for text, textarea and selects then it does for checkboxes and radio buttons.
The starting wrapper element for text, textarea and select contains the parsley-data-id attribute whereas checkbox and radio button elements contain the parsley-data-multiple attribute whether that was generated by parsley or entered manually in the html.
My code was looking for parsley-data-id and, of course the jquery selector failed and generated an error. A colleague was able to spot this for me while we were looking at the page in chrome inspector. Once i saw the error, making a simple adjustment to the form:error event function allowed everything to work.
I just updated Firefox to 48.0.1 from 48.0 and now I'm seeing an issue with the Bootstrap tooltip. Looking at the HTML in Firebug, it appears that Firefox is adding a new <div> at the bottom of the page that is not in the .jsp:
<div id="tooltip404721" class="tooltip fade top in" role="tooltip" style="top: 162.4px; left: 1220.5px; display: block;">
<div class="tooltip-arrow" style="left: 50%;"></div>
<div class="tooltip-inner">Delete</div>
</div>
This only happens if the tooltip is attached to a button - links are not affected. The links and buttons are column elements in a jQuery DataTables table. The tooltip portion of the code for link vs. button is identical.
Link:
<td><a class="btn btn-info btn-xs" href="<c:url value='/recipe/viewRecipe/${recipe.id}'/>"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.view"></spring:message>">
<span class="glyphicon glyphicon-list-alt"></span></a>
Button:
<td><button class="btn btn-danger btn-xs" type="button" id="delete${recipe.id}" onclick="deleteRecipe(${recipe.id},
'<spring:escapeBody javaScriptEscape="true">${recipe.name}</spring:escapeBody>')"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.delete"></spring:message>">
<span class="glyphicon glyphicon-remove"></span></button>
This DataTables-specific setting is in a .js file included on the page:
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
});
Removing the above gets rid of the extra <div> but then the tooltip no longer appears with Bootstrap formatting. Adding data-container="body" to the button itself didn't work either.
Any ideas?
EDIT:
Although I just recently noticed the issue I downgraded to 47.0.1 and still see the problem. I will keep downgrading to find out which version this starting appearing in. I don't think it's my code because the production version has the same problem as my dev version. Also, this does not happen in Chrome but it does in Edge.
I found the problem. I have a function that's applied to all pages that sets the input focus for form pages to the first form control. This is because the menu contains a search input and button, which would otherwise get the focus instead of the first form input.
function setInputFocus() {$(':input:visible:enabled:eq(2)').focus();}
For some reason that I don't remember now I moved the code to toggle the tooltip (see question) above this focus code. That meant that the first button in the first row of the datatable ended up getting the focus, hence the tooltip being visible when the page was displayed. Moving the tooltip toggle after this focus code fixed the problem.
Obviously, I should be more careful about site-wide code that is specific to a particular issue but ends up being applied to all pages...
I am currently using selenium webdriver 2.35 for firefox being programmed in ruby. I am having an issue where I can not get the webdriver to focus correctly on an input field element. By default, there is some gray text already populated in the field. When a user clicks on this field, that gray text is supposed to disappear and allow the user type into field.
Using the webdriver, I would send the click command to that element and it would click, but nothing would visually happen. I also checked to see the active element and in fact it is that field(after clicking on the element). (I used this to check: driver.switch_to.active_element)
Also, I would send keys to that field and it will show up gray either appended to the default text or by clearing that field and sending those keys
Methods that I used but did not work
1) driver.find_element(element).click
2) driver.action.move_to.element.click.perform
Does anyone have any suggestions? (I know that this may sound ambiguous but feel free to question me need any more information)
I am not sure if this helps or not but here is the html from before the click(also the same result after using the click function in selenium
This is the html before the click (and the result after using the selenium click function
<html>
<td id="ext-gen273" class="x-toolbar-cell input-container">
<div id="ext-gen274" class="x-form-field-wrap x-form-field-trigger-wrap" style="width: 467px;">
<input id="ext-comp-1024" class="x-form-text x-form-field autofoo-search-txtbx foo-search-dropdown x-form-empty-field" type="text" name="ext-comp-1024" autocomplete="off" size="24" style="width: 398px;"></input>
</div>
</td>
</html>
This html appears after is after the user manually clicks on the field.
<html>
<td id="ext-gen273" class="x-toolbar-cell input-container">
<div id="ext-gen274" class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" style="width: 467px;">
<input id="ext-comp-1024" class="x-form-text x-form-field autofoo-search-txtbx foo-search-dropdown x-form-focus" type="text" name="ext-comp-1024" autocomplete="off" size="24" style="width: 398px;"></input>
</div>
</td>
</html>
I also noticed that after the user manually clicks on the field, the selenium commands work correctly