We have a toggle switch implemented on top of checkbox. Checkbox is for keeping track of whether toggle switch is on or off. Everything works fine until you turn on accessibility. When accessibility is turned on & user taps on the toggle switch, the focus goes to the checkbox but it's not clickable. However, if user clicks on the label, it's clickable. I need to somehow don't let the accessibility focus come to checkbox, but still announce whether it's checked or unchecked on click of toggle switch or the label.
I have tried using tabindex & z-index to not let focus come to the checkbox but both are not making any difference. I tried using visibility:hidden. It works, but then accessibility stops announcing if checkbox is checked or not.
Our implementation :
<div class="myToggleSwitch >
::before
<inputtype="checkbox" disabled="disabled">
<label>Label for the Toggle Switch
<div class="switch" >
::before
<div class="switch-control">
</div>
::after
</div>
</label>
::after
</div>
You can use CSS to set some styles on the switch when the checkbox is focused.
For example:
.myToggleSwitch input[type="checkbox"]:focus + label .switch {
// Switch styles go here.
outline: 1px solid blue;
}
In plain English, it reads 'Find any elements with a class of "myToggleSwitch" with a focused checkbox input. Then find an adjacent label with a child element with a class of "switch" and give it a blue outline.'
And to make sure the checkbox isn't visible on the page you can do the following:
.myToggleSwitch input[type="checkbox"] {
position: absolute:
left: -1000%;
visibility: hidden;
}
That hides it and positions it off-screen so that it's still focus-able but not visible on the page.
Your HTML structure seems broken.
There is no relation between the input and it's label. Neither is the input nested inside the label, nor do you use a for attribute to link both.
The checkbox is disabled in your example code.
In that case I'm assuming you used some styling that actually does not depend on the checkbox's state? Because clicking on the label will not change the input's value in your example.
Related
I have an angular application, when I use keyboard TAB to move around the elements, current focused element is not highlighting.
This is how it looks like when I TAB to an element
This is when I then click on space to expand the accordionTab
I then added the following CSS but it's working only on mouse hover BUT not on tab selection.
::ng-deep {
.ui-accordion-header:hover, .ui-accordion-header:active, .ui-accordion-header:focus {
border: solid #00a1cf 1px !important;
}
}
I had been testing, it is working when I force select focus in chrome developer tools but not when I keyboard tab select.
I am unable to figure out why its not highlighting when focused using keyboard TAB. Can anyone help me out? Thanks in advance :)
What does the markup look like? Normally when tabbing to focus the elements that have focus by default are:
a (anchors)
buttons
inputs
textareas
If you have a different type of element such as a div, you can try and give it focus by adding tabindex to your markup.
I have a component that, upon a hover, shows a button and a link that you can click on. This is not a menu... just a box in the middle of the page.
For accessibility, I would like a user to be able to tab into the container (happens now, and displays the content in the .HiddenUntilHover class) AND also continue to tab to the button and link that show up on the hover/focused state.
Right now you can focus on the container and see the hover state; however, when you tab it just goes to the next element and does not allow you to tab to the button or link WITHIN the hover state.
Pseudo code example:
/* My component .jsx */
<div tabIndex="0" className="MainContainer">
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
/* I would like to be able to tab to these clickable things! */
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
And my SCSS:
.HiddenUntilHover {
display: none;
}
MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
display: block
}
I ran into this issue a few days ago and I solved it using css classes to make the hovered content accessible via keyboard navigation.
The way I got this working was to use css pseudo-classes to ensure that when the div element is active & focused that the buttons inside also display. Specifically the additional use of :focus-within & :focus-visible should ensure that when you tab over the list items, their contents are also displayed and keyboard accessible.
.MainContainer {
&:not(:hover, :focus, :active, :focus-visible, :focus-within) {
.HiddenUntilHover {
visibility: hidden;
}
}
}
<body>
<div tabIndex="0" className="MainContainer">
Content
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
</body>
Here's a link to the Codesandbox demo of this working
When the box is in focus, tabbing further to the button will make the box blur, which will hide it, and its contents, so focus will move to the next accessible element. I think this is the behavior you are experiencing.
You might consider using inserting an aria-activedescendant or tabindex attribute when the box comes into focus. This requires a little javascript.
Strictly speaking, you don't need to rely on the hover state to make that control accessible. You could have an offscreen (or clipped) button/link that is not a DOM child of the hidden (display:none) box. If you take this approach, read up on the aria-owns attribute.
As long as it is marked up as a button or link (or has a tabindex="0" setting), and is not 'really' hidden, it ought to be possible to tab to it.
Try increasing the properties of the class MainContainer
for example.
.MainContainer {
width: 100%;
height: 100px;
}
.MainContainer .HiddenUntilHover {
display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
display: block;
}
Elements appearing on hover are inherently inaccessible. You are experiencing one side of the problem with your code, where it is difficult to make it keyboard accessible.
But think about touch screens that have no real concept of hover: is there some way to reach your button on a smarphone or tablet?
For a more pragmatic answer, if you need to stay with hover, a less hacky solution than the two already posted ones could be the following:
use focusin and focusout events. See for example this question for explanations and differences with focus/blur, and this w3school doc for browser compatibility.
You will have to structure your HTML differently, such as:
<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->
As well as use a bit of js:
$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));
With a corresponding .keep-visible class which will leave the element display:block (I'm not a CSS expert, I let you write the code).
The overal functionning is the following: when some element within #outer takes the focus, the focusin element is fired due to bubbling. In the event, you put your class .keep-visible which makes the element to stay visible.
The focusout event is fired when the focus leaves the last element within #outer. At that point you remove the .keep-visible class, which makes the element to disappear.
According to the link above, onfocusin/out aren't standard, but are supported by all major browsers including IE. Firefox is the last one to implement it in 52.0, so it's a kind of defacto standard; we can reasonably expect that it won't disappear soon.
I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)
I do not know if it is a bug or not, but it seems to be.
When you have a default button and you click it when you have a :focus pseudo class it does not seem to have an outline.
#buttontag:focus {
}
<button id="buttontag" type="button">Focus me</button>
It shows the outline when you use tab key, though.
Nevertheless, it shows the outline both when clicking or using tab key on the button if you change the background-color to it.
#buttontag:focus {
background-color: #dde;
}
<button id="buttontag" type="button">Focus me</button>
But it does not work for all types of background-color. For example, it does not work for background-color: #ddd. In this case it is only shows when you use tab key.
#buttontag:focus {
background-color: #ddd;
}
<button id="buttontag" type="button">Focus me</button>
Here an screenshot when the button is focused, nothing changes.
I know that the background-color: #ddd is the same colour as the default border of the button (both on focus or not focused). I have created the following code to be sure of it.
var buttontag = document.getElementById('buttontag');
buttontag.onfocus = function(){
var border = window.getComputedStyle(buttontag).getPropertyValue("border");
alert(border);
}
var border = window.getComputedStyle(buttontag).getPropertyValue("border");
alert(border);
#buttontag:focus {
background-color: #ddd;
}
<button id="buttontag" type="button">Focus me</button>
I know that rgb(221, 221, 221) is the same as #DDDDDD on hex and that is the same as #ddd. I do not know if it has to be something related about contrast between both colours (there is no contrast because they are the same colour) and outline but it is very strange that in this background-color the outline does not appear.
More and more strange
If you inspect the default button and you force it to be focussed (I am trying on Google Chrome debugger) , it has an outline and shows it on the button. It is the default outline that appears in the rest of buttons with another background-color.
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
And I also wanted to know if it was something related about forcing the button to be in focus state so I created a Javascript snippet to see what outline the button has in focus state.
var buttonFocus = document.getElementById('buttontag');
buttonFocus.onfocus = function(){
var outline = window.getComputedStyle(buttonFocus).getPropertyValue("outline");
alert(outline);
}
#buttontag:focus {
background-color: #ddd;
}
<button id="buttontag" type="button">Focus me</button>
It retrieves the default outline, but does not show it. It seems that it only shows the outline if you force the button to be focussed (on the debugger).
I have searched on the official documentation but could not find anything related about a special behaviour for default buttons or specific background-color.
So here I have some questions:
Why is the outline not displayed on the default button when you click on it?
Why with background: #ddd it is not shown also?
Why is the outline shown when you use tab and not when you click on the button (on the two cases above)?
Why the button has the outline in his CSS but it does not display it? Is it a bug?
Might be wrong.
The default button (in Google Chrome at least) uses appearance
style attribute:
button {
-webkit-appearance: button;
}
The appearance property allows you to make elements look like a
standard user interface element from your operating system. Talking about OS X, standard interface buttons do not have outline
by default.
Very easy way to check how the standard os buttons looks:
alert('I am standard button')
When you've created a button:focus pseudo-class that contained
background or border rule (example #2), you have overridden the
standard appearance by default browser style for button + your
rules.
In example #1, the button:focus is empty, and apparently it is
just ignored by the browser, hence os interface style is applied.
If you will create a style:
button { -webkit-appearance: initial; }
you will get default browser button that has outline.
Chrome's default style for button has a rule:
background-color: buttonface;
Safari and Google Chrome support custom color names that are
references to the currently used colors of user interface elements.
It might be the case, that buttonface is '#dddddd' in your system. Interesting though, as I can see the blue outline in OS X Chrome.
For the questions 3 and 4, I am afraid I cannot replicate it, as I do get outline.
Will update the answer after some research. Cheers! :)
webkit Chrome and Safari behave differently, in that they do not trigger :focus on a click event, but do on tab keyboard event.
That :focus behavior is present, especially on the button element.
So you might have to add tabindex attribute on your button element to let the browser know that this element can receive focus.
tabindex="0"
Since without that tabindex attribute, the browser sees that focus flag as being false, hence no :focus.
See W3C spec:
https://drafts.csswg.org/selectors-3/#the-user-action-pseudo-classes-hover-act
There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
Also see the following regarding focused browsing context
https://html.spec.whatwg.org/multipage/interaction.html#currently-focused-area-of-a-top-level-browsing-context
If the attribute is omitted or parsing the value returns an error.
The user agent should follow platform conventions to determine if the element's tabindex focus flag is set and, if so, whether the element and any focusable areas that have the element as their DOM anchor can be reached using sequential focus navigation, and if so, what their relative position in the sequential focus navigation order is to be.
Modulo platform conventions, it is suggested that for the following elements, the tabindex focus flag be set:
a elements that have an href attribute
link elements that have an href attribute
button elements
You can also see this related StackOverflow question:
css focus not working in safari and chrome
button has a default style define by each browser. it might (and often is) different from browser to browser. But we can overwrite the default values to suit our needs.
Why is the outline not displayed on the default button when you click on it?
The button doesn't enter in focus state when you click. It enters the active state.
Why with background: #ddd it is not shown also?
It does show in my browser, but only when in focus. I your examples you use #ddd and #dde which are 2 very similar grays to the default gray, but once I changed the value I could see the difference.
Why is the outline shown when you use tab and not when you click on the button (on the two cases above)?
The focus state is meant to allow the user to hit the Enter/Return key to activate the button. However, the button doesn't enter the focus state one it is clicked
Why the button has the outline in his CSS but it does not display it? Is it a bug?
It is not a bug. It only displays when in focus state, which can be forced through the code inspector, via javascript or by tabbing through form elements. I used my own example declaring:
outline: 2px solid #ccc;
The focus state is very useful when trying t make the application/website accessible to screen readers for people who are visually impaired. It allows us to add more functions that can be triggered in those situations, and to guide the user through the page when looking at it isn't possible.
The default browser behavior is to show an outline only on focus (by using tab f.e.), not on click. Each browser also may have it's default outline color and width.
To avoid any funny behavior you can overwrite the outline, and also add it to a click:
#buttontag:focus, #buttontag:active {
outline: #ddd solid 2px;
}
I have been trying to get Custom checkboxes to work with my site. However, I've run into a puzzling issue with a specific part of my HTML.
Here is my current code:
HTML
<div class="quicklinks_login">
<label for="cookieuser" style="padding-left: 7px;"><input type='checkbox' name='cookieuser' value='1' tabindex='10' id='cb_cookieuser_navbar' accesskey='c' /> Remember Me</label>
</div>
CSS
input[type="checkbox"] + label,
label > input[type="checkbox"] {
background: url("../images/override/state_off.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
}
Now, as you can see from my CSS, I have two patterns that I want to be styled. The label > input[type="checkbox"] 'pattern' should be applied to my HTML (which it is, according to FireBug). However, the custom image does not display with the checkbox.
To sum it up, my question is simple: Why is the 'pattern' label > input[type="checkbox"] not working for my HTML?
You can customize checkboxes and radio buttons with just CSS if you prefer. https://www.google.com/search?q=css%20only%20custom%20checkbox . The basic idea is to style the label and hide the actual checkbox. Clicking on the label sets/unsets the checkbox, so all the form functionality is retained. The only downside is that old versions of IE require a graceful fallback, which most of the solutions provide.
This is one of those elements what browsers tend not to let you style
that much, and mostly people replace it with javascript.
answere on SO by #levente-nagy