Re: [AI] Knowledge sharing: Where and How to use Alternate Text WCAG 2.0

[Srinivasu Chakravarthula]

Hi Swarna,
Surely, we can. One way is to document findings and send it to the
respective website owners. May be the best would be pick up one website,
report issues and follow up till they fix it.

Secondly, there is an initiative called fixtheweb.net I'm unsure, how
effectively it wouldd work for India.

May be let's talk m ore offline and plan something.

Moderator, please let us know, if we are violating the guidelines in
anyway.
Thanks,
-Srini

On Tue, Aug 28, 2012 at 10:15 AM, Swarna Lakshmi wrote:

> Srini,
>
> Thanks a lot for such a detailed explanation.
> Another question of mine is that, is there any way that we can take
> initiatives and report the web developers of some of the most
> frequently used sites, for the accessibility issues?
>
> Regards,
> Swarna.
>
> On 8/27/12, Srinivasu Chakravarthula  wrote:
> > Hi Swarna,
> > Certainly, something can be done for existing web pages too; developer
> > needs to fix the problem. It's like adding a little piece of additional
> > code. Here is an example:
> > Bad example:
> > http://something.com/picture.jpg";>
> >
> > Good example:
> > http://something.com/picture.jpg"; alt="Image description">
> > If image is used for decorative / spacer purpose, then right thing to do
> is
> > providing null alt attribute.
> >
> > Thanks,
> > -Srini
> >
> > On Mon, Aug 27, 2012 at 11:23 AM, Swarna Lakshmi
> > wrote:
> >
> >> Hi Srini,
> >>
> >> Thanks a lot for the explanation, apparently nothing can be done with
> >> already developed web pages?
> >>
> >> Regards,
> >> Swarna.
> >>
> >> On 8/27/12, Srinivasu Chakravarthula  wrote:
> >> > Dear Swarna,
> >> > It's neither a software nor any other program. It's a piece of code
> >> > that
> >> a
> >> > web developer need to incorporate on web pages to convey the
> >> > description
> >> of
> >> > the images.
> >> >
> >> > Best,
> >> > -Srinivasu
> >> >
> >> > On Mon, Aug 27, 2012 at 11:02 AM, Swarna Lakshmi
> >> > wrote:
> >> >
> >> >> Hi Srini,
> >> >>
> >> >> As I joined the discussion late I just have an idea about Alt Text.
> >> >>
> >> >> I just wanted to know that is it a software to be installed or a
> >> >> program to be written and compiled?
> >> >>
> >> >> I am sorry if I have asked you anything wrong.
> >> >>
> >> >> Regards,
> >> >> Swarna.
> >> >>
> >> >> On 8/24/12, Suman Damera  wrote:
> >> >> > Thanks Srini for such a detailed explanation about the significance
> >> >> > of
> >> >> > alt text in web pages!
> >> >> >
> >> >> > On 8/23/12, Srinivasu Chakravarthula  wrote:
> >> >> >> Taken from a blog post
> >> >> >>
> >> >> >> Alt text (or text alternatives) are words that show up in place of
> >> >> >> an
> >> >> >> image, when that image can’t be loaded. Images are sometimes
> turned
> >> >> >> off
> >> >> >> by
> >> >> >> users with slow internet connections and blind users often use
> >> >> >> screen
> >> >> >> reader software that reads the alt text aloud when it reaches the
> >> >> >> image.
> >> >> >> The Web Content Accessibility Guidelines (WCAG) 2.0 demand alt
> text
> >> >> >> for
> >> >> >> images in most cases.
> >> >> >>
> >> >> >> The text is meant as a replacement for the image – not in addition
> >> >> >> to
> >> >> it.
> >> >> >> This means the text should describe the image and give the same
> >> >> >> information
> >> >> >> as the image would if seen. This isn’t always easy and people
> don’t
> >> >> >> always
> >> >> >> agree on what the ‘same’ information is. The best bet is to be
> >> >> >> honest
> >> >> >> with
> >> >> >> yourself – what does the picture convey?
> >> >> >>
> >> >> >> If the image is your company logo, your company name is a good
> bet.
> >> If
> >> >> >> the
> >> >> >> image is of text, replicate the text exactly. For all other
> images,
> >> >> >> describe the image helpfully and succinctly – we don’t need to
> know
> >> >> >> it’s
> >> >> >> a
> >> >> >> picture of 17,387 trees if ‘forest’ would do.
> >> >> >>
> >> >> >> Whatever you do, don’t see alt text as a great resource for
> keyword
> >> >> >> stuffing. Adding out-of-context keywords as alt text is terrible
> >> >> >> for
> >> >> >> accessibility, does not meet WCAG 2.0 guidelines and has minimal
> to
> >> no
> >> >> >> search engine optimisation benefits.
> >> >> >> What to do
> >> >> >>
> >> >> >>- Add alt text to all of your images
> >> >> >>- Add a name to all of your buttons (such as ‘Search’ or
> >> >> >> ‘Submit’)
> >> >> >>
> >> >> >> How to do it
> >> >> >>
> >> >> >> If you’re using a good quality content management system, you will
> >> >> >> be
> >> >> >> able
> >> >> >> to add alt text with very little effort. For example, WordPress
> >> allows
> >> >> >> you
> >> >> >> to edit the alt text of all images that you insert into posts and
> >> >> >> pages.
> >> >> >> If
> >> >> >> you’ve got something a little more bespoke, here is some
> >> >> >> information
> >> >> >> and
> >> >> >> code that will help:
> >> >> >>
> >> >> >> An image on a website has two essential elements, its source 

Re: [AI] Knowledge sharing: Where and How to use Alternate Text WCAG 2.0

[Swarna Lakshmi]

Srini,

Thanks a lot for such a detailed explanation.
Another question of mine is that, is there any way that we can take
initiatives and report the web developers of some of the most
frequently used sites, for the accessibility issues?

Regards,
Swarna.

On 8/27/12, Srinivasu Chakravarthula  wrote:
> Hi Swarna,
> Certainly, something can be done for existing web pages too; developer
> needs to fix the problem. It's like adding a little piece of additional
> code. Here is an example:
> Bad example:
> http://something.com/picture.jpg";>
>
> Good example:
> http://something.com/picture.jpg"; alt="Image description">
> If image is used for decorative / spacer purpose, then right thing to do is
> providing null alt attribute.
>
> Thanks,
> -Srini
>
> On Mon, Aug 27, 2012 at 11:23 AM, Swarna Lakshmi
> wrote:
>
>> Hi Srini,
>>
>> Thanks a lot for the explanation, apparently nothing can be done with
>> already developed web pages?
>>
>> Regards,
>> Swarna.
>>
>> On 8/27/12, Srinivasu Chakravarthula  wrote:
>> > Dear Swarna,
>> > It's neither a software nor any other program. It's a piece of code
>> > that
>> a
>> > web developer need to incorporate on web pages to convey the
>> > description
>> of
>> > the images.
>> >
>> > Best,
>> > -Srinivasu
>> >
>> > On Mon, Aug 27, 2012 at 11:02 AM, Swarna Lakshmi
>> > wrote:
>> >
>> >> Hi Srini,
>> >>
>> >> As I joined the discussion late I just have an idea about Alt Text.
>> >>
>> >> I just wanted to know that is it a software to be installed or a
>> >> program to be written and compiled?
>> >>
>> >> I am sorry if I have asked you anything wrong.
>> >>
>> >> Regards,
>> >> Swarna.
>> >>
>> >> On 8/24/12, Suman Damera  wrote:
>> >> > Thanks Srini for such a detailed explanation about the significance
>> >> > of
>> >> > alt text in web pages!
>> >> >
>> >> > On 8/23/12, Srinivasu Chakravarthula  wrote:
>> >> >> Taken from a blog post
>> >> >>
>> >> >> Alt text (or text alternatives) are words that show up in place of
>> >> >> an
>> >> >> image, when that image can’t be loaded. Images are sometimes turned
>> >> >> off
>> >> >> by
>> >> >> users with slow internet connections and blind users often use
>> >> >> screen
>> >> >> reader software that reads the alt text aloud when it reaches the
>> >> >> image.
>> >> >> The Web Content Accessibility Guidelines (WCAG) 2.0 demand alt text
>> >> >> for
>> >> >> images in most cases.
>> >> >>
>> >> >> The text is meant as a replacement for the image – not in addition
>> >> >> to
>> >> it.
>> >> >> This means the text should describe the image and give the same
>> >> >> information
>> >> >> as the image would if seen. This isn’t always easy and people don’t
>> >> >> always
>> >> >> agree on what the ‘same’ information is. The best bet is to be
>> >> >> honest
>> >> >> with
>> >> >> yourself – what does the picture convey?
>> >> >>
>> >> >> If the image is your company logo, your company name is a good bet.
>> If
>> >> >> the
>> >> >> image is of text, replicate the text exactly. For all other images,
>> >> >> describe the image helpfully and succinctly – we don’t need to know
>> >> >> it’s
>> >> >> a
>> >> >> picture of 17,387 trees if ‘forest’ would do.
>> >> >>
>> >> >> Whatever you do, don’t see alt text as a great resource for keyword
>> >> >> stuffing. Adding out-of-context keywords as alt text is terrible
>> >> >> for
>> >> >> accessibility, does not meet WCAG 2.0 guidelines and has minimal to
>> no
>> >> >> search engine optimisation benefits.
>> >> >> What to do
>> >> >>
>> >> >>- Add alt text to all of your images
>> >> >>- Add a name to all of your buttons (such as ‘Search’ or
>> >> >> ‘Submit’)
>> >> >>
>> >> >> How to do it
>> >> >>
>> >> >> If you’re using a good quality content management system, you will
>> >> >> be
>> >> >> able
>> >> >> to add alt text with very little effort. For example, WordPress
>> allows
>> >> >> you
>> >> >> to edit the alt text of all images that you insert into posts and
>> >> >> pages.
>> >> >> If
>> >> >> you’ve got something a little more bespoke, here is some
>> >> >> information
>> >> >> and
>> >> >> code that will help:
>> >> >>
>> >> >> An image on a website has two essential elements, its source and
>> >> >> its
>> >> >> alternative. The source is the location of the image and the
>> >> >> alternative
>> >> >> is
>> >> >> what I’ve just been talking about.
>> >> >> ?
>> >> >> > >
>> >> >> 1
>> >> >> 
>> >> >>
>> >> >> Here’s how a form might look like with names added.
>> >> >> ?
>> >> >> > >
>> >> >> 1
>> >> >> 2
>> >> >> 3
>> >> >> 4
>> >> >> 5
>> >> >> 6
>> >> >> 7
>> >> >> 
>> >> >> Option One
>> >> >> 
>> >> >> < /br>
>> >> >> Option Two,
>> >> >> 
>> >> >> 
>> >> >> Auditing alt text
>> >> >>
>> >> >> Alt text is relatively simple to audit and easy to fix, making this
>> >> >> a
>> >> >> quick-win WCAG 2.0 guideline. One of the best w

Re: [AI] Knowledge sharing: Where and How to use Alternate Text WCAG 2.0

[Srinivasu Chakravarthula]

Hi Swarna,
Certainly, something can be done for existing web pages too; developer
needs to fix the problem. It's like adding a little piece of additional
code. Here is an example:
Bad example:
http://something.com/picture.jpg";>

Good example:
http://something.com/picture.jpg"; alt="Image description">
If image is used for decorative / spacer purpose, then right thing to do is
providing null alt attribute.

Thanks,
-Srini

On Mon, Aug 27, 2012 at 11:23 AM, Swarna Lakshmi wrote:

> Hi Srini,
>
> Thanks a lot for the explanation, apparently nothing can be done with
> already developed web pages?
>
> Regards,
> Swarna.
>
> On 8/27/12, Srinivasu Chakravarthula  wrote:
> > Dear Swarna,
> > It's neither a software nor any other program. It's a piece of code that
> a
> > web developer need to incorporate on web pages to convey the description
> of
> > the images.
> >
> > Best,
> > -Srinivasu
> >
> > On Mon, Aug 27, 2012 at 11:02 AM, Swarna Lakshmi
> > wrote:
> >
> >> Hi Srini,
> >>
> >> As I joined the discussion late I just have an idea about Alt Text.
> >>
> >> I just wanted to know that is it a software to be installed or a
> >> program to be written and compiled?
> >>
> >> I am sorry if I have asked you anything wrong.
> >>
> >> Regards,
> >> Swarna.
> >>
> >> On 8/24/12, Suman Damera  wrote:
> >> > Thanks Srini for such a detailed explanation about the significance of
> >> > alt text in web pages!
> >> >
> >> > On 8/23/12, Srinivasu Chakravarthula  wrote:
> >> >> Taken from a blog post
> >> >>
> >> >> Alt text (or text alternatives) are words that show up in place of an
> >> >> image, when that image can’t be loaded. Images are sometimes turned
> >> >> off
> >> >> by
> >> >> users with slow internet connections and blind users often use screen
> >> >> reader software that reads the alt text aloud when it reaches the
> >> >> image.
> >> >> The Web Content Accessibility Guidelines (WCAG) 2.0 demand alt text
> >> >> for
> >> >> images in most cases.
> >> >>
> >> >> The text is meant as a replacement for the image – not in addition to
> >> it.
> >> >> This means the text should describe the image and give the same
> >> >> information
> >> >> as the image would if seen. This isn’t always easy and people don’t
> >> >> always
> >> >> agree on what the ‘same’ information is. The best bet is to be honest
> >> >> with
> >> >> yourself – what does the picture convey?
> >> >>
> >> >> If the image is your company logo, your company name is a good bet.
> If
> >> >> the
> >> >> image is of text, replicate the text exactly. For all other images,
> >> >> describe the image helpfully and succinctly – we don’t need to know
> >> >> it’s
> >> >> a
> >> >> picture of 17,387 trees if ‘forest’ would do.
> >> >>
> >> >> Whatever you do, don’t see alt text as a great resource for keyword
> >> >> stuffing. Adding out-of-context keywords as alt text is terrible for
> >> >> accessibility, does not meet WCAG 2.0 guidelines and has minimal to
> no
> >> >> search engine optimisation benefits.
> >> >> What to do
> >> >>
> >> >>- Add alt text to all of your images
> >> >>- Add a name to all of your buttons (such as ‘Search’ or ‘Submit’)
> >> >>
> >> >> How to do it
> >> >>
> >> >> If you’re using a good quality content management system, you will be
> >> >> able
> >> >> to add alt text with very little effort. For example, WordPress
> allows
> >> >> you
> >> >> to edit the alt text of all images that you insert into posts and
> >> >> pages.
> >> >> If
> >> >> you’ve got something a little more bespoke, here is some information
> >> >> and
> >> >> code that will help:
> >> >>
> >> >> An image on a website has two essential elements, its source and its
> >> >> alternative. The source is the location of the image and the
> >> >> alternative
> >> >> is
> >> >> what I’ve just been talking about.
> >> >> ?
> >> >>  >
> >> >> 1
> >> >> 
> >> >>
> >> >> Here’s how a form might look like with names added.
> >> >> ?
> >> >>  >
> >> >> 1
> >> >> 2
> >> >> 3
> >> >> 4
> >> >> 5
> >> >> 6
> >> >> 7
> >> >> 
> >> >> Option One
> >> >> 
> >> >> < /br>
> >> >> Option Two,
> >> >> 
> >> >> 
> >> >> Auditing alt text
> >> >>
> >> >> Alt text is relatively simple to audit and easy to fix, making this a
> >> >> quick-win WCAG 2.0 guideline. One of the best ways is to add the WAVE
> >> >> toolbar  to Firefox and check a
> page.
> >> As
> >> >> most sites have a standard template, you can catch your biggest
> issues
> >> >> with
> >> >> one sweep. Banners, sidebar images and footers only need fixing once
> >> >> to
> >> >> improve every page on your site. After that, you’ll need to do
> >> >> page-by-page
> >> >> checking.
> >> >>
> >> >> If you want a more in-depth and hands-off solution, you can request
> an
> >> >> accessibility audit  of your whole
>

Re: [AI] Knowledge sharing: Where and How to use Alternate Text WCAG 2.0

[Srinivasu Chakravarthula]

Dear Swarna,
It's neither a software nor any other program. It's a piece of code that a
web developer need to incorporate on web pages to convey the description of
the images.

Best,
-Srinivasu

On Mon, Aug 27, 2012 at 11:02 AM, Swarna Lakshmi wrote:

> Hi Srini,
>
> As I joined the discussion late I just have an idea about Alt Text.
>
> I just wanted to know that is it a software to be installed or a
> program to be written and compiled?
>
> I am sorry if I have asked you anything wrong.
>
> Regards,
> Swarna.
>
> On 8/24/12, Suman Damera  wrote:
> > Thanks Srini for such a detailed explanation about the significance of
> > alt text in web pages!
> >
> > On 8/23/12, Srinivasu Chakravarthula  wrote:
> >> Taken from a blog post
> >>
> >> Alt text (or text alternatives) are words that show up in place of an
> >> image, when that image can’t be loaded. Images are sometimes turned off
> >> by
> >> users with slow internet connections and blind users often use screen
> >> reader software that reads the alt text aloud when it reaches the image.
> >> The Web Content Accessibility Guidelines (WCAG) 2.0 demand alt text for
> >> images in most cases.
> >>
> >> The text is meant as a replacement for the image – not in addition to
> it.
> >> This means the text should describe the image and give the same
> >> information
> >> as the image would if seen. This isn’t always easy and people don’t
> >> always
> >> agree on what the ‘same’ information is. The best bet is to be honest
> >> with
> >> yourself – what does the picture convey?
> >>
> >> If the image is your company logo, your company name is a good bet. If
> >> the
> >> image is of text, replicate the text exactly. For all other images,
> >> describe the image helpfully and succinctly – we don’t need to know it’s
> >> a
> >> picture of 17,387 trees if ‘forest’ would do.
> >>
> >> Whatever you do, don’t see alt text as a great resource for keyword
> >> stuffing. Adding out-of-context keywords as alt text is terrible for
> >> accessibility, does not meet WCAG 2.0 guidelines and has minimal to no
> >> search engine optimisation benefits.
> >> What to do
> >>
> >>- Add alt text to all of your images
> >>- Add a name to all of your buttons (such as ‘Search’ or ‘Submit’)
> >>
> >> How to do it
> >>
> >> If you’re using a good quality content management system, you will be
> >> able
> >> to add alt text with very little effort. For example, WordPress allows
> >> you
> >> to edit the alt text of all images that you insert into posts and pages.
> >> If
> >> you’ve got something a little more bespoke, here is some information and
> >> code that will help:
> >>
> >> An image on a website has two essential elements, its source and its
> >> alternative. The source is the location of the image and the alternative
> >> is
> >> what I’ve just been talking about.
> >> ? 
> >> 1
> >> 
> >>
> >> Here’s how a form might look like with names added.
> >> ? 
> >> 1
> >> 2
> >> 3
> >> 4
> >> 5
> >> 6
> >> 7
> >> 
> >> Option One
> >> 
> >> < /br>
> >> Option Two,
> >> 
> >> 
> >> Auditing alt text
> >>
> >> Alt text is relatively simple to audit and easy to fix, making this a
> >> quick-win WCAG 2.0 guideline. One of the best ways is to add the WAVE
> >> toolbar  to Firefox and check a page.
> As
> >> most sites have a standard template, you can catch your biggest issues
> >> with
> >> one sweep. Banners, sidebar images and footers only need fixing once to
> >> improve every page on your site. After that, you’ll need to do
> >> page-by-page
> >> checking.
> >>
> >> If you want a more in-depth and hands-off solution, you can request an
> >> accessibility audit  of your whole
> >> website
> >> for alt text and other issues.
> >> One more thing
> >> [image: Forest]
> >>
> >> Photo credit 
> >>
> >> There are a few types of image that don’t need alt text: spacers, icons,
> >> purely decorative, tests and CAPTCHA images.
> >>
> >> Icons are usually used to complement text not replace it, so there’s no
> >> need to duplicate your efforts here. Users with screen readers would
> just
> >> hear the same thing twice anyway – which is the opposite of what we’re
> >> trying to do.
> >>
> >> Spacers are images used for padding, often for ease and not good coding.
> >> They are used to preserve formatting and present no information so don’t
> >> need alt text.
> >>
> >> Decorative images are ones used just because they look nice, they have
> no
> >> information or use other than aesthetics.
> >>
> >> Tests and CAPTCHAs would be undermined by text alternatives so you don’t
> >> need them – although if you do use CAPTCHA, use one with an audio
> >> alternative or add contact details to help blind users.
> >>
> >> In all theses cases, use wha

[AI] Knowledge sharing: Where and How to use Alternate Text WCAG 2.0

[Srinivasu Chakravarthula]

Taken from a blog post

Alt text (or text alternatives) are words that show up in place of an
image, when that image can’t be loaded. Images are sometimes turned off by
users with slow internet connections and blind users often use screen
reader software that reads the alt text aloud when it reaches the image.
The Web Content Accessibility Guidelines (WCAG) 2.0 demand alt text for
images in most cases.

The text is meant as a replacement for the image – not in addition to it.
This means the text should describe the image and give the same information
as the image would if seen. This isn’t always easy and people don’t always
agree on what the ‘same’ information is. The best bet is to be honest with
yourself – what does the picture convey?

If the image is your company logo, your company name is a good bet. If the
image is of text, replicate the text exactly. For all other images,
describe the image helpfully and succinctly – we don’t need to know it’s a
picture of 17,387 trees if ‘forest’ would do.

Whatever you do, don’t see alt text as a great resource for keyword
stuffing. Adding out-of-context keywords as alt text is terrible for
accessibility, does not meet WCAG 2.0 guidelines and has minimal to no
search engine optimisation benefits.
What to do

   - Add alt text to all of your images
   - Add a name to all of your buttons (such as ‘Search’ or ‘Submit’)

How to do it

If you’re using a good quality content management system, you will be able
to add alt text with very little effort. For example, WordPress allows you
to edit the alt text of all images that you insert into posts and pages. If
you’ve got something a little more bespoke, here is some information and
code that will help:

An image on a website has two essential elements, its source and its
alternative. The source is the location of the image and the alternative is
what I’ve just been talking about.
? 
1


Here’s how a form might look like with names added.
? 
1
2
3
4
5
6
7

Option One

< /br>
Option Two,


Auditing alt text

Alt text is relatively simple to audit and easy to fix, making this a
quick-win WCAG 2.0 guideline. One of the best ways is to add the WAVE
toolbar  to Firefox and check a page. As
most sites have a standard template, you can catch your biggest issues with
one sweep. Banners, sidebar images and footers only need fixing once to
improve every page on your site. After that, you’ll need to do page-by-page
checking.

If you want a more in-depth and hands-off solution, you can request an
accessibility audit  of your whole website
for alt text and other issues.
One more thing
[image: Forest]

Photo credit 

There are a few types of image that don’t need alt text: spacers, icons,
purely decorative, tests and CAPTCHA images.

Icons are usually used to complement text not replace it, so there’s no
need to duplicate your efforts here. Users with screen readers would just
hear the same thing twice anyway – which is the opposite of what we’re
trying to do.

Spacers are images used for padding, often for ease and not good coding.
They are used to preserve formatting and present no information so don’t
need alt text.

Decorative images are ones used just because they look nice, they have no
information or use other than aesthetics.

Tests and CAPTCHAs would be undermined by text alternatives so you don’t
need them – although if you do use CAPTCHA, use one with an audio
alternative or add contact details to help blind users.

In all theses cases, use what is called ‘null’ alt text by simply leaving
the alt text out – but do put the quotes in:
? 
1


Screen readers will then skip the image rather than reading the filename or
trying to substitute an alt text.

That’s all there is to alt text! Is there anything you’d like to add or any
questions you have? Leave a comment below and I’ll be sure to respond.
Don’t forget, you can now buy the
bookand learn about
all the web accessibility guidelines at once!


-- 
Regards,

Srinivasu Chakravarthula - Twitter: http://www.twitter.com/VasuTweets
Website: http://www.srinivasu.org | http://www.learnaccessibility.org

Let's create an inclusive web!

Search for old postings at:
http://www.mail-archive.com/accessindia@accessindia.org.in/

To unsubscribe send a message to
accessindia-requ...@accessindia.org.in
with the subject unsubscribe.

To change your subscription to digest mode or make any other changes, please 
visit the list home page at
http://accessindia.org.in/mailman/listinfo/accessindia_accessindia.org.in