Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Responsive accessible text #61

marcoscaceres opened this Issue Oct 7, 2012 · 9 comments


None yet
6 participants

marcoscaceres commented Oct 7, 2012

@chsWeb on twitter made a case that both the images and their textual descriptions may need to be responsive. For example, in the case of an iphone panorama, you might start off just showing/describing a person, then as more of the image is responsibly shown, more text is needed to describes more of the scene.

chsWeb commented Oct 8, 2012

I decided to illustrate the case here: http://chsweb.me/TjeY2G. I am new to posting here, so please tell me if an illustration is off base. (If that's wrong, I don't want to be right #sarcasm)


marcoscaceres commented Oct 8, 2012

@chsWeb thanks very much for the illustration! It's really helpful for conveying the problem. I've updated the bug description to more accurately reflect the problem. Please let me know if it's ok.

I'll also pass this bug onto people with an accessibility background on the Responsive Images Community Group list so they can comment on the use case.

I think the case warrants some discussion. Some initial reactions to your illustrated solution:

  1. The text descriptions and this particular use case seems to be better suited for <figcaption>.
  2. The <source> element currently lacks an alt attribute - and adding an alt attribute has known issues (e.g., it's problematic in internationalized contexts).
  3. Using alt on source may overburden the developer by requiring them to hidden metadata - would be better, IMHO, if there was a solution where the textual descriptions where just part of the normal flow (i.e., like figcaption or just a p element).

brucelawson commented Oct 8, 2012

Alt text doesn't describe an image - it's not a caption - but tells a user what an image is intended to represent. (Spec says "The specific requirements for the alt attribute depend on what the image is intended to represent" - http://dev.w3.org/html5/spec/the-img-element.html#general-guidelines).

For example, imagine that a responsive "art-directed" image depicting market share of various browsers. Narrow screens get a pie chart; wide screens get an infographic-style diagram of market share of different browsers - 5 lines of people, each person glyph representing 10 million users, each line coloured according to the logo colours of the browser in question.

Alt text for each could be "Browser market share chart, showing x% for Opera (270 million users), y% for IE (900 million users ... etc". Both images represent the same information (albeit in different ways), which is similarly represented by the alternate text.

The fact that one is a pie chart and one is an "infographic" does not matter to alt text. A description of the presentation of the image ("Opera's market share is represented by 27 red people") is not a description of what it represents.

I think @brucelawson is correct in the image(s) he describes I also think @chsWeb is correct in the images he describes. an image of Obama alone is differnet from obama and familiy. It all depends on context. @marcoscaceres mentions figure/cpation which i think is a reasonable alternative for pictures in many circumstances, but that will still involve chnages of text dependent on which image is being displayed. I also agree that asking developers to provide multiple alt texts is a big ask. A compromise suggestion is that the fallback image is the uncropped image and has the full alt text, not ideal but...

Come on, responsive images and alt text are both for representing an information in different ways.
You have a big image, a small image, a text. These are three ways to communicate the same information. The text version is not a way to describe an image.
Please remember the purpose of responsive images is just to circumvent device limitations. It should not have semantic implications IMHO.

The only reason to have multiple alt text is if your text is huge, and fills the bandwidth. I think it never happens, but in that unlikely case, using text as multiple <source> elements would be more sensible.

I'm with @brucelawson on this - the different versions of images may be art-directed differently (small: Obama solo, large: Obama family) but they shouldn't contain different content.

In @chsWeb's example, if a person using a screenreader on a tiny screen is given the alt text "Obama and his family" they won't be having the exact same experience as a sighted user on that size screen; instead they'll be having the desktop experience. That feels like the right choice to me - the fundamental content of the picture shouldn't change on different sized screens. (Same as the idea we follow for text content - we rearrange it, maybe massage it, but don't drastically edit or remove it based on screen size.)


marcoscaceres commented Oct 9, 2012

So, reading the feedback, it seems that current best practices (HTML5: Techniques for providing useful text alternatives) still apply here. If <picture> gets implemented, we should update that spec with the appropriate guidelines. @stevefaulkner, agree?

@marcoscaceres yes, if starts getting used I can add specific gudiance to HTML5: Techniques for providing useful text alternatives about how to provide appropriate text alternatives.


marcoscaceres commented Oct 10, 2012

That works for me. Closing pending implementation - will bug @stevefaulkner if this gets any traction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment