Thursday, March 19, 2020

Controversial idea: Get rid of the XAML Image tag

Here's an idea I've had swimming around in the back of my brain for a while. I've not yet settled on it 100% yet, but when I do, I'll start some proposals, and discussions with the appropriate people/organizations/repositories.

This is me writing down my ideas to help better think them through and for those of you who come across this page to have a chance to share your thoughts.


Let's get rid of the <Image /> tag!

I acknowledge that this is a potentially controversial idea and it would be a BIG change to a lot of people but I think it has the possibility to advance XAML based development in two important areas: semantics and accessibility.

Semantics
I'm increasingly persuading myself on the benefits of improving the intent of written XAML. Having a generic image tag only communicates that an image should be displayed but provides no information about how that image is used within the UI. This is far from optimal. Alternative/replacement controls could do a better job of communicating intent and aiding the readability of the code.

Accessibility
The vast majority of XAML based apps that I've seen make little or no regard for accessibility support and how screen-readers work with images in apps created with XAML. While HTML and the web are far from perfect, they do a much better job of encouraging people to use "alt" tags on their images. As accessibility and inclusive design continue to grow in importance and consideration for all users of all software, I expect an increased need for XAML based UIs to be asked to do a better job in the coming years.


How would we get rid of it?
In an ideal world, I'd mark it deprecated and then rename it (to BaseIamge) and make it abstract. I'd then add tooling to indicate it shouldn't be used and a suitable replacement is used instead.
The tooling part is easy (:wink:) but the other parts would cause A LOT of compatibility issues. I'd settle for introducing alternatives and recommending they are used instead. I don't really expect to be able to change the current Image tag.

What I propose we have instead

I propose adding two new controls to replace (or be used instead of) the current one: BackgroundImage and ContentImage.

BackgroundImage
This would support an image source and be almost identical to the current Image control. The difference would be that this would never show up in accessibility tools. It's just a background, so it doesn't matter if some users of the software don't know about it. The name also communicates to future developers that this is just part of the background and shouldn't host anything important like the content.

ContentImage
This would be like the existing Image control but also add a required description property. The value assigned to this property would be made available to accessibility tools so that anyone using the app but unable to view the image wouldn't miss out on important content information.
The description could also be used as a fallback if the image couldn't be used, similar to how alt text is displayed on websites when images don't load.
Tooling could easily be added to check that this property is set and a suitable (non-empty) value is provided.

I might have missed something obvious but I think almost all uses of images in apps could be classified as background or content.

That's it. It's quite simple.

  • Stop using Image.
  • Use BackgroundImage for visuals that aren't important and only part of the visual aspect of the page.
  • Use ContentImage for pictures that do contain important information that should be communicated to the user even if they aren't able to view the image.



As this is the internet, feel free to tell me why I'm wrong, what a silly idea this is, and the obvious things I've overlooked. ;)



0 comments:

Post a Comment

I get a lot of comment spam :( - moderation may take a while.