I have 4 pages with iframes that are coming back with the following error 2.4.7 Focus Visible - Highlighting elements. While it does not specifically say anything about the iframe, the only pages with this issue have iframes. I have attached the only CSS associated with iframes and the iframe itself.
Hoping someone has some insight on what exactly WCAG does not like.
<style>
.yt-frame {height: 270px;width: 100%;}
iframe {border: 1px solid black;}
</style>
<iframe src="https://www.youtube.com/embed/VIDEOID?html5=1&rel=0" title="Video From YouTube" class="yt-frame"></iframe>
Based on your follow-up comment, it sounds like SiteImprove is considering the style on the <iframe> itself to be the error. WCAG 2.4.7 is a general message for anything that can receive focus.
SiteImprove may be seeing the <iframe> as something a user can tab to. As a result of that assumption, SiteImprove is noting that there are no styles for a focused <iframe>.
I am suspect of the heuristics SiteImprove is using here. For example, Firefox will use an <iframe> as a tab-stop, but Chrome won't.
Regardless, try adding a style to give it (and everything else) an outline on focus (though Firefox won't apply it to the <iframe>):
:focus { outline: 2px solid #f00; }
See if that satisfies SiteImprove. If it does, then you can be more specific with the style and satisfy the automated test (if that is your goal) without leaving the style on every other element that can be focused:
iframe:focus { outline: 2px solid #f00; }
Siteimprove had a bug in how they were flagging those. In the past few days, their devs have fixed it and my errors are cleared now. Check yours again!
Related
I am trying to change the color of the banner in the Jekyll leap-day theme, here https://github.com/pages-themes/leap-day/blob/master/_sass/jekyll-theme-leap-day.scss
To do that, I have added an assets/css/style.scss to my github page, with the following contents
---
---
#import "{{ site.theme }}";
#banner {
background: #a90000;
border: 1px solid #3399cc;
}
But nothing changed. How can I overwrite these values of the banner div in SCSS?
There are a number of reasons why this might not be working. Without being familiar with the output and html you are styling here are some things you should check (all of which you can check through browser developer tools. e.g. Chrome DevTools )
The element with id="banner" exists in your html and is visible.
Your additions to the SCSS are actually being included and are being applied to the element. You can check this in Chrome developer tools by inspecting the element. Under styles you should be able to see your style rules alongside the others. If you can't then it you may have a selector issue, likely caused by some earlier nested styles. (If you have also ruled that out, and your additions are not appearing anywhere in the output then something is going wrong with how you are building and fetching your SCSS).
If you can see them but they have a line through them, then they are being overruled by rules with a higher CSS specificity. You can fix this by making your selectors more specific. E.g.
div#banner {
background: #a90000;
border: 1px solid #3399cc;
}
Or perhaps
.someWrappingClass #banner{
background: #a90000;
border: 1px solid #3399cc;
}
Bearing in mind that these will change how they are selected - which could be an issue later if the HTML changed.
Really how you fix specificity issues properly will depend entirely upon your HTML, how you structure it and how you might change it in future. There really is no substitute for just learning how cascade and inheritance works.
In the Chrome devtools, Firefox devtools, Safari, Opera, etc., if I inspect an element I can see its bounding box nicely outlined when I mouse over the code for that element in the source panel. That's great. But what if I'd like to see how all (or most of) the elements on the page are laid out? For instance, maybe I'd like to see something like this:
In the Firefox "Style Editor" I've added these styles:
div { border: 1px dotted pink }
p { border: 1px solid green }
a { border: 2px solid yellow }
li { border: 1px dashed cyan }
img { border: 1px solid purple}
(Chrome can't do this since it doesn't support the UAAG 2.0 web standard for accessibility). Since the user agent style sheet overrides the styles from the page, I see the kind of outlines I'm looking for.
Now this is just a hack, and perhaps is sufficient, but are there other tools that do this, or something in the devtools that I didn't find?
Note: I did find this answer regarding the "Show composited layer borders" under the Rendering menu option in Chrome, but it's not really what I'm looking for:
https://superuser.com/questions/774424/grid-overlay-showing-up-as-soon-a-i-launch-chrome-developer-tools
I use this way
*:hover {
outline:1px blue solid;
}
You dont have to edit User agent style sheet as you can do it using developer tools [F12].
You need to add this code
*{border: 1px solid #fff}
It turns out I was looking for a browser extension a friend had mentioned a long time ago: the "Web Developer" extension.
http://chrispederick.com/work/web-developer/
Here's what it looks like outlining the block level elements:
It's available for Chrome, Firefox, and Opera. Apparently not for Safari.
Another useful concept came up this year, 2022:
* {
background: rgb(0 100 0 / 0.1) !important;
}
The idea is that every element gets a certain amount of coloring so that we can visually determine how much overlapping space there is because multiple overlaps will become darker. It will look like this:
The technique reveals that there is excess space on the right hand side of the card 1 h2 tag.
The above image was authored by Kevin Powell on his codepen.
He describes the whole concept in a very cogent YouTube video called The console.log of CSS which is under a minute long.
If you are using Firefox Quantum:
https://addons.mozilla.org/en-US/firefox/addon/open-pesticide/?src=search
Open Pesticide by MatthewBaa
Outlines each element on the page to help you visualize their
dimensions and overcome those annoying CSS layout issues. Requires
zero permissions and completely open source.
The following CSS works in Firefox, Chrome and Safari. But for some reason IE 9 it isn't displaying the legend. The other CSS is displaying properly in IE 9. I have experimented but cannot find the answer. It should display orange legend headers with white text and a black border.
Site address: http://www.mconchicago.com
CSS :
legend{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
width: 49.2em;
padding: 2px 6px
}
My stylesheet is a mess as I learn by trying things. I think there might be a conflict in it somewhere.
Full Stylesheet can be viewed here:
Your problem is not only on the orange header, you have 61 Errors and 15 warnings on your document markup.
See this link to know exactly what errors are, where are they located, and how to solve them!
Also, you should read a bit about HTML:
Google's HTML, CSS, and Javascript from the Ground Up
Opera Web Standards Curriculum
SitePoint
The MDN (Mozilla's Developer Network)
W3.org HTML element reference
Source: http://w3fools.com/ (thanks to Spudley )
I would hazard a guess at it not working because you're trying to put the heading in a legend element. Legends are only for forms, but this is a page / section heading rather than a form legend.
Replace <legend> with <h1> and update your CSS accordingly.
You should also get used to writing valid HTML as invalid code can also lead to inconsistencies between browsers as they attempt to make sense of your code in their own ways. Use the W3C validator and work through the errors
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mconchicago.com%2F
Sometime after this string of events took place the entire site was relaunched. I have archived the old files. If you want to see the results of this advice, for the time-being at least, you can view http://www.mconchicago.com/MCON/
My browser extension embeds a div item to webpages opened by browser on the fly. div contains several children items such as buttons, spans, input boxes etc.
Problem is when div is inserted to page, page's css affects the div and it's contents.
For example if the page has a css such as :
span {
text-shadow: 1px 1px 1px blue;
}
then the spans in my on the fly added div have blue text shadows. What i'm doing to fix this is to set any possible directive that might affect my div's content with !important, like
mydiv span {
text-shadow: none !important;
}
and it's rubbish.
Is there any sane way to override css for a given item, that'll take it back to browser (google-chrome) defaults?
Thanks.
Is there any sane way to reset the css to browser defaults for only a single item?
Sadly, no. The auto value will act as the default under some conditions, but not always, and you still have to specify it for every possible property. This is something about CSS that really sucks.
One idea comes to mind, though. Seeing as you're asking specifically about Chrome, if you control all the CSS classes and don't mind some clutter, you might be able to work with CSS3's not like so:
span:not(.default) {
text-shadow: 1px 1px 1px blue;
}
If you use not(.default) in every CSS rule, you can have elements that have the default behaviour if you give them the default class:
<div class="default">
I have no personal experience with CSS 3, but this should work. It will not work in older browsers, so it's not (yet) really mainstream compatible.
You cannot "reset" css rules, you have to override them (text-shadow:none;)
Debugging experience http://www.dmhermitage.org/wtfborders.pngThis is making me want to kill myself.
I have some really simple CSS to style my input objects:
input, button
{
border: 1px solid #c66600;
background-color: white;
color: #7d212f;
font-family: "Eras Light ITC", Tahoma, sans;
}
But I don't like the ugly border it puts around radio buttons, so I use a selector to kill the border:
input[type=radio] { border: none; }
You can probably guess what browsers this works in and which ONE it does not work in. What's funny is when I press F12 to launch the excellent developer tools in IE8 it actually tells me that the style of the radio buttons has been overridden to 'none' just like I asked it to do, but the border remains on the radio button objects.
I have tried a variety of semantic things, like setting the border width to 0px or the color to something insane like lime green, but it remains the originally assigned color that it got from the first style.
And finally, I have tried only styling 'text' objects, in which case no style is applied to anything. Again, the browser claims to fulfill the CSS selection, but it visually does not happen.
Thoughts?
By the way, this is a DotNetNuke installation with generated code where I can't explicitly set the style of the radio buttons.
Thanks,
Dan
IE8 appears to be rendering in quirks mode instead of standards mode, which always messes everything up in IE. To switch to standards mode, the easiest way is to replace the doctype on the first line of the document with this:
<!DOCTYPE HTML>
You may also want to look at some of the HTML being output. You have a span with ID dnn_dnnMENU_ctldnnMENU that contains dozens of made-up attributes like BackColor, SysImgPath, MenuItemHeightand so on. These will have no effect in most browsers (maybe IE interprets them specially, I dunno).
problem is...
Being most helpful ever, please notice, that somehow, your page get's rendered in quirks mode, thus in some screwed way nobody should ever use.
solution [edit]
due to: http://dorward.me.uk/www/ie8/
set your html 4 doctype to:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Just in case, have you tried with:
input[type='radio'] { border: none; }
Notice the addition of the apostrophe (or whatever you call the ' in your funny language :P)
I looked at the site, your CSS is correct and there is nothing I can help you with. Good luck!
You can remove the border by setting an inline style attribute in the developer toolbar to border: none;... So for some reason the style isn't applied to the radio-button although the style is traced correctly. Seems like some sort of bug.. Have you tried jacking up the specificity of the rule (it should already be higher than input, but just to try it out)?
For instance:
#page input[type=radio] {
border: none;
}
It's not possible with CSS anymore (as far as I know), but using this Javascript here it will be possible for you; Styling checkboxes and radio buttons with CSS and Javascript.
Nasty. Try specifying the border colour to white?