WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Infographic: Web Accessibility for Designers

for

Number of posts in this thread: 6 (In chronological order)

From: John E Brandt
Date: Tue, Aug 30 2011 1:24PM
Subject: Infographic: Web Accessibility for Designers
No previous message | Next message →

Reading the WebAIM Newsletter which just arrived (moments ago) about
"Infographic: Web Accessibility for Designers." It is described as "This new
infographic highlights important principles of accessible web design."



Wondering how it is to be used. Is this just a graphic that one could post
on the wall in the computer lab, or a handout in a workshop? Could the
content be made better by providing links to resources on the WebAIM site
that explains these concept more fully and provides details on how to
accomplish these ideas?



There are several "principles" that raise questions for me.



~j



John E. Brandt

www.jebswebs.com
= EMAIL ADDRESS REMOVED =

207-622-7937

Augusta, Maine, USA

From: Jared Smith
Date: Tue, Aug 30 2011 1:42PM
Subject: Re: Infographic: Web Accessibility for Designers
← Previous message | Next message →

On Tue, Aug 30, 2011 at 1:25 PM, John E Brandt < = EMAIL ADDRESS REMOVED = > wrote:
> Reading the WebAIM Newsletter which just arrived (moments ago) about
> "Infographic: Web Accessibility for Designers."

This infographic is located at http://webaim.org/resources/designers/

> Wondering how it is to be used. Is this just a graphic that one could post
> on the wall in the computer lab, or a handout in a workshop?

Sure. It's intended to be a quick reference for designers, and we hope
it can be used in a variety of ways.

> Could the
> content be made better by providing links to resources on the WebAIM site
> that explains these concept more fully and provides details on how to
> accomplish these ideas?

I have added many links to other articles which provide additional detail.

> There are several "principles" that raise questions for me.

Namely?

Jared Smith
WebAIM.org

From: John E Brandt
Date: Tue, Aug 30 2011 2:12PM
Subject: Re: Infographic: Web Accessibility for Designers
← Previous message | Next message →

This one was a little "vague"...

<Remember Line Length - Don't make it too long or too short.>

It sounds like an old joke. What exactly is "line length?" And what is too
long and too short?


And this one caught my attention as new and one I've never heard before (it
is not in any standards I am aware of)

<Design Link Focus Indicators - Ensure keyboard users can visually identify
a focused link. Use the standard dotted line or other non-color
designators.>

I checked all of my sites and all of them are fine except the ones built in
Joomla and one built in WordPress. I expect the template maker turned it off
in the CSS somewhere - those rascals - why would you do that? Now the
challenge will be to find it and fix it. Ugh.


Wondering if your designer could create a version that would print nicely on
8.5 x 11 paper or other standard paper size. Resizing the PNG is not very
sharp. Maybe it works at poster sizes, but would need a larger file.

~j

John E. Brandt
www.jebswebs.com
= EMAIL ADDRESS REMOVED =
207-622-7937
Augusta, Maine, USA

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Tuesday, August 30, 2011 3:39 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Infographic: Web Accessibility for Designers

On Tue, Aug 30, 2011 at 1:25 PM, John E Brandt < = EMAIL ADDRESS REMOVED = > wrote:
> Reading the WebAIM Newsletter which just arrived (moments ago) about
> "Infographic: Web Accessibility for Designers."

This infographic is located at http://webaim.org/resources/designers/

> Wondering how it is to be used. Is this just a graphic that one could
> post on the wall in the computer lab, or a handout in a workshop?

Sure. It's intended to be a quick reference for designers, and we hope it
can be used in a variety of ways.

> Could the
> content be made better by providing links to resources on the WebAIM
> site that explains these concept more fully and provides details on
> how to accomplish these ideas?

I have added many links to other articles which provide additional detail.

> There are several "principles" that raise questions for me.

Namely?

Jared Smith
WebAIM.org

From: Jim Allan
Date: Tue, Aug 30 2011 2:24PM
Subject: Re: Infographic: Web Accessibility for Designers
← Previous message | Next message →

John,
the CSS selector you are looking for to add the dotted line around
links and form labels is 'outline'.
when set to 0 it turns 'outline' off. just change it to 1 and all will
be restored. Designers turn it off because it messes with their visual
design. It has always been there, it wasn't until the last couple of
years that browsers actually supported authors being able to change it
in CSS.

Jim

On Tue, Aug 30, 2011 at 3:14 PM, John E Brandt < = EMAIL ADDRESS REMOVED = > wrote:
> This one was a little "vague"...
>
> <Remember Line Length - Don't make it too long or too short.>
>
> It sounds like an old joke. What exactly is "line length?" And what is too
> long and too short?
>
>
> And this one caught my attention as new and one I've never heard before (it
> is not in any standards I am aware of)
>
> <Design Link Focus Indicators - Ensure keyboard users can visually identify
> a focused link. Use the standard dotted line or other non-color
> designators.>
>
> I checked all of my sites and all of them are fine except the ones built in
> Joomla and one built in WordPress. I expect the template maker turned it off
> in the CSS somewhere - those rascals - why would you do that? Now the
> challenge will be to find it and fix it. Ugh.
>
>
> Wondering if your designer could create a version that would print nicely on
> 8.5 x 11 paper or other standard paper size. Resizing the PNG is not very
> sharp. Maybe it works at poster sizes, but would need a larger file.
>
> ~j
>
> John E. Brandt
> www.jebswebs.com
> = EMAIL ADDRESS REMOVED =
> 207-622-7937
> Augusta, Maine, USA
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
> Sent: Tuesday, August 30, 2011 3:39 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Infographic: Web Accessibility for Designers
>
> On Tue, Aug 30, 2011 at 1:25 PM, John E Brandt < = EMAIL ADDRESS REMOVED = > wrote:
>> Reading the WebAIM Newsletter which just arrived (moments ago) about
>> "Infographic: Web Accessibility for Designers."
>
> This infographic is located at http://webaim.org/resources/designers/
>
>> Wondering how it is to be used. Is this just a graphic that one could
>> post on the wall in the computer lab, or a handout in a workshop?
>
> Sure. It's intended to be a quick reference for designers, and we hope it
> can be used in a variety of ways.
>
>> Could the
>> content be made better by providing links to resources on the WebAIM
>> site that explains these concept more fully and provides details on
>> how to accomplish these ideas?
>
> I have added many links to other articles which provide additional detail.
>
>> There are several "principles" that raise questions for me.
>
> Namely?
>
> Jared Smith
> WebAIM.org
>

From: Jared Smith
Date: Tue, Aug 30 2011 2:33PM
Subject: Re: Infographic: Web Accessibility for Designers
← Previous message | Next message →

On Tue, Aug 30, 2011 at 2:14 PM, John E Brandt < = EMAIL ADDRESS REMOVED = > wrote:
> This one was a little "vague"...
>
> <Remember Line Length - Don't make it too long or too short.>
>
> It sounds like an old joke. What exactly is "line length?" And what is too
> long and too short?

This is one of those "you know it when you see it" things. Defining a
character limit per line isn't very friendly because the readability
of the lines of text can vary greatly based on the font face used.
I've seen maximum number recommendations that range from 50 characters
to 100 characters. Quite a range! WCAG 2.0 Draft documentation at one
time recommended 100 characters, but this issue is no longer addressed
by WCAG.

The point is to consider it. Designers aren't likely to count
characters anyway - if it looks too long or too short, it probably is.

> I expect the template maker turned it off
> in the CSS somewhere - those rascals - why would you do that? Now the
> challenge will be to find it and fix it. Ugh.

This is caused by the inclusion of outline:0 or ouline:none styles
applied to links. It should be an easy fix in the CSS - just remove
this style definition. It will have no impact on layout in any modern
browser. More details at http://webaim.org/blog/plague-of-outline-0/

> Wondering if your designer could create a version that would print nicely on
> 8.5 x 11 paper or other standard paper size.

Yes, we'll certainly consider this.

Jared

From: John E Brandt
Date: Wed, Aug 31 2011 11:18AM
Subject: Re: Infographic: Web Accessibility for Designers
← Previous message | No next message

Bless you, Jim. Off to "happy hunting"

John E. Brandt
www.jebswebs.com
= EMAIL ADDRESS REMOVED =
207-622-7937
Augusta, Maine, USA

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Tuesday, August 30, 2011 4:23 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Infographic: Web Accessibility for Designers

John,
the CSS selector you are looking for to add the dotted line around links and
form labels is 'outline'.
when set to 0 it turns 'outline' off. just change it to 1 and all will be
restored. Designers turn it off because it messes with their visual design.
It has always been there, it wasn't until the last couple of years that
browsers actually supported authors being able to change it in CSS.

Jim

On Tue, Aug 30, 2011 at 3:14 PM, John E Brandt < = EMAIL ADDRESS REMOVED = > wrote:
> This one was a little "vague"...
>
> <Remember Line Length - Don't make it too long or too short.>
>
> It sounds like an old joke. What exactly is "line length?" And what is
> too long and too short?
>
>
> And this one caught my attention as new and one I've never heard
> before (it is not in any standards I am aware of)
>
> <Design Link Focus Indicators - Ensure keyboard users can visually
> identify a focused link. Use the standard dotted line or other
> non-color designators.>
>
> I checked all of my sites and all of them are fine except the ones
> built in Joomla and one built in WordPress. I expect the template
> maker turned it off in the CSS somewhere - those rascals - why would
> you do that? Now the challenge will be to find it and fix it. Ugh.
>
>
> Wondering if your designer could create a version that would print
> nicely on
> 8.5 x 11 paper or other standard paper size. Resizing the PNG is not
> very sharp. Maybe it works at poster sizes, but would need a larger file.
>
> ~j
>
> John E. Brandt
> www.jebswebs.com
> = EMAIL ADDRESS REMOVED =
> 207-622-7937
> Augusta, Maine, USA
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
> Sent: Tuesday, August 30, 2011 3:39 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Infographic: Web Accessibility for Designers
>
> On Tue, Aug 30, 2011 at 1:25 PM, John E Brandt < = EMAIL ADDRESS REMOVED = > wrote:
>> Reading the WebAIM Newsletter which just arrived (moments ago) about
>> "Infographic: Web Accessibility for Designers."
>
> This infographic is located at http://webaim.org/resources/designers/
>
>> Wondering how it is to be used. Is this just a graphic that one could
>> post on the wall in the computer lab, or a handout in a workshop?
>
> Sure. It's intended to be a quick reference for designers, and we hope
> it can be used in a variety of ways.
>
>> Could the
>> content be made better by providing links to resources on the WebAIM
>> site that explains these concept more fully and provides details on
>> how to accomplish these ideas?
>
> I have added many links to other articles which provide additional detail.
>
>> There are several "principles" that raise questions for me.
>
> Namely?
>
> Jared Smith
> WebAIM.org
>