I have a expandable div element which is expanded when user clicks.
How can i make it accessible through screen readers.
Below is my code
HTML
<div class="expandable" (click)="expandItem()" attr.aria-expanded="isCollapsed">
Some content to show on expand
</div>
JS:
expandItem() {
this.isCollapsed = true
}
variable isCollapsed is set to false initially.
I might be showing my javascript ignorance but I haven't seen (click)="expandItem()" or attr.aria-expanded="isCollapsed" before. I have seen onclick="expandeItem()" and aria-expanded="false". But I'll ignore that aspect for now.
First off, your <div> has no semantic meaning so you'll need several ARIA attributes to fix that. But before you do that, consider the "First Rule of ARIA Use", which is essentially to not use ARIA. Use native semantic HTML elements as your first choice if possible.
I'd need more information on your scenario but consider using a real <button> instead of a <div>. It sounds like you might have a "disclosure widget".
If a real <button> is not used, then your <div> will need:
tabindex="0" (to allow keyboard focus to move to it)
a click handler (for mouse users)
a keyboard handler (for keyboard users to use space and enter to select it)
a role="button" so a screen reader announces the proper semantics
(I'm assuming your <div> has a label)
In addition to that, then you need to resolve your aria-expanded issue. In the onclick of the button (or div), just toggle the value of aria-expanded. Since that attribute is a "state" (instead of a "property"), changing its value will be announced automatically by screen readers.
Related
I am working on a form (which comes from the Laserfiche Forms application) and I am trying to change the text on a button that currently reads "Auto Fill" which is very non-descriptive since I have 5 of those buttons.
A little backstory: My code used to work and then all of a sudden one day it doesn't and creates an error where the user can only see the "Submit" button and the title of the form, but as soon as I comment out the below code the form works again but then I have those non-descriptive buttons again.
Is something wrong with my code?
document.getElementById("lookup1573").innerHTML = "Fill Section";
On button inspection, I see something a little odd:
<button id="lookup1573" class="autofill" type="button vo="d">Auto fill</button>
You had a typo in the html:
type="button vo="d"
This is the correct way:
<button id="lookup1573" class="autofill" type="button">Auto fill</button>
Here is the full example:
https://jsfiddle.net/o2er21v0/
That is not a typo but a customer parameter of Forms.
So here is the easy way to use these kind of things with forms:
Firstly, give all of your elements classes. Whilst outside of using Forms it is recommended to use ID's to reference your elements, doing that with Forms will give you more work, tenfold.
To note about Autofill buttons: they only appear on lookups that you have enabled them on (unless you are using an old version of Forms) and will appear next to the last element in your lookup (if that makes sense).
To change the name of your autofill buttons you are going to have to do so after the page has loaded.
Below is example code to do just that, assuming that the element that has the Autofill button you have given it a class of "vendorName".
The "vo" is actually very useful as you can use it to easily interact with your field content in conjunction with your classes. In the below example I am changing what is in the field without having to go into the code and work out what the number of the id is. This makes any code you make more portable as you can then implement it in other projects, projects where you ID numbers will be different. This is so flexible that it does not matter if the "vendorName" element is a normal text input, multi-line text area or a drop down menu as that same piece of code will work the same.
4:
$(function() {
$( ".vendorName .autofill").text( "Fill Section" );
});
5:
$( ".vendorName [vo]").val( "A New Vendor Name" );
Forms already uses the jQuery library so this will work just fine. Remember to give all of your elements a class (I usually name it the same as the variable). You can also give them multiple classes by separating the classes with a space.
I am implementing accessibility for dropdown component, the special feature of my dropdown is it populates values in options menu only while opening dropdown,meaning it on the fly compiles the template and attaches to the dropdown box.
Dropdown HTML:
<div id="dropdown" ng-click="openDropdown()">
<div id="selectedValue" role="listbox" tabindex="0" aria-label="{{selectedVal}}" aria-owns="dropDownMenu">{{selectedVal}}</div>
</div>
DropDown Menu template(which gets compiled and polpulated after clicking dropdown above) :
<div id="dropDownMenu">
<li ng-click="selectItem()" role="option">item1</li>
<li ng-click="selectItem()" role="option">item2</li>
</div>
I am facing two problems
As my #dropdownMenu gets generated on click of #dropdown(dynamic template generation) jaws do not have access to #dropdownMenu when focus comes to #selectedValue so it doesn't announce the number of options etc as in case of a typical selectbox.
I am giving aria-label="{{selectedVal}}" for #selectedValue so on click of arrow keys javascript takes care of updating selectedVal even though #dropdownMenu is not open ,but changed value of selectedVal is not announced by jaws 16.0 ,it only announces it only first time as user tabs into it .Noted that this works fine in jaws 14.0 .
Looking forward for some solutions....
Adding aria-live=polite should fix this.
Is there a reason you're not using a standard select box and populating the option elements with your dynamic content? That would remove the need to update an aria property with the current option, as screenreaders will find it themselves. Also aria-label should be the name of the selectbox (or its purpose) not its selected option. If you were using a HTML select with options you could then remove the tabindex and aria-live as well, since native form inputs have full keyboard and screenreader support by default.
You should probably wait until the element is rendered and appeared in the DOM and only then set the focus to the first submenu item by using a native function .focus(). That will do the job.
But... Make sure that if the request takes too long and the user has already left somewhere else doing something else on the page, that in this case you don't steal his focus to get him back to the dropdown menu otherwise he might be annoyed.
Also instead of tabindex=0 for interactive elements (wherever you use ng-click) I would recommend that you use the actual native elements such as <a> or <button>. That way you ensure that the elements will be focusable both by keyboard but also visually, and react to ALL keyboard keys which the users are used to use and thus expect it to react such as SPACE or ENTER without needing you to implement it manually.
I have a reasonably complex list of Dynamic Div classes which contain various nexted divs to display shop content - the whole thing needs to have a hover state and be clickable (it currently has hover styles applied) and accessible.
I figure I can either approach this by -
1 - Make the containing Div into an Anchor link and style accordingly
2 - Nest an anchor tag within the div class and write a JS function to trigger a click on the anchor when the containing div is clicked.
Whats the thoughts on which is the correct approach?
I would definitely go with the wrapping <a> in that case you don't have to think about setting tabIndex=0, role=link and also you can skip adding the extra JavaScript to make the button clickable and binding the enter key for the same action as well.
Or if the "link" is not taking the user to another location and just show a modal window or some other fancy function you should wrap the <div> with a <button> in that case you can also skip binding the spacebar to the action too, as it is inherited. (But if you really can't do that you should add role=button to the wrapping <a>)
Now you can focus on styling and remember to use both :hover and :focus
It's fine to make the <div> clickable by adding an "onclick" handler. However, you should specify an ARIA "role" attribute (such as role="button" or role="link") as well as specify the "tabindex" attribute (tabindex="0") to make it possible to bring the element into focus when using the tab button on the keyboard.
I have a big page, with full of (server side) generated information organized into "chapters". To allow an easier overview for the user I put a little element with CSS fixed position to the top right corner of the page.
<div class="selector">Goto section within the table: <select
id="chapterselector"
onChange="goto_section('chapterselector')">%SELECTOR%</select>
</div>
The text "%SELECTOR%" is replaced by the server side component to the correct option elements.
function goto_section ( element ) {
element = document.getElementById(element);
window.location = '#Chapter_' + element.value;
}
This is the JavaScript part for now. This works nicely. However one little issue remains:
Users (including me) can use the select menu to jump inside the document, but then often cursor arrow keys would be used to navigate to scroll the page. The problem: after using the select menu, it has the focus, so cursor keys now "scrolls" the possible choices inside the select menu. What I want: after using the select menu, I want it to lose the focus automatically, so cursor keys scrolls the page.
How can I do this? Thanks for any suggestion.
element.blur()
try that after setting the location
This is the problem page I'm developing.
Consider the leftmost column header, with header text "Undr." Here is the simplified html for that column header:
<th class="underlying" onclick="toggleColSelect(this);">
<img class='ad' onclick="toggleColSortOrder(this);">
Undr
</th>
The user can do two things in the column header:
select and deselect the column, by clicking the column header. EDIT: The column is selected when the column header has a yellow background; and unselected when the column header has a white background.
select ascending or descending sort on the column contents, by clicking the up/down-arrow image.
However, clicking the image also selects/deselects the column, which I don't want. When he clicks the image, I want to toggle the sort order only; I don't want to toggle the select on the column.
My JavaScript function toggleColSortOrder(); does indeed toggle only the sort order; but it seems the function to select the column also gets called (wrongly) when the user clicks the image.
What I've tried: thinking this might somehow be a manifestation of bubble-up at work, I tried all combinations of returning true, false and nothing in each of the two functions. None of this had any effect. I'd like to avoid hacking the JavaScript any further.
Question: how, by changing my html or css, can I prevent the function toggleColSelect(); being called when the user clicks inside the up/down-arrow image?
Your can cancel event-bubbling by adding
event.cancelBubble = true;
to your functions. See this fiddle: http://jsfiddle.net/fcyCz/
Here is my theory, since your <img> tag is INSIDE your <th> tag, you cannot click the <img> without first 'clicking' through the <th>. If there was a way to un-nest these two tags, I would then assume that their functions would be called separately. Possibly using a <div> to align your <img> over the correct spot. I am going to try to do live adjusting of what I just said using firebug and see (if it doesnt break the javascript) if it works, and I will report back.
Good luck.
As Tomalak points out, the click event for the <img> is bubbling up to the parent <th>, and so you must specify otherwise in your function. Also, add a call to event.stopPropagation() for the browsers which have deprecated cancelBubble.