I have a website and I'm making it available for keyboard users. This might have been asked before but I haven't found a way to make it work yet. :(
The issues that I'm having is that on a certain point there is a slideshow and a pauze/play link. When a users tabs through the site, he first has to go through the entire slideshow and then the focus lands on the pauze/play link.
I've tried recreating it as best and simple as possible.
Fiddle here
When you tab through the elements you notice that the focus goes directly on the slides and afterwards goes to the pauze/play link. I know this is normal behaviour because of the HTML structure.
My question is: How can I manipulate this order that whenever I tab from the last "link" the focus goes straight to the pauze/play instead of going to the slides.
I've tried messing around with tabindex="0 / 1"; but then I need to put this on all the elements?
(sidenote: on the website are a lot more HTML elements above this 'slideshow' and I cannot change the structure that is given)
Thanks in advance!
The only way to change this order is to reorder your HTML elements.
tabindex itself can do 2 things:
it sets the order of "focusable" elements
it makes element "focusable".
tabindex = -1 Element will not get focus
tabindex = 0 Element will be focusable in the normal tab (semantic) order
tabindex = 1 Element with positive values will be focused first
There is no way to change the tab selection without using tabindex (or JavaScript).
jsfiddle
Related
Looking at this example:
https://www.w3schools.com/howto/howto_css_subnav.asp
I would like to make the submenu disappear on click without using Javascript. Is this possible?
It can be made to appear on hover without JS. The idea would be to hide the submenu once a submenu item is clicked. For example:
If you click "Package" the entire submenu and red background should not be shown.
EDIT 1:
I should add that I experimented using :has and :target in various combinations to set change it to display: none. That did not work.
I think that technically the answer to your question is yes, it is possible, but actually no - at least not in a way your page will continue functioning normally afterwards. Let me explain:
If you were to use anchor elements for our subnav links/buttons you could use a combination of the the :visited and :has pseudo classes to set the submenu's display to none (display: none;) and the main menu's color to the original color. However, I believe this will mean you won't be able to make the submenu appear again unless you were to somehow cancel the "visited" status of the anchor element that was clicked which if possible, will most certainly include the use of JS anyway...
Do hidden input fields have a physical location within the page?
I know this question probably sounds dumb (I definitely feel like it for asking), but recently I created a website with a lot of hidden fields (created with JavaScript DOM), and I noticed there is a huge, empty area at the bottom of the page.
I checked the code and I can't find anything that could cause this problem.
var hiddenfield = document.createElement('input');
hiddenfield.setAttribute("type","hidden");
hiddenfield.name = "hiddenfield";
hiddenfield.id = "hiddenfield";
hiddenfield.setAttribute("value", document.getElementById("select1 4").value);
formNew.appendChild(hiddenfield);
I edited in some code to show the way I created the hidden fields.
No, input type="hidden" fields aren't causing this. Possibly some css style or width and height settings.
They do have a location, try to change hidden in text from the developer console and you will see it's position. They are just collapsed. The don't influence layout in any way.
If you are using <input type="hidden"> then as Patrick answered they will not influence layout. As in this example explained by Patrick.
BUT if you are hiding your input fields using visibility:hidden then YES it will take the space. See THIS example.
As according to W3
"visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout."
You can hide your fields using display:none. According to W3
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there
I have an IMG tag which has an associated OnClick event.
I see that TAB-key navigation skips this image field, but I need to have it stop there and treat the element as a regular tabbable control field.
Is there a way to do this? I can't just wrap a simple A-tag around it, since that affects various stylesheets and breaks the design.
In general, the best approach is to use a button instead, and bind the click event to that.
<button type="button"><img src="..." alt="..."></button>
You can also stick tabindex="0" onto the image so that it will appear in the tab order (without specifying a specific place so the ordering is natural), but this doesn't give as good results with AT.
Is there any alternative to <div>? My website is losing "accessibility" because I cannot set focus on a <div>. What control should I use in order to replicate <div> and still hold focus?
This is what my HTML looks like:
<div style="height:70px; overflow:hidden" id="divMsg">
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
<div class="DivClass">abcdefg abcdkfjghfjdfkj</div><br>
</div>
You can add tabindex to make it focusable; however, this is usually not enough. If you want the element to be clickable, you will also need to add a keydown or keypress handler so that the user can activate it using ENTER, similar to a A link. Otherwise the user will be able to tab to it, but may not be able to do anything with the link after.
If you are trying to create a clickable element, it is sometimes simpler to start with a A tag, and then style it so that doesn't look like a link. A elements respond to both keyboard and mouse and fire onclick for both, so you don't have to do additional keyboard input handing like you do with a DIV.
Finally, if you are making a DIV or A that visually looks like a button or some other control, add the appropriate ARIA role so that a screenreader will call out the appropriate element type - eg.
Complete Transaction
Just give it a tabindex attribute.
If you are specifically looking for accessibility, try out the new HTML 5 tags like <article>. So for example a textreader knows what to read, and your page is much better structured.
Check out this site.
To answer your exact question, it depends why you are using the div; I'm guessing for layout. The tab ordering is dependent upon more than tabindex, as defaults and overflow affects positioning and focus.
To be more specific, you won't use a div to latch onto for tabindex. Rely upon JavaScript and a unique ID; <div class="content" id="page1">
This will also provide you an anchor so you could use http://index.html#divMsg to link focus to the exact place in your HTML document. Note you have only one div ID and reuse the same div class twice in your example.
If this is all new to you the article on difference between ID and CLASS may be of interest to you
Links (element a) and form elements (input text and alike, file, radio and checkbox, submit, image and type button, select, textarea, button element, etc) are focusable by default.
Thumb rule: if an element does something, it should be a link or a form element part of a form. (OT: I guess I've a problem with conjugation here but can't find exactly what - english isn't my mothertongue)
Think twice (at least :)) before using the tabindex attribute: it'll work for a while in your project and then you make some modification elsewhere and suddenly all is broken. And it'll break again, again and again.
For testing with Safari, you'll need to modify Preferences: this browser (maybe also Chrome?) only cycle by default through form elements and not links. Users of keyboard cycle through every focusable elements I guess, like in IE and Firefox.
To learn further, Web Content Accessibility Guidelines 2.0 (WCAG 2.0) have Sufficient Techniques (and "Failure(s)" also) about keyboard use.
I want to practive, and even best-practice, with Html+JS+CSS.
I use a one page client-only Sudoku page.
My Sudoku markup is basically a <table>, with <td>.
(I'm open to suggestions to improve this).
My requirements :
Have a cell under focus (the keyboard notion of focus) (highlighed with css to a yellow background)
Navigate through cells with arrow keys (plus Home etc).
type-in an integer value sets that value to the currently focused cell
I use an input button inside each cell.
The Javascript works fine.
My only problem is with the display.
When a cell has the focus, it's highlighted display doesn't cover the whole TD, rather only the visual space included in the input button. I have some space around the button that isn't 'yellow'.
I don't think I could go up in the CSS selection, to select the parent of the input, could I ? Such as :
input:focus '?? how to go up ??' td { background-color:yellow;
I tried a few tricks, like having always 5 characters in each button display (5 spaces when empty, changing the middle character when set), but nothing is visually satisfying.
Even worse, it is clearly against best-practices to alter the content for the sake of visualizing. That's what the MVC distinction between Html/Css/Js is for !
I already searched this site for answer, I found close but distinct questions and answer.
I'm hoping someone could help improve my page ... and my markup skill :-)
It is not possible to construct a css selector which matches a parent node dependent on a (pseudo-)class of child node.
Basically you have two options to choose from:
Try to fill the td with the input completely using height and width rules in your css.
Set 'focused' and 'unfocused' class on your tds with javascript using the onfocus and onblur events of the inputs.
Could you not use a dash of jQuery to set a .focused class and then apply some style to it?