Is it repetitive/overkill, better or worse to use a two way assignment with aria-properties? for example using an aria-control and an aria-labelledby?
<div role="tablist">
Tab 1
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1"></div>
It is ok to do this and it is also ok to not do this. The reason it is ok to not do this are:
Firstly: role tabpanel is a region role and does not require a label, so having no label is ok.
Secondly: You should create something focusable inside your tab panel (e.g. the first heading) so that a user can tab directly from the selected tab into the tab panel. When they do this, the focus goes straight to the focusable element. This means that the tab panel label would never get read.
The argument in favor of doing this is that a screen reader user, using DOM navigation, would encounter the tab panel and know which tab is selected without having to navigate to the tab itself.
Related
I am looking for a way to go from my navigational links using voice-over accessibility to jump to the internal part of the page that link I connected to.
For example:
I have a list of links on my left-hand side. One is for Forms. When I click on "Forms" my list of forms will populate to the right of that panel, and then if you click on a specific form, that Form will appear to the right of that panel. The page contains 3 panels with Navigation on the left, list in the middle, Form on the right.
Right now if I click on the Form link, I have to tab through my entire nav panel to get to the newly opened Forms list.
Are there some ARIA elements I am missing that will help tab directly into my Forms List from the Forms link?
There are two simple ways to do this.
Note that neither of the following ways need any aria to work, the aria in the following examples is purely for best practices when adding sections and headings to a page.
Option 1 - anchors
The first is using anchors pointing to ids on the page.
in your side bar
forms
main page section
<section aria-labelledby="forms">
<h2 id="forms">Forms</h2>
<!---your forms --->
</section>
Notice how I gave the page content a heading (pick an appropriate heading level) and then labelled the section with aria-labelledby. None of this is required to make this method work but it is a good practice.
The only thing you need to do is to make sure your href matches the ID of the heading.
However given that you are populating the forms on the right side of the page (I am assuming with an AJAX call) you may want to manually manage focus with JavaScript....
Option 2 - Use JavaScript and .focus()
If you are using JavaScript it is a similar principle, give the section heading an ID, but this time once the forms list has loaded set focus on the list heading.
html
<!--your link in the menu -->
forms
<!--section on the page, I omitted the aria here for clarity / simplicity but it is still needed-->
<section>
<h2 id="forms" tabindex="-1">Forms</h2>
</section>
JavaScript
// start: however you have this implemented at the moment
const formsLink = document.querySelector("#getForms");
formsLink.addEventListener('click', function(e){
e.preventDefault();
get('yourURL').then((data) => {
// populate the list
list.update(data);
// end: however you have this implemented at the moment
// once the list is populated set focus on the heading (last thing to do after everything else is done)
document.querySelector('#forms').focus();
});
});
Notice how in this example the <h2> has a tabindex="-1".
We need this to allow programmatic focus. We use -1 so we can focus the heading via JavaScript but it does not get added to the page focus order (so you can't access it with Tab).
I'm using Vimium on Firefox and Chrome and it helps me a lot https://github.com/philc/vimium
I noticed that some divs can be clicked and I found that class='demo-button' is one of them
<div class='demo-button'>demo-button</div>
<div class='demobutton'>demobutton</div>
<div class='demobuttonnn'>demobuttonn</div>
<div class='demobutto'>demobutto</div>
Here is a screenshot of Vimium links https://jsfiddle.net/qnvujfs6/
As you can see, only the last div demobutto can not be clicked using Vimium. I tried to search Vimium source for demo-button or demobutton but no results.
Does anyone have an idea why there is a difference between this demo button div-s ?
I want to be able to click on some generated elements using bootstrap plugins, for example Bootstrap Toggle. Here is code for two toggles, but only second one can be clicked because it contains demo-button class
https://codepen.io/duleorlovic/pen/VqWaEg
The first three are clickable because the class attribute contains the word "button" (See source).
For usability purposes it preferred to simply use the elements that are meant to do that job. For instance anchors (<a>) and buttons (<button>).
But if that is not possible (which seems to be the case here) you can also add the role attribute to the element. Elements with the attribute role with one of the following values will also be considered clickable:
button
tab
link
checkbox
menuitem
menuitemcheckbox
menuitemradio
(Source)
So if your div elements represent check boxes, your code would look like this:
<div class="demo-button" role="checkbox">demo-button</div>
<div class="demobutton" role="checkbox">demobutton</div>
<div class="demobuttonnn" role="checkbox">demobuttonn</div>
<div class="demobutto" role="checkbox">demobutto</div>
In this case you are not depending on specific class names, which are by the extension considered "as unreliable".
I am currently trying to find a way to assign a certain class name for an element.
I'm using a bootstrap framework to created a tabbed element. This element runs a for loop to make tabs and tab content for each item in a specific folder. Because of the for loop, each tab and content box has the same class. But, for this element to look right when the page loads, it should have a default tab (like the first one) that is displayed. The default tabs and content boxes need to have "active" and "active in" in their respective class names.
My question is since the for loop makes them all the same, how can I code this to make the first tab and content box "active" and leave the rest as is? Also, would it be possible to use an if else statement. I'm not experienced yet with PHP, so I might not understand a solution using it.
I would like to do this inline, like say (href='stuff' class='inline stuff here' / maybe class="inline if else statement") I know it may not be the best method, but i would like to try that first. If I must do it a different way, I will try.
<ul class="nav nav-tabs">
#foreach(var sections in Links)
{
<li>#sections.title<li>
}
<div class="tab-content">
#foreach(var content in Links)
{
<div class="tab-pane fade" id="#">
#content.bodytext
</div>
}
What is the best method to make the code assign "active" to the first tab and "active in" to the first tab content while leaving the rest to be normal so the first tab and content will load by default on the page?
Thank you so much in advance for the help!
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...
can someone explain what the the contextmenu attribute does and if it can be used with all the HTML elements and can someone point me to some online demos/examples?
The contextmenu attribute refers to the <menu> element the user agent should render when a context menu is requested by the user (e.g. using the right mouse button or the Menu/Hyper key on modern keyboards.
You can find an example here.
You can see how it may look like in this demo:
https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309
At the time of writing only FireFox 8 supports it.
The context menu appears when the user right-clicks on an interface element. The contextmenu attribute is the ID of a <menu> element to open when the user right clicks on the element with this attribute.
Quoting for you to understand easily:
The contextmenu attribute allows you
to display a menu without taking up
valuable UI space for the menu. It is
a menu which fires on events, such as
mouseup or keyup providing a bubble
menu which provides options and
actions based on those selections.
Source: http://net.tutsplus.com/tutorials/html-css-techniques/html5-globals-and-you/
See official link for more information:
http://www.w3.org/TR/html5/interactive-elements.html
The contextmenu should be used on an input field to specify which menu element is for the field. The menus look sort of like the right click menu or a dropdown box however they are not implemented in any browser yet so you should avoid using them.
This may help clear things up:
http://dev.w3.org/html5/spec-author-view/interactive-elements.html
<form name="npc">
<label>Character name: <input name="char" type="text" contextmenu="namemenu" required></label>
<menu type="context" id="namemenu">
<command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
<command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
</menu>
</form>
http://www.w3.org/TR/html5/interactive-elements.html#context-menus