Re: [mediaqueries] Queries for image support

On 04/21/2016 12:40 AM, Florian Rivoal wrote:
>
>> On Apr 21, 2016, at 06:42, Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com> wrote:
>>
>> Recently, while browsing the web with image downloads disabled to save data, I was struck by how broken some sites were, despite being coded to current best practices.  Screen reader-accessible text labels (for icon buttons) that were "visually hidden" with CSS were completely inaccessible to me.  If I turned off those styles in the inspector, the site became usable again.
>>
>> Wouldn't it be nice if a media query could restrict those style rules so that they aren't applied for users who don't receive the image icons?
>>
>> Other use cases for changing styles based on whether or not images are supported:
>>
>> - elegantly styling the alt text for <img>, instead of shoving it into the width and height reserved for the image
>> - switching from a figure caption that is normally visible on hover/tap to one that is displayed by default in place of the image
>> - changing colors/blending modes when background images won't be displayed
>>
>> Given that some browsers / accessibility modes support content images but not background images, the media query could distinguish between support for images in different contexts:
>>  • images: none
>>  • images: content
>>  • images: all (meaning content + stylesheet images)
>
> For this kind of use cases, especially the first one, I think a pseudo class that matches on images that fail to load would be easier to use than a media query.

I think that having a media query here would be useful
in many cases. While in some cases you care about whether
a specific image has loaded, if there are no images then
you might want to do something different layout-wise.

Also, your suggestion doesn't address the stylesheet
images question, it would only work for content images.

~fantasai

Received on Thursday, 21 April 2016 18:28:54 UTC