Page MenuHomePhabricator

Text elements must have sufficient color contrast against the background and Form <input> elements must have labels
Open, Needs TriagePublicBUG REPORT


Steps to Reproduce

  • Make sure you have the msupload extension installed and activated.
  • Download the Accessibility insights for web extension
  • Navigate to the edit source page.
  • Click on the Accessibility insights tool icon, you can find the icon beside the navigation bar
  • Click Fastpass


Related Gerrit Patches:
mediawiki/extensions/MsUpload : masterUse defined colours for upload and button areas

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 9 2020, 5:21 PM
Akinwale-microsoft added a subscriber: Samwilson.EditedJan 9 2020, 5:45 PM

@Samwilson The element associated with background #657d91 and its containing elements should be high contrast. Along with this, the upload button generates <input id="blah" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="" tabindex="-1">, this underlying markup must have some label associated with it in order to help screen readers decipher the underlying content. The two problem areas are indicated below. Also i'd highly recommend using the accessibility tool(it's supported by the new edge browser and google chrome, i don't know about firefox), it goes a long way in identifying the accessibility bottlenecks.

I've had a go at fixing the colours for the drop zone and bottom buttons:

This isn't a very good fix: it just changes the colours. A more thorough change would probably be to use existing OOUI functionality where possible. The whole MsUpload UI needs a bit of an overhaul, I think!

(Assigning to me; or did you mean to indicate that you're working on it?)

Akinwale-microsoft added a comment.EditedThu, Feb 6, 11:10 PM

@Samwilson apologies for the late reply, thank you for applying the fix mentioned above. I'd like to point out the fact that i'll contribute the other fix associated with label of the select file icon mentioned above as we don't have the bandwidth for an overhaul currently(long term fix) because we're fixing a bunch of community extensions with accessibility issues at the moment. Once again, i really appreciate your response. Thanks.