Alter contrast links to clarify what is meant
Closed this issue · 10 comments
The contrast buttons need to state more clearly what they do.
Links are present that are not descriptive of the destination or purpose in or out of context. “I located duplicate ‘a’ links which are confusing as I do not know what their purpose is.” Ensure that links contain text that is unique and descriptive to enable users to accurately determine their destination or purpose (aria-label=”___”).
Let's try having the words 'Enable high contrast' in the title bar. When clicked it changes to say 'Normal...'. Alternatively, we could have 'high contrast' checkbox (remember to include aria tag for screen readers.
Description
The contrast buttons (currently both marked as 'A') will be replaced by a single button with clear text. Test at: https://sdg.mango-solutions.com/contrasttoggle2/
Screenshots
Before
After
Successfully tested on...
- Windows: IE11
- Windows: Chrome
- Windows: Firefox
- Windows: Edge
- macOS: Chrome
- macOS: Firefox
- iOS: Safari 9.3
- iOS: Chrome
- Samsung: Chrome
- Samsung: Samsung Internet
User feedback and problems encountered...
-
Tested this on MacOS Firefox and Chrome and seem to work as intended with VoiceOver on. -Savvas
-
Tested this on IE11 and Chrome on Windows - looks fine but cannot test with screen reader on on-network laptop. However when testing on Safari and Chrome on iOS, the contrast button doesn't seem to be showing. Just checked and does show if phone is landscape -Lucy
-
Works well on Windows Firefox/Edge. Also works on both Samsung browsers, but only when the phone is turned on its side. Acceptable for now as it works in landscape view; long-term we need an update which moves the contrast button to underneath the SDGs logo if it doesn't fit on the screen - Chris
-
Tested on Firefox, IE11, Edge and Chrome with NVDA screenreader. Contrast status is announced when tabbing to the link, but when pressing enter it doesn't announce the change in contrast (although it's been pointed out this is only a minor problem and might not even need rectification) - Sam
-
Fixed this so now working on mobiles also - Lucy
@SavvasStephanides your feature test is clear and effective . https://codepen.io/anon/pen/BeWvbd
I like the button, definitely a lot clearer - could it be in a different colour to match the rest of the website?
Good point, although I do like how it is now as it passes contrast checks. Open to ideas.
Pull request here: #3134
Happy to hear your thoughts on colouring or functionality
#3184
@SavvasStephanides @dougmet This didn't work as hoped. Think that moving the contrast toggle to below the main goals logo could be the easiest way around this problem. Please help me to conduct further resizing/moving tests on ContrastToggle3.
This is now in Open SDG v0.8.0 so closing this issue