I am really challenged by the wave (web accessibility evaluation tool) reporting that a client's website has 4 contrast errors. After scouring the code, it turns out the problem they are reporting is that the select elements have a problem with contrast, showing a foreground color of 0000ff and a background color of ffffff
Problem is that I corrected the css declarations to have all select elements with a color of black 000000 and background of white ffffff I also declared !important and they show these values in the inspector window.
What in the world am I missing? Is it an issue with the wave tool?
Here is a link to the specific report Wave Diagnostic Report
Related
I'm building a website that has a bright yellow in it's color scheme. The scheme can not be altered. In some places it is used to highlight text. Now I recognized that the yellow is exactly the same as the one that highlights your search terms, when you use the F3 search within a website and since it's text heavy content, I believe it will lead to usability issues and confusion for some users.
Is there a way to override the color the browser search uses to highlight text (like values in the user-agent-stylesheet or a js library) or is this baked into the software without any possible way to interfere?
There is ::selection, but the only browser that utilizes it for search result highlighting seems to be Edge (EdgeHTML), and even then it is only for active result - not all results.
::selection {
background-color: #9900ff;
color: white;
}
Search, search
Furthermore, there's a bit of a spread between how browsers implement this to begin with,
Chromium uses orange for active result, yellow for rest.
Edge uses ::selection for active result, yellow for rest.
Firefox uses green for active result, purple for rest.
As an ultimate workaround, you could implement custom search via markjs or alike, but it does seem like there should be some better way than this.
I am using http://achecker.ca to validate my HTML/CSS and verify that I am WCAG 2.0 compliant. I'm quite happy with it for the most part but it is giving me an inappropriate error that is frustrating my efforts to get a clean validation. I was wondering if anyone had a suggestion for getting around that?
It's complaining about the contrast of some text I am displaying, saying that the background color and the text color are too similar. That's actually true - background-color is #f2eecf and text color is #f2f2f2 - but it isn't really relevant because I have a photograph appearing above the background color so there is actually good contrast between the photograph and the text color. Also, I've added a 1 pixel black text-shadow around the text to make it even clearer. Unfortunately, the tool doesn't seem to take the shadow or photograph into account. (It makes sense that it wouldn't know how to handle the photograph since it is not a uniform colour but I'm disappointed that the text shadow doesn't help.)
Is there something I can do to my HTML or CSS to help satisfy the tool? The website doesn't seem to have any way to contact the people operating the website or I would have asked there first.
Should I just ignore the "errors"? Or should I use a different tool? I'm just getting started with WCAG compliance checking - I realize now that I'm rather late getting into this - so maybe there are better tools to use. If so, I would appreciate any recommendation, especially for free tools.
I certainly want my pages to be WCAG compliant but I can't spare money for tools right now.
I have a photograph appearing above the background color
So your text has a transparent background color or it has a background-image? A code snippet would help.
I'm guessing you're getting this error: https://achecker.ca/checker/suggestion.php?id=301
If you look up "achecker.ca" on https://www.whois.net/, you get:
Administrative contact:
Name: Iris Neher
Email: ineher#ocad.ca
If you're using a decent accessibility checker, then you should not try to fake out the checker. I have not used achecker so I can't comment on how accurate it is. But if you post your code example, I might be able to tell if it's really a problem.
You can also try
http://www.brandwood.com/a11y/ - which specifically checks text on images.
https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en - chrome plugin
Short Answer:
Best practices is that if you are going to composite text over an image, the image is in a container with that container having a background similar to the image.
Longer Answer:
There are a variety of reasons that an image will not load. A site doing things such as placing live text over an image needs to ensure that text remains readable regardless of the load state of the image.
Also keep in mind that a user must be able to zoom up the text in size without breaking the site, meaning keeping the text over the image or BG so it is still readable, etc.
Outlines & Shadows
As for outlines and shadows: while they may assist contrast, they should be used to enhance and not for the sole basis of contrast. In part because the rendering of these properties is far from consistent among different browsers.
Resources
WAVE Automated Checker
APCA Contrast — the new contrast method for WCAG 3
I have an element common to all pages that uses a font called "Just Another Hand" provided by Google Fonts API. On one of my pages, the element coincidentally happens to load in front of a Google Map and I noticed that when this happens the font rendering changes to a more eye-pleasing, fuzzier but smoother appearance (see screenshots below). I am using Chrome v.29 on Windows 8.
Further observations: Notice the grey header text (also visible in screenshot) does not change dependent on the presence of a Google Map. Use the inspector to remove the z-index property and the font rendering will return to it's original, less eye-pleasing state. The element has to be in front of the Map for any effect to happen.
Why is this happening and can I leverage one of the technologies to force/suppress this effect?
P.S. I appreciate this is not a coding question by I am hoping it will receive a coding answer.
Issue
We are rendering a bar chart on a web page using a Reporting Services report and the ReportViewer control. Sometimes the text on the chart is sharp:
But most of the time, the text on the chart is blurry:
What is going on?
Steps Taken to Resolve and Other Information
Extensive search of web and SO
Tried different browsers, users and machines; couldn't determine rhyme or reason to blurriness
Tried several settings of SSRS report properties DynamicHeight and DynamicWidth
In Firefox, when right-clicking on the chart image and choosing View image, the displayed image is always sharp
The issue seems more prominent on charts with a border; removed border on chart, but issue remains
Affects Browsers
Firefox 15.0
Chrome 23.0.1271.97 m
IE 9 but only while in Browser Mode=IE9, Document Mode=IE9 Standards
Environment
Visual Studio 2010 Pro
.NET 4.0
IIS 7.0
Reporting Services 2008
ReportViewer control version 10
Cause
The ReportViewer control renders charts as a PNG image. The ReportViewer adds width, height, and min-width properties to the CSS for the image. These CSS properties cause the image to undergo scaling to a slightly smaller size in the browser. The image scaling causes the observed blurriness.
Resolution
The issue is resolved in our environment by using additional CSS to override several CSS properties rendered by the ReportViewer. The Reporting Services chart is given a special tag in BIDS so a CSS selector can find the affected image.
Step 1. Give the chart a unique value for its ToolTip property:
(The unique value in this example is MyOfficeChart.)
When the chart is rendered as an <img>, the <img> tag's alt and title attributes are set to this value.
Step 2. Create CSS to select the <img> by the unique value of the title attribute, and override the issue-causing CSS:
img[title$='MyOfficeChart']
{
height:auto !important;
width:auto !important;
min-width:0 !important;
}
These steps resolve the issue for all browsers and users, and whether the chart has a border or not.
An easy was to resolve this is by putting a rectangle directly into your tablix cell, and then put the chart inside of that rectangle. (Instead of having the chart directly in the tablix cell.)
Not 100% sure why it works... but it does.
This is not proper solution but could help. The steps are as follows:
Open report rdl in report builder
select the chart's text, that gets blurred
Type 'C' in Font Style (on top menu) and press enter
Font style change but unknown
Try to run and see the difference
I develop in Visual Studio. When I browse my pages, if, for example, a div has a background set using css to be an image which is, effectively, a graduated tint - it appears in bands of colour - i.e. not graduated.
Is there some setting I can change so IE shows background graduated tints properly?
You can use this site to generate your background color. This site is a css gernerator and it generates code for IE 6-7-8-9 and other browsers.
http://www.colorzilla.com/