What Is The Limit of Character to Use in Alt="Text" According to Wcag 2.0

What is the limit of character to use in alt=text according to WCAG 2.0?

there is no limit explicitly set, but conventionally they are limited to 1024 chars. I believe that I have heard that the search engines will go no further than about 200 characters. What is the use case? There is a longdesc attribute that may be of interest...

http://www.w3.org/TR/REC-html40/struct/objects.html#adef-longdesc-IMG

What is the limit of character to use in alt=“text” of img tag in html

There is no limit for the alt tag. however i recommend to keep it sort and clean, may be 125 characters or fewer.

What Alt text to use on a list of images (of books)

Given a layout that might look like this:

+-----------------+
|                 |  Night Circus
|                 |  Erin Morgenstern
|                 |
|                 |  ISBN
|                 |  A story of something or other, though
|                 |  I cannot be sure as the book is too
|                 |  far away to see clearly.
|                 |
|                 |
|                 |
+-----------------+

I would use a blank alt attribute. Stating the title / author is just verbose and adds nothing. Now, if your site is also pitching the cover art as a selling point, then I would craft custom alternative text for each image. But I don't think that fits here.

Redundant alternative text is frustrating for most screen reader users.

What does Maximum relative luminance in WCAG 2.0 general flash definition refer to?

Maximum relative luminance is simply the maximum luminance using the equation at the end of this answer.

The reason "maximum relative luminance" is used is that there are other colour spaces, but as this is web the RGB colour space is used. (so for example you could use the CMYK colour space and a different calculation would be used. However the end result is the same, 1 would be white and 0 would be black).

The 10% maximum refers to the difference between the maximum luminance vs the minimum luminance (but 10% of the maximum luminance as the difference not 10% of the minimum as that would result in a smaller difference).

So for example:-

1. If the lightest value has a luminance of 0.9 then the minimum luminance for the darkest point is 0.81 (0.9 * 10% = 0.09, 0.9 - 0.09 = 0.81).
2. Due to a second rule the following is acceptable despite being greater than a 10% variance - lightest value 0.99, darkest value 0.8 - this has a ~20% difference but the darkest value is at 0.8 relative luminance so it is OK.
3. If the lightest value has a luminance of 0.9 but the darkest luminance is 0.72 then this would require that less than 3 flashes a second occur as the difference is 20% (1 - (0.9 / 0.72) = 0.2 or 20%)

The second statement is ok due to the following note on the rules:

A general flash is defined as a pair of opposing changes in relative luminance of 10% or more of the maximum relative luminance where the relative luminance of the darker image is below 0.80; and where "a pair of opposing changes" is an increase followed by a decrease, or a decrease followed by an increase

There is a brilliant codepen that explains the relative luminance equation (points 1 to 4):

https://codepen.io/bcdon/full/qBWwWyx

Included as you have to include code with a codepen...this is the formula for Luminance using the RGB colour space.

 L = 0.2126 * R + 0.7152 * G + 0.0722 * B

After WCAG 2.0, Should we follow any guideline of WCAG 1.0?

It depends on what you are trying to achieve.

BY satisfying yourself that you are compliant with the relevant WCAG 2 accessibility guidelines (A, AA, AAA), you can display the logo on your site, proclaiming your compliance to these standards.

However, if you are wanting to achieve a practical level of accessibility on your site, and are not worried about displaying a logo, then by all means pick and choose from the available guidelines to make the most accessible site you can.

WCAG 2 is the current edition of the W3C's guidelines on accessibility, and supersedes WCAG 1, however there is one particular WCAG 1 issue that I still feel is important: providing descriptive link text.

WCAG 1 states that links should make sense if read out of context. This means that you should not have links like "read more" or "buy now". The reason for this is that screenreader users will often browse a page using a links list, which just displays all of the links on a page. If there are multiple "read more" or similar links in a row, each linking to a different page, this will be problematic for someone who cannot place them in context easily.

WCAG 2 states that link text should make sense in the context of related text e.g. the previous paragraph or heading. This allows for links such as "read more".

While there may be situations where multiple links with the same text are unavoidable, such as on a shopping site (You may have a multiple "add to basket" links), I think it is wise to follow the WCAG 1 recommendation here first and foremost, and strive to have descriptive, standalone links on your site.

This is just one example, but does show that you can pick the most useful requirements from each set of guidelines. That said, I think WCAG 2 would provide the best base level of accessibility from the current available guidelines; you may wish to augment it with custom checkpoints of your own, but by just following WCAG 2 recommendations (and the user testing mentioned below), you should be achieving a good level of accessibility.

I think general consensus would be that, regardless of which guidelines you follow, to achieve optimum accessibility you should also be looking at undertaking user testing of your site, picking users with a range of disabilities to run through typical user journeys.

I've found that this nearly always turns up issues both of an accessibility and of a usability nature that just would not be covered by following the existing guidelines (WCAG1\2, DDA, 508 etc).

How do I use/not use headers tags in a footer so the code is WCAG 2.0 AA valid?

You want sectioning elements: section, article, nav and aside.

Each sectioning element should get a heading. And you can always use h1!

So your example could look like:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <h1>test</h1>
    <p>lorem</p>
    <footer>
      <section>
        <h1>test f</h1>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
      </section>
    </footer>
</body>
</html>

---

Related Topics