New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SurveyMonkey not accessible in HCM #16

Closed
digilou opened this Issue Feb 4, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@digilou
Copy link

digilou commented Feb 4, 2019

Today (2019 Feb 04) I opened up a SurveyMonkey survey for Level Access & G3ict while in High Contrast Mode on Windows 10. First, in Firefox, I noticed the radio buttons weren't visible. I thought it might be a browser issue since FF doesn't fully support HCM.

This is what I saw in FF:
Firefox screenshot showing invisible radio buttons

Opening up Edge, I found the same problem:
Edge screenshot showing invisible radio buttons

IE had the same results. No radio button.

Reviewing the source code, it turned out that the radio input was set to opacity=0 and positioning was absolute to pull it further out of the way. A background image was positioned to sit in its place. However, as with HCM's functionality, background images are removed.

/* real radio button */
.modern-browser .radio-button-input, .modern-browser .checkbox-button-input {
	position: absolute;
	overflow: hidden;
	opacity: 0;
	outline: 0;
	width: 20px;
	height: 20px;
	top: 8px;
	left: 0;
}

/* custom (fake) radio button */
.radio-button-display, .checkbox-button-display {
    background-image: url("/assets/responseweb/smlib.surveytemplates/4.2.9/assets/sprite_checkmark_alpha.png");
}
.radio-button-display {
    background-position: 0 0;
}
.radio-button-display, .checkbox-button-display {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 11;
    display: block;
    float: left;
    margin: 0 8px 0 0;
}

For comparison, a screenshot of Chrome, which doesn't support HCM:
Chrome shows radio buttons with no HCM support

Would you add a note about this under SurveyMonkey? I can provide further details, if you need them.

@aardrian

This comment has been minimized.

Copy link
Collaborator

aardrian commented Feb 4, 2019

This is great. I will add a note to the Survey Monkey entry and link to this issue (which will be closed) for additional context, code, and screen shots.

@aardrian

This comment has been minimized.

Copy link
Collaborator

aardrian commented Feb 4, 2019

Done.

@aardrian aardrian closed this Feb 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment