Description
Elements did not display correctly when colours were inverted.
Reference: Usability
Issue ID: DAC_Colour_Inversion_01
URL: https://beta.w3.org/membership/list/
Page: Current Members & Testimonials
Journey 2, Step 1
Low vision users that invert colours on the page found that some content was lost when using an alternative presentation. When Windows High Contrast Mode (HCM) is activated in IE11, the chevrons indicating that more content is available become invisible.
Although it appears visually as an edit field, on clicking the field with a mouse the content does expand, but this is not immediately obvious from its presentation so does require the user to interact with it to determine the functionality of the input.
Current Code Ref(s): #initial
<select id="initial" name="initial">
<option value="">All</option>
[...]
<option value="|">|</option>
</select>
CSS:
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvgxmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4- 96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4- 24.4 9.4-33.8 0z'/%3E%3C/svg%3E");
background-position: center right 0.625rem;
background-repeat: no-repeat;
background-size: 0.9375rem;
-webkit-padding-end: 2.125rem;
padding-inline-end: 2.125rem;
}
Low vision user comments:
“When I viewed this page in high contrast, I noticed the chevrons are not visible in the boxes below each title ‘Name starts with’, and ‘Business ecosystem’. This prevents me from knowing that they are drop down boxes with more information below. It would benefit me that the chevrons are clearly visible in each boxes.”
Solution:
Images which convey information should be included in-line within the HTML. This will ensure that for low vision users who require the use of alternative colour schemes the images do not disappear; this is particularly important where the image indicates the functionality of a control.