Almanac.httparchive.org: Images missing alt text

Created on 8 Nov 2019 · 18Comments · Source: HTTPArchive/almanac.httparchive.org

SEO accessibility bug

Source

AymenLoukil

Most helpful comment

Well I think they are great eye-candy 😀: https://www.w3.org/WAI/tutorials/images/decorative/#image-used-for-ambiance-eye-candy

bazzadp on 9 Nov 2019

😄2

All 18 comments

It'd be helpful to know on which pages these images are used. Also a few of these are for unedited chapters

rviscomi on 9 Nov 2019

Chapter 16 were a lot of these and their fixed now and chapter is live. Could you rerun when you get a second @AymenLoukil and update your inital comment. Looks like a lot are hero images. Not sure what to do with them. Do they count as decorative so don't need it as, unlike the figures, they don't actually have meaning?

bazzadp on 9 Nov 2019

👍1

+1 also curious whether heroes need alt text.

rviscomi on 9 Nov 2019

Well I think they are great eye-candy 😀: https://www.w3.org/WAI/tutorials/images/decorative/#image-used-for-ambiance-eye-candy

bazzadp on 9 Nov 2019

😄2

Chapter 16 were a lot of these and their fixed now and chapter is live. Could you rerun when you get a second @AymenLoukil and update your inital comment. Looks like a lot are hero images. Not sure what to do with them. Do they count as decorative so don't need it as, unlike the figures, they don't actually have meaning?

My check was on the live version. You pushed to it the modfications ?

AymenLoukil on 9 Nov 2019

My check was on the live version. You pushed to it the modfications ?

@rviscomi published it to live this morning.

bazzadp on 9 Nov 2019

Ok @bazzadp thank you. I run it now

AymenLoukil on 9 Nov 2019

Updated

AymenLoukil on 9 Nov 2019

OK it looks worse 😞

However it's not as bad as it looks. We are now using this markup like the example below:

      <figure id="fig-21">
        <iframe aria-labelledby="fig21-caption" width="600" height="371" seamless="" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3GWCs19Wq0mu0zgIlKRc8zcXgmVEk2xFHuzZACiWVtqOv8FO5gfHwBxa0mhU6O9TBY8ODdN4Zjd_O/pubchart?oid=827424070&amp;format=interactive"></iframe>
        <a href="/static/images/2019/16_Caching/fig21.png" class="fig-mobile">
          <img src="/static/images/2019/16_Caching/fig21.png" width="600" aria-labelledby="fig21-caption" />
        </a>
        <div id="fig21-caption" class="visually-hidden">A stacked bar chart 38.2% of websites get a score of &lt; 10%, 29.0% of websites get a score between 10% and 39%, 18.7% of websites get a score of 40%-79%, 10.7% of websites get a score of 80% - 99%, and 3.4% of websites get a score of 100%.</div>
        <figcaption>Figure 21. Distribution of Lighthouse scores for the "Uses Long Cache TTL" audit for mobile web pages.</figcaption>
      </figure>

So in this case we do have the descriptive text - just not in an alt attribute. Instead it's in a special div: <div id="fig21-caption" class="visually-hidden">. Can't really expect the tool to know that, but it'll get worse as we convert more chapters to that format.

I say we close this issue.

bazzadp on 9 Nov 2019

👍1

One concern is that aria-labelledby works fine for a11y but I'm not sure if search indexers follow it or simply rely on the alt attribute.

rviscomi on 9 Nov 2019

SE use alt value ofc

AymenLoukil on 14 Nov 2019

One concern is that aria-labelledby works fine for a11y but I'm not sure if search indexers follow it or simply rely on the alt attribute.

I'm not sure this is the right way to go anyway. I think we should have alt tags and use aria-describedby rather than aria-labelledby. In text we say "as seen in figure 12", so I think the image should have an Alt tag of "Figure 12" (with a bit more text) so it can easily be found, and then the aria-describedby can give the full detail.

And that would then also solve this issue.

Thoughts? See an upcoming PR to see what I mean.

bazzadp on 14 Nov 2019

The alternative text should describe what the photo is about

AymenLoukil on 14 Nov 2019

Looks at this example that I'm proposing:

<figure id="fig-13">
  <iframe aria-describedby="fig13-caption" title="Figure 13. What asset types is push used for?" width="600" height="371" seamless="" frameborder="0" scrolling="no" loading="lazy" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQLxLA5Nojw28P7ceisqti3oTmNSM-HIRIR0bDb2icJS5TzONvRhdqxQcooh_45TmK97XVpot4kEQA0/pubchart?oid=466353517&amp;format=interactive"></iframe>
  <a href="/static/images/2019/20_HTTP_2/ch20_fig13_what_push_is_used_for.png" class="fig-mobile">
    <img src="/static/images/2019/20_HTTP_2/ch20_fig13_what_push_is_used_for.png" alt="Figure 13. What asset types is push used for?" aria-describedby="fig13-caption" width="600" data-width="600" data-height="371" data-seamless="" data-frameborder="0" data-scrolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQLxLA5Nojw28P7ceisqti3oTmNSM-HIRIR0bDb2icJS5TzONvRhdqxQcooh_45TmK97XVpot4kEQA0/pubchart?oid=466353517&amp;format=interactive" loading="lazy">
  </a>
  <div id="fig13-caption" class="visually-hidden">Pie chart breaking down the percent of asset types that are pushed. JavaScript makes up almost half of the assets, then CSS with about a quarter, images about an eighth, and various text-based types making up the rest.</div>
  <figcaption>Figure 13. What asset types is push used for?</figcaption>
</figure>

bazzadp on 14 Nov 2019

This one is great :100:

AymenLoukil on 14 Nov 2019

@AymenLoukil can you rerun this? Just pushed a load of descriptions for the chapters.

bazzadp on 25 Nov 2019

Ok @bazzadp

AymenLoukil on 25 Nov 2019

It is much better now. We could close the issue.

AymenLoukil on 25 Nov 2019

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Write content: Chapter 1. JavaScript

rviscomi · 3Comments

Join the 2020 Editors team

rviscomi · 3Comments

Consider users' Accept-Language preference when selecting the default language

MSakamaki · 6Comments

Create templates for content pages

rviscomi · 5Comments

[Discuss] Interactive data visualizations

rviscomi · 5Comments