I am using the css code below for a large portion of the text on most pages for legitimate purposes, so that text is only visible when users hover over various images/links (to give the site more of a clean look). However, I recently learned that search engines may punish sites for what they consider to be hidden text. Does this only apply to conventional tricks like text that is the same color as the background, or could it apply to what I am doing here as well?
span.desc {
line-height: 1.0em;
visibility: hidden;
font-size: 13px;
display: block;
}
a:link, a:visited, a:hover span {
visibility: visible;
color: #040315;
text-decoration: none;
outline: none;
display: block;
}
Related
I believe, according to this stackoverflow answer, that WCAG 1.4.11 "Non-text Contrast" is intended for things like checkboxes, radios, etc. However, :hover is specifically mentioned, so I would like to clarify what I should do.
I have a button with a :hover css rule that changes the color property from #181B25 to #074ADF. Both colors have greater than 3:1 against the background color. However, against eachother, they have a ration of 2.49:1. Does this mean I am not meeting WCAG 1.4.11, as this :hover rule indicates the state of the button component changing?
No you are fine, technically there is no requirement for the contrast to change at all when hovering.
There is a full conversation about this on GitHub
Which relates to this piece of guidance:
This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.
Source: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
As long as both states have sufficient contrast against the background and surrounding items it will pass WCAG.
If you think about it it makes sense, otherwise to create a AAA level button would require a contrast ratio of 4.5:1 with the background and then a further 4.5:1 contrast with the non-hovered state. That would mean all buttons would have to be practically black (or white if you had a dark background on the site) when hovered in order to match both criteria.
But WCAG isn't the end of it!
There are a few things you can do to improve accessibility (you don't have to stop at compliance, you can aim for "wowing" people who benefit from accessibility).
First thing is first, use cursor: pointer. This signifies something is clickable and it is now widely accepted that this is an acceptable / beneficial use.
The second thing you can do is use slightly different indication methods for hover vs focus.
So for example you can use border and outline in conjunction with each other to show the states of hover, focus, hovered and focused:
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
outline: 2px solid #333;
outline-offset: 2px;
}
<button>Test button</button>
Alternatively a neat trick instead of using outline is to use box-shadow. The advantage is it works for curved corners:
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}
<button>Test with curves</button>
I don't like the stacked option as it needs a lot of white space
If having two different indicators doesn't work for your design you can just have different states (and give priority to the focus state).
button{
background: #000;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 0.25rem;
font-size: 1.5rem;
margin: 2rem;
border: none;
}
button:hover{
outline: 2px dashed #333;
}
button:focus{
outline: 2px solid #333;
}
<button>Different border styles</button>
Use your imagination! You could make the button shrink by a couple of pixels on hover (assuming it is implemented so it doesn't cause a layout shift), change the text style, but grow on focus, change the background to a pattern depending on state (but be careful with that one) etc.
Quick Tip: You will see that I made my buttons black and white. I find this is a great way to test / prototype different states.
Using the following CSS:
.notice--info::before {
position: relative;
font-family: "Font Awesome 5 Free";
font-weight: 900;
top: .5em;
left: 0;
color: #ff980052;
content: "\f071 ";
font-size: 4em;
vertical-align: text-top;
line-height: .1em;
text-indent: 0;
}
I've managed to achieve this look:
Using this Kramdown markup in Jekyll on the Minimal Mistakes theme:
{: .notice--info}
Important: Our systems are evolving and becoming more and more interconnected and dependent upon one another. Therefore, we're providing a single checklist to handle all aspects of the morning prep so we can all work as a team on all aspects of the production.
The goal is to add font awesome icons as watermarks to the Minimal Mistakes Utility Classes defaults.
QUESTION 1: How do I get the first line to overlap without indentation?
QUESTION 2: How do I bring the text to the front so it's the top layer and isn't washed out by the alpha channel of the Font Awesome icon?
Thanks!
I've gone about re-creating your intended effect using Unicode rather than Font Awesome because you can achieve so much these days with a combination of Unicode and CSS filters that a third-party dependency like Font Awesome (which was popular in the early 2010s) may not be necessary any more.
Principally,
I've given the paragraph text-align: justify
I've made the paragraph see-through, by giving it an rgba() background-color
Finally, I've positioned the warning symbol beneath the paragraph, using a z-index of -6
Working Example:
.notice--info {
position: relative;
padding: 12px 12px 30px 12px;
font-size: 14px;
line-height: 24px;
text-align: justify;
font-family: sans-serif;
background-color: rgba(187, 197, 224, 0.3);
}
.notice--info::before {
content: '\26A0 \FE0F';
display: block;
position: absolute;
top: 42px;
left: 6px;
z-index: -6;
font-size: 80px;
filter: hue-rotate(-10deg) saturate(8);
opacity: 0.5;
}
<p class="notice--info"><strong>Important:</strong> Our systems are evolving and becoming more and more interconnected and dependent upon one another. Therefore, we're providing a single checklist to handle all aspects of the morning prep so we can all work as a team on all aspects of the production.</p>
Is there a recommended way to let Icon Fonts (eq. FontAwesome/Octicons) bleed into the Shadow DOM?
At the moment, when I want to use an icon in a custom element's Shadow DOM I have to include parts of the ociticons.css file inline in the Shadow DOM:
#shadowroot
<style>
.octicon, .mega-octicon {
font: normal normal normal 16px/1 octicons;
display: inline-block;
text-decoration: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mega-octicon { font-size: 32px; }
.octicon-search:before { content: '\f02e'} /* */
</style>
<button>
<span class="mega-octicon octicon-search"></span>
</button>
(Apparently, #font-face does bleed into the Shadow DOM.)
No, there is no “recommended way” to use icon fonts just because those are simply a bundle of css and shadow DOM is intended to hide light css. So your request contradicts the purpose of shadowing.
The common approach is to build the component for showing font-related icons. Every custom component library has in fact it’s own component to show font-icons. Just google for font-awesome polymer or like. A random example.
Sidenote: #font-face does not bleed into shadow. It’s the directive setting the relation between fontname and the file where this font to take from, for those fonts which are not known to browser yet. That said, whether you’d try to declare:
#font-face {
font-family: my-octicons;
src: url('octicons.otf');
}
and then use it like:
font: normal normal normal 16px/1 my-octicons;
in shadow, it won’t be resolved. The reason it’s resolved in your case is that the browser knows where to take the font to show. In general, it’s the same case as if you were declaring:
font: Helvetica;
without any #font-face in before.
Hope this helps.
I've been working on a theme for the site http://silversoundz.com and have it looking just how my client wants it on browsers but the problem comes when I shrink the screen to check the site on mobiles, in particular the Iphone.
It seems like there's a minimum threshold (around 768px width) before the header+icon svg files go back to their enormous default dimensions thus rendering everything else tiny in relation to that. I've changed the icons to smaller pngs but I'm not sure what the best course of action is for resolving the header scaling/sizing so everything is proportional on a small screen.
Here's the problematic css
media="all"
#media only screen and (min-width: 768px)
.logo-img {
width: 100%;
float: left;
margin: 0;
position: inherit;
}
Ok I figured it out:
Basically I just had to find the relevant bit of css which was only kicking in for screens > 768 and re-paste it below the general styles which says:
body {
font-family: "Open Sans", sans-serif;
font-size: 1.0em;
color: #000000;
background: #ffffff;
font-weight: 400;
min-height: 100%;
}
.wrap {
width: 96%;
margin: 0 auto;
}
so it would come into affect for the general styles too.
I want to change JQGrid "Loading..." message to something with animated gif image. Looked everywhere but couldn't find a way. Anyone please.
Try to use
.ui-jqgrid .loading { background: url(ajax-loader.gif); }
it should work. Some animated gifs can be loaded for example from here. By the way, the div having "Loading..." message has the form
<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>
where the id "load_list" will be constructed from the prefix "load_" and the id of the table element.
UPDATED: To remove the text "Loading..." you can either use loadtext:'' jqGrid option or overwrite $.jgrid.defaults.loadtext global setting from the grid.locale-en.js:
$.jgrid.defaults.loadtext='';
If you need to adjust width, height or any other CSS parameter of the loading div you can do it in the same way. For example,
.ui-jqgrid .loading
{
left: 45%;
top: 45%;
background: url(ajax-loader.gif);
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
height: 20px;
width: 20px;
}
This is perhaps a more modern answer to the question using FontAwesome rather than a gif. I couldn't find where this has been answered anywhere and had to piece it together from various places including the answer above by #oleg.
Hopefully this will be helpful to others searching.
<style>
.ui-jqgrid .loading {
background-color: transparent;
border: 0px;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.ui-jqgrid .loading:before {
content: "\f110";
font-family: FontAwesome;
font-size:40px;
}
</style>
And then place the following (exactly like this) after $(document).ready(function() {
$.jgrid.defaults.loadtext='';