Our product owners would like the tabbing between elements on the page to be more useful. Currently, when you tab through items, you are also tabbing through things that can have focus like text links. I really don't want to add tabIndex to every element if I can help it.
I'd like to know if there's a way to:
Global remove all tab indexes (like setting it to tabindex="-1") except for elements that should always be tabbed through like textboxes, checkmarks, and radio buttons.
Selectively add or remove the tab index to individual elements that are exceptions to the rule above.
I'm fine having all the tab-able elements share the same index like tabindex="0" so the browser determines the actual order.
I'm using Angular and have JQuery as well, but ideally would like this to be a CSS-only thing if that is possible.
Related
My use case is a traditional form page. My page contains a few buttons on the top right followed by form input fields.
When using mouse-less navigation and pressing tab, the standard behavior is exhibited where first focus is set on the browser tab and the browser URL and then into my actual web page in the order of elements (buttons on the top right into the form fields).
However, it seems better accessibility would have pressing tab on the last form field jump straight to the "Save" button on the top right of the page instead of having to loop through the browser tab and then browser URL again. So essentially, I want to "skip" the traditional order of focus on elements after pressing tab on a specific element (the last focusable element on my page which is the last form field) so that it goes to another specific element I want. Is there a way to set this behavior using HTML/CSS/JS?
There are two ways to handle this.
The first is with tabindex. You can control the order of all elements but you have to be very careful. It can make the tab order more confusing. The bigger the tabindex, the higher precedence the element has in the tab order. So you could put tabindex='2' on all your form elements and tabindex='1' on your buttons and leave the rest of the elements on the page without a tabindex. (Multiple elements can have the same tabindex value. The browser will tab through them in their respective DOM order.)
The second way to handle this is with the DOM order itself and then use CSS to move the elements where you want them. So the DOM could have the form elements first and then the buttons second. You can then use CSS to put the buttons in the upper right. This would be the preferred method because it's not as "dangerous" as tabindex.
this is more a curiosity of mine, I don't know if it's something possible.
If I am inside a HTML page, is there a way to quickly determine if a CSS class is active inside that page?
I explain better, let's say I am inside a website with a list of different users and near their avatar I may have a green badge for online users, while others has grey badge.
If this list is really long, is there a way to programmatically (or at least quicker than scrolling and looking by myself) detect which users are online?
I thought they have a different active CSS class but I don't know how to look for it.
Thanks
NOTE: I know how to detect an element, but if there's a list of elements I need to know which of them has a particular class active
you can use (inspect) in chrome ctrl+shift+i in inspect element you can see which css is active or not right side
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Placing the code below within your developer console should display the length of the existing classNames if they exist.
const classes = document.querySelectorAll(".className");
console.log(className.length);
You should then be able to navigate the classes for the relevant information by navigating the object trees returned for each object found by the querySelectorAll method.
But there may be times where this may not be the true count to the data set.
For example, if the data is dynamically loaded during page scrolling. You can then add an iterator loop to detect when you have reached the bottom of the page and push to the classes array.
I wrote a custom Polymer element that lets the user pick a month. You can look view the code at https://github.com/HoverBaum/month-picker
No I want to use this to select a range of dates. So the user should select a start and and end.
I added two of my elements to a page, to try this out. However for some reason I can only change the selection of the second element. This looks like the two are somehow interfering with each other. Usually I would say "of cause they use the same ids etc." but I was thinking Polymer would take care of these things.
Here is my little demo page:
<div id="timespan">
<span>Start <month-picker></month-picker></span>
<span>End <month-picker></month-picker></span>
</div>
The way the works is that it shows the selected date and when you click it a dialog is opened that lets you change the selected month. But for some reason both element only open the dialog for the second .
Was able to solve this problem by sticking more closely to the Polymer syntax. I was trying to not define everything in the options object handed the Polymer function. As it turns out that prevented me from accessing the right dialog.
I have a form that has two radio buttons. When one of the radio buttons is clicked, JavaScript is used to set a group of sub-fields using display: block.
How can I make it so the selected radio button and sub-fields will expand when clicking the back button in IE? This issue does not occur in Webkit or Firefox.
It needs to work with plain JavaScript, so no jQuery!
One popular methods is to use a URL-hash to represent the UI state. As the UI changes, you build up a hash:
document.location.hash = "R1=true;R2=false"
When you re-load the page, look at the hash and use JavaScript to set the relevant UI elements. How you represent your elements is up to you.
I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.
It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.
What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.