E-mail List Archives

Search E-mail List Archives for

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

From: Sandy
Date: Tue, Aug 23 2011 10:00AM
Subject: guidelines for accessible HTML and CSS - these ok?
No previous message | Next message →

hey all,

I am getting ready to work with someone who is a very capable coder but
not at all knowledgeable about accessibility. I have written some
guidelines for the HTML and CSS and I hope you can find a little time to
look them over and let me know what I've left out.

http://sandyfeldman.com/resources/guidelines/

thanks very much,
Sandy

From: Vincent Young
Date: Tue, Aug 23 2011 4:33PM
Subject: Re: guidelines for accessible HTML and CSS - these ok?
← Previous message | Next message →

One change could be:

Was:
The first item on every page is a *skip to content* link. This link takes
you to an anchor set at the very top of the content — probably just above
the <h1>

Could be:
The first item on every page has a *skip to main content* in-page link. This
link takes you to an anchor set at the very top of the main content —
probably just above the <h1>

There seems to be some things missing. What level of compliance are you
looking to achieve? If we are speaking strictly 508 you would surely want
to include requirements for FRAMES and any other missing paragraph. If you
are looking for WCAG compliance you would need to include requirements for
document language and a host of others.

You give a requirement for adding a label:
Forms need labels <label for="name">Name:</label> <input id="name"
type="text" name="textfield" />

but you might want to point the developer to other label examples that make
use of the TITLE attribute and/or FIELDSET.

You've got a good start. Hope this helps.





On Tue, Aug 23, 2011 at 12:01 PM, Sandy < = EMAIL ADDRESS REMOVED = > wrote:

> hey all,
>
> I am getting ready to work with someone who is a very capable coder but
> not at all knowledgeable about accessibility. I have written some
> guidelines for the HTML and CSS and I hope you can find a little time to
> look them over and let me know what I've left out.
>
> http://sandyfeldman.com/resources/guidelines/
>
> thanks very much,
> Sandy
>

From: deborah.kaplan
Date: Tue, Aug 23 2011 4:39PM
Subject: Re: guidelines for accessible HTML and CSS - these ok?
← Previous message | Next message →

Sandy,

Nice list! There are a few guidelines on your list that I am not so sure about.

1. "Every page has a <title> that contains the page name (which corresponds to the menu link and the <h1>) and the site name"

This very much depends on the site -- although I might be confused because I'm not sure what you mean by the "menu link".

2. "The first item on every page is a skip to content link. This link takes you to an anchor set at the very top of the content — probably just above the <h1>"

Again, this depends on the site. If not a lot of space is dedicated to navigation, this isn't always necessary.

3. "Each page contains one <h1>."

There have been debates about that on this list. It's not required by the standard, and there are no particular reports that it makes life easier for people with disabilities, unless there are some of which I'm unaware. Primarily this is an inconsistently followed convention.


4. "Images need alts which match image text and provide any additional information supplied by the image. alt="" is acceptable if the image is purely decorative, but it’s better to use CSS to put decorative images in a background"

I would add a specific comment to never leave the alt out. Other notes that I've had to give people about alt text include:
- Don't trust the alt text provided by authoring tools; they often use the filename or something else nonsensical.
- Good alt text is context dependent, and an image which is decorative it in one place and might be described as "figure of a man" in a second place might be described as "President Theodore Roosevelt riding his horse two days after his inauguration" in yet a third. The best resource I've ever seen to explain this is the webaim page on context: http://webaim.org/techniques/alttext/

5. I also think it's worth mentioning to people that the title attribute on images is inaccessible to all keyboard-only and many screenreader users. Somehow it's gotten out there that the title attribute is an accessibility tool, and people keep putting vital information in it.

6. "Disable images and check that <alts> are accurate and helpful"

This is excellent advice. I would modify the phrase slightly to "disable images and check that you can still navigate the site and understand all of the content." That's the functionality being sought, rather than the technical requirements for having accurate alternative text. This also might be a useful place to explain how to disable images, since it's only trivially easy in Opera. One piece of advice might be "install Opera", but you can also advise that they install an accessibility toolbar such as WAVE (<http://wave.webaim.org/toolbar>;) or the UIUC toolbar (<http://firefox.cita.uiuc.edu/>;) for Firefox. This will make all of their tests much easier.

7. "Check that it’s possible to access all information by tabbing through the site and using the enter key to “click”."

I would rephrase this as "Check that the site is keyboard accessible. In most cases, this will mean tabbing from link to link, and selecting links and form fields with the enter key."


It also might be worth mentioning that this list is a *starting* point for someone new to accessibility, and pointing your audience to various good next links: WebAIM, an introduction to WAI-ARIA, etc. Actually on that note, I would add "If your page is dynamic, use WAI-ARIA controls to report AJAX changes to screenreaders and other adaptive technology."

-Deborah

From: Sandy
Date: Tue, Aug 23 2011 5:06PM
Subject: Re: guidelines for accessible HTML and CSS - these ok?
← Previous message | Next message →

Vincent - it does help. Thanks very much for taking the time to do this.

best regards,
Sandy


> One change could be:
>
> Was:
> The first item on every page is a *skip to content* link. This link
> takes you to an anchor set at the very top of the content — probably
> just above the |<h1>|
>
> Could be:
> The first item on every page has a *skip to main content* in-page link.
> This link takes you to an anchor set at the very top of the main content
> — probably just above the |<h1>|
>
> There seems to be some things missing. What level of compliance are you
> looking to achieve? If we are speaking strictly 508 you would surely
> want to include requirements for FRAMES and any other missing
> paragraph. If you are looking for WCAG compliance you would need to
> include requirements for document language and a host of others.
>
> You give a requirement for adding a label:
> Forms need labels |<label for="name">Name:</label>| |<input id="name"
> type="text" name="textfield" />
>
> |but you might want to point the developer to other label examples that
> make use of the TITLE attribute and/or FIELDSET.
>
> You've got a good start. Hope this helps.
>
>
> |
>
> |
> On Tue, Aug 23, 2011 at 12:01 PM, Sandy < = EMAIL ADDRESS REMOVED =
> <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>
> hey all,
>
> I am getting ready to work with someone who is a very capable coder but
> not at all knowledgeable about accessibility. I have written some
> guidelines for the HTML and CSS and I hope you can find a little time to
> look them over and let me know what I've left out.
>
> http://sandyfeldman.com/resources/guidelines/
>
> thanks very much,
> Sandy

From: Sandy
Date: Tue, Aug 23 2011 5:12PM
Subject: Re: guidelines for accessible HTML and CSS - these ok?
← Previous message | Next message →

Deborah,

Thanks so much for taking the time to look at this.
Great notes from you and Vincent. Revised page going up tomorrow. I'll
keep you posted.

Sandy

> Nice list! There are a few guidelines on your list that I am not so sure
> about.
>
> 1. "Every page has a <title> that contains the page name (which
> corresponds to the menu link and the <h1>) and the site name"
>
> This very much depends on the site -- although I might be confused
> because I'm not sure what you mean by the "menu link".
>
> 2. "The first item on every page is a skip to content link. This link
> takes you to an anchor set at the very top of the content — probably
> just above the <h1>"
>
> Again, this depends on the site. If not a lot of space is dedicated to
> navigation, this isn't always necessary.
>
> 3. "Each page contains one <h1>."
>
> There have been debates about that on this list. It's not required by
> the standard, and there are no particular reports that it makes life
> easier for people with disabilities, unless there are some of which I'm
> unaware. Primarily this is an inconsistently followed convention.
>
>
> 4. "Images need alts which match image text and provide any additional
> information supplied by the image. alt="" is acceptable if the image is
> purely decorative, but it’s better to use CSS to put decorative images
> in a background"
>
> I would add a specific comment to never leave the alt out. Other notes
> that I've had to give people about alt text include:
> - Don't trust the alt text provided by authoring tools; they often use
> the filename or something else nonsensical.
> - Good alt text is context dependent, and an image which is decorative
> it in one place and might be described as "figure of a man" in a second
> place might be described as "President Theodore Roosevelt riding his
> horse two days after his inauguration" in yet a third. The best resource
> I've ever seen to explain this is the webaim page on context:
> http://webaim.org/techniques/alttext/
>
> 5. I also think it's worth mentioning to people that the title attribute
> on images is inaccessible to all keyboard-only and many screenreader
> users. Somehow it's gotten out there that the title attribute is an
> accessibility tool, and people keep putting vital information in it.
>
> 6. "Disable images and check that <alts> are accurate and helpful"
>
> This is excellent advice. I would modify the phrase slightly to "disable
> images and check that you can still navigate the site and understand all
> of the content." That's the functionality being sought, rather than the
> technical requirements for having accurate alternative text. This also
> might be a useful place to explain how to disable images, since it's
> only trivially easy in Opera. One piece of advice might be "install
> Opera", but you can also advise that they install an accessibility
> toolbar such as WAVE (<http://wave.webaim.org/toolbar>;) or the UIUC
> toolbar (<http://firefox.cita.uiuc.edu/>;) for Firefox. This will make
> all of their tests much easier.
>
> 7. "Check that it’s possible to access all information by tabbing
> through the site and using the enter key to “click”."
>
> I would rephrase this as "Check that the site is keyboard accessible. In
> most cases, this will mean tabbing from link to link, and selecting
> links and form fields with the enter key."
>
>
> It also might be worth mentioning that this list is a *starting* point
> for someone new to accessibility, and pointing your audience to various
> good next links: WebAIM, an introduction to WAI-ARIA, etc. Actually on
> that note, I would add "If your page is dynamic, use WAI-ARIA controls
> to report AJAX changes to screenreaders and other adaptive technology."
>
> -Deborah

From: Ryan E. Benson
Date: Tue, Aug 23 2011 8:54PM
Subject: Re: guidelines for accessible HTML and CSS - these ok?
← Previous message | No next message

Sandy.

I will take Vincent's comment a smidge further and say that skip links
should go immediately after the <body> tag versus "first item", as
they may read it as going before a DOCTYPE declaration. Since there is
a slew of ways to make skip navs, maybe linking to one you like or
making an example would help too.

--
Ryan E. Benson



On Tue, Aug 23, 2011 at 6:33 PM, Vincent Young < = EMAIL ADDRESS REMOVED = > wrote:
> One change could be:
>
> Was:
> The first item on every page is a *skip to content* link. This link takes
> you to an anchor set at the very top of the content — probably just above
> the <h1>
>
> Could be:
> The first item on every page has a *skip to main content* in-page link. This
> link takes you to an anchor set at the very top of the main content —
> probably just above the <h1>
>
> There seems to be some things missing.  What level of compliance are you
> looking to achieve?  If we are speaking strictly 508 you would surely want
> to include requirements for FRAMES and any other missing paragraph.  If you
> are looking for WCAG compliance you would need to include requirements for
> document language and a host of others.
>
> You give a requirement for adding a label:
> Forms need labels <label for="name">Name:</label> <input id="name"
> type="text" name="textfield" />
>
> but you might want to point the developer to other label examples that make
> use of the TITLE attribute and/or FIELDSET.
>
> You've got a good start.  Hope this helps.
>
>
>
>
>
> On Tue, Aug 23, 2011 at 12:01 PM, Sandy < = EMAIL ADDRESS REMOVED = > wrote:
>
>> hey all,
>>
>> I am getting ready to work with someone who is a very capable coder but
>> not at all knowledgeable about accessibility. I have written some
>> guidelines for the HTML and CSS and I hope you can find a little time to
>> look them over and let me know what I've left out.
>>
>> http://sandyfeldman.com/resources/guidelines/
>>
>> thanks very much,
>> Sandy
>>