Download - The Little Web Content booklet
© Access2All
The Little Web Content Book
By Penny EverettThis is the slide version of the pocket booklet – hard copies are
available by emailing [email protected]
Hi there, this is Penny Everett bringing you the screen version of the little pocket booklet
about how to make your web pages accessible.
© Access2All
About this booklet
The booklet has been prepared to help Content Authors and Editors make their web pages accessible.
This is just one aspect of making a website accessible. Good design is just as important but this is the concern of Web Developers and Designers.
The contents in this booklet cover the main problem areas that we have found when conducting web accessibility audits and is not an exhaustive list.
When I audit websites for their level of accessibility I come across a lot of errors that are
repeatedly made - and I have listed the most common ones in my pocket booklet. >
© Access2All
About this booklet
The booklet has been prepared to help Content Authors and Editors make their web pages accessible.
This is just one aspect of making a website accessible. Good design is just as important but this is the concern of Web Developers and Designers.
The contents in this booklet cover the main problem areas that we have found when conducting web accessibility audits and is not an exhaustive list.
I have done this to help anyone who creates, or edits, content on a web page.
© Access2All
Meaningful links
Text links make sense out of context
Avoid links such as Click here... and More...
Not too close together to help motor impaired
Warn users before they open a PDF or file
Same links go to same place and vice versa.
Further details are available from the book list.
More details from the book list.
* It is best to avoid links that open in a new window.
Here we have the biggest error of all which I see all the time, a text link that doesn‟t make
sense when read out of context. >
© Access2All
Meaningful links
Text links make sense out of context
Avoid links such as Click here... and More...
Not too close together to help motor impaired
Warn users before they open a PDF or file
Same links go to same place and vice versa.
Further details are available from the book list.
More details from the book list.
* It is best to avoid links that open in a new window.
Blind people who use screen readers often listen to all the links on a page in a single list. >
© Access2All
Meaningful links
Text links make sense out of context
Avoid links such as Click here... and More...
Not too close together to help motor impaired
Warn users before they open a PDF or file
Same links go to same place and vice versa.
Further details are available from the book list.
More details from the book list.
* It is best to avoid links that open in a new window.
For example if they hear “Click here…” or “More…” when just listening to the links they have
absolutely no idea where the link will take them. >
© Access2All
Meaningful links
Text links make sense out of context
Avoid links such as Click here... and More...
Not too close together to help motor impaired
Warn users before they open a PDF or file
Same links go to same place and vice versa.
Further details are available from the book list.
More details from the book list.
* It is best to avoid links that open in a new window.
Nothing should be a surprise to your users. For instance, always warn them in advance before
they open a PDF. >
© Access2All
Meaningful links
Text links make sense out of context
Avoid links such as Click here... and More...
Not too close together to help motor impaired
Warn users before they open a PDF or file
Same links go to same place and vice versa.
Further details are available from the book list.
More details from the book list.
* It is best to avoid links that open in a new window.
Also, make sure the same link always go to the same place otherwise users get confused.
© Access2All
Image links
Alternative text to state destination not describe image
Use title text to inform sighted users of link but keep short
Do not open in a new window without notice (new windows disorientate blind users – best avoided).
Alt txt:
AnyTube video of mayor opening school.
Alt txt:
AnyTube logo
Mayor opening school
Now let‟s look at image links. Alternative text is for blind users. They need to know where the
link will take them not listen to a description of the image when it is a link. >
© Access2All
Image links
Alternative text to state destination not describe image
Use title text to inform sighted users of link but keep short
Do not open in a new window without notice (new windows disorientate blind users – best avoided).
Alt txt:
AnyTube video of mayor opening school.
Alt txt:
AnyTube logo
Mayor opening school
Whereas, title text (also known as a tool tip) is only for sighted users who can mouse over. >
© Access2All
Image links
Alternative text to state destination not describe image
Use title text to inform sighted users of link but keep short
Do not open in a new window without notice (new windows disorientate blind users – best avoided).
Alt txt:
AnyTube video of mayor opening school.
Alt txt:
AnyTube logo
Mayor opening school
It is best to avoid links which open in a new window. Blind users can‟t use the back button
which is what they would normally do to return to a previous window.
© Access2All
Images
No images of text unless logo or essential (then repeat text in alternative text for blind)
Contrast sufficient (background v foreground)
If decorative are called from CSS or alt=“”
Resolution is not greater than 72 dpi for web
Use relevant images to illustrate information
No flashing images longer than 3 seconds
Big files saved in reduced size before uploading.
Don‟t forget the amazing book sale2-10 July.
Don‟t forget the amazing book sale.
Also it is best not to have any text in an image, but if you do you should include it in the
alternative text for the blind user. >
© Access2All
Images
No images of text unless logo or essential (then repeat text in alternative text for blind)
Contrast sufficient (background v foreground)
If decorative are called from CSS or alt=“”
Resolution is not greater than 72 dpi for web
Use relevant images to illustrate information
No flashing images longer than 3 seconds
Big files saved in reduced size before uploading.
Don‟t forget the amazing book sale2-10 July.
Don‟t forget the amazing book sale.
Make sure that all images including photos have good contrast. Images that aren‟t links come
under 2 categories - they are either decorative or informative. >
© Access2All
Images
No images of text unless logo or essential (then repeat text in alternative text for blind)
Contrast sufficient (background v foreground)
If decorative are called from CSS or alt=“”
Resolution is not greater than 72 dpi for web
Use relevant images to illustrate information
No flashing images longer than 3 seconds
Big files saved in reduced size before uploading.
Don‟t forget the amazing book sale2-10 July.
Don‟t forget the amazing book sale.
If they are purely decorative then ideally they should be „called‟ from the CSS otherwise they
should be given a null alternative text. >
© Access2All
Images
No images of text unless logo or essential (then repeat text in alternative text for blind)
Contrast sufficient (background v foreground)
If decorative are called from CSS or alt=“”
Resolution is not greater than 72 dpi for web
Use relevant images to illustrate information
No flashing images longer than 3 seconds
Big files saved in reduced size before uploading.
Don‟t forget the amazing book sale2-10 July.
Don‟t forget the amazing book sale.
Help dyslexics to make sense of the content by giving them relevant and informative images. >
© Access2All
Images
No images of text unless logo or essential (then repeat text in alternative text for blind)
Contrast sufficient (background v foreground)
If decorative are called from CSS or alt=“”
Resolution is not greater than 72 dpi for web
Use relevant images to illustrate information
No flashing images longer than 3 seconds
Big files saved in reduced size before uploading.
Don‟t forget the amazing book sale2-10 July.
Don‟t forget the amazing book sale.
Avoid flashing images as these affect people prone to seizures. >
© Access2All
Images
No images of text unless logo or essential (then repeat text in alternative text for blind)
Contrast sufficient (background v foreground)
If decorative are called from CSS or alt=“”
Resolution is not greater than 72 dpi for web
Use relevant images to illustrate information
No flashing images longer than 3 seconds
Big files saved in reduced size before uploading.
Don‟t forget the amazing book sale2-10 July.
Don‟t forget the amazing book sale.
Always upload images as close to the size you think you will need. Huge files take longer
to download.
© Access2All
Alternative text for images
Brief but descriptive Alternative Text (alt txt)
Words such as “images/picture” not in alt txt
Title text additional information only, should not repeat alt txt (some screenreaders read both)
Complex images (charts etc) fully explained in text or additional web page/file.
Alt txt:
Child blowing on a Dandelion to make a wish.
Alt txt:
Image of child
The thing to remember about writing alternative text for images is that it is a description that
only blind people will hear. >
© Access2All
Alternative text for images
Brief but descriptive Alternative Text (alt txt)
Words such as “images/picture” not in alt txt
Title text additional information only, should not repeat alt txt (some screenreaders read both)
Complex images (charts etc) fully explained in text or additional web page/file.
Alt txt:
Child blowing on a Dandelion to make a wish.
Alt txt:
Image of child
When describing the image you need to imagine you have a blind person sitting next to you. >
© Access2All
Alternative text for images
Brief but descriptive Alternative Text (alt txt)
Words such as “images/picture” not in alt txt
Title text additional information only, should not repeat alt txt (some screenreaders read both)
Complex images (charts etc) fully explained in text or additional web page/file.
Alt txt:
Child blowing on a Dandelion to make a wish.
Alt txt:
Image of child
Don‟t use words such as “picture of” or “image of” because their screen reader will also tell
them it is an image. >
© Access2All
Alternative text for images
Brief but descriptive Alternative Text (alt txt)
Words such as “images/picture” not in alt txt
Title text additional information only, should not repeat alt txt (some screenreaders read both)
Complex images (charts etc) fully explained in text or additional web page/file.
Alt txt:
Child blowing on a Dandelion to make a wish.
Alt txt:
Image of child
Be as brief as possible, but if the image is a complex one, such as a chart, you will need either
a full description on the same page or a link to one. >
© Access2All
Alternative text for images
Brief but descriptive Alternative Text (alt txt)
Words such as “images/picture” not in alt txt
Title text additional information only, should not repeat alt txt (some screenreaders read both)
Complex images (charts etc) fully explained in text or additional web page/file.
Alt txt:
Child blowing on a Dandelion to make a wish.
Alt txt:
Image of child
As I said earlier „alternative text‟ should not be confused with „title text‟. Title text is only
available for people who can mouse over an image. >
© Access2All
Alternative text for images
Brief but descriptive Alternative Text (alt txt)
Words such as “images/picture” not in alt txt
Title text additional information only, should not repeat alt txt (some screenreaders read both)
Complex images (charts etc) fully explained in text or additional web page/file.
Alt txt:
Child blowing on a Dandelion to make a wish.
Alt txt:
Image of child
Never repeat title text in the alternative text as some blind users will hear the same words twice.
© Access2All
Target audience
Reading level suitable for target audience*
Plain English, no jargon/sayings (idioms)
NO SHOUTING (CAPS also difficulty for dyslexics)
Sensitivity to culture/religion/gender/age
Bite-sized chunks of information not cluttered
Test content for keyboard only user access.
She hadn‟t realised that she was in a similar situation to that of a disabled woman at home.
It was a case of the pot calling the kettle black when she referred to the disabled housewife.
* http://simbon.madpage.com/Fog/
As a guide you should write so that the average 14-year old could understand your content. >
© Access2All
Target audience
Reading level suitable for target audience*
Plain English, no jargon/sayings (idioms)
NO SHOUTING (CAPS also difficulty for dyslexics)
Sensitivity to culture/religion/gender/age
Bite-sized chunks of information not cluttered
Test content for keyboard only user access.
She hadn‟t realised that she was in a similar situation to that of a disabled woman at home.
It was a case of the pot calling the kettle black when she referred to the disabled housewife.
* http://simbon.madpage.com/Fog/
This will help people who find it difficult to read English to follow what you are saying. >
© Access2All
Target audience
Reading level suitable for target audience*
Plain English, no jargon/sayings (idioms)
NO SHOUTING (CAPS also difficulty for dyslexics)
Sensitivity to culture/religion/gender/age
Bite-sized chunks of information not cluttered
Test content for keyboard only user access.
She hadn‟t realised that she was in a similar situation to that of a disabled woman at home.
It was a case of the pot calling the kettle black when she referred to the disabled housewife.
* http://simbon.madpage.com/Fog/
It is particularly good practice to add content in bite-sized chunks and to avoid the use of
jargon or sayings. >
© Access2All
Target audience
Reading level suitable for target audience*
Plain English, no jargon/sayings (idioms)
NO SHOUTING (CAPS also difficulty for dyslexics)
Sensitivity to culture/religion/gender/age
Bite-sized chunks of information not cluttered
Test content for keyboard only user access.
She hadn‟t realised that she was in a similar situation to that of a disabled woman at home.
It was a case of the pot calling the kettle black when she referred to the disabled housewife.
* http://simbon.madpage.com/Fog/
You can test the reading level of your content. There are free tools on the web - such as the
Gunning Fog Index. >
© Access2All
Target audience
Reading level suitable for target audience*
Plain English, no jargon/sayings (idioms)
NO SHOUTING (CAPS also difficulty for dyslexics)
Sensitivity to culture/religion/gender/age
Bite-sized chunks of information not cluttered
Test content for keyboard only user access.
She hadn‟t realised that she was in a similar situation to that of a disabled woman at home.
It was a case of the pot calling the kettle black when she referred to the disabled housewife.
* http://simbon.madpage.com/Fog/
By-the-way, you should always test that everything on your web page can be accessed by just
using the keyboard. >
© Access2All
Target audience
Reading level suitable for target audience*
Plain English, no jargon/sayings (idioms)
NO SHOUTING (CAPS also difficulty for dyslexics)
Sensitivity to culture/religion/gender/age
Bite-sized chunks of information not cluttered
Test content for keyboard only user access.
She hadn‟t realised that she was in a similar situation to that of a disabled woman at home.
It was a case of the pot calling the kettle black when she referred to the disabled housewife.
* http://simbon.madpage.com/Fog/
Not everyone can use a mouse or pointer. >
© Access2All
Target audience
Reading level suitable for target audience*
Plain English, no jargon/sayings (idioms)
NO SHOUTING (CAPS also difficulty for dyslexics)
Sensitivity to culture/religion/gender/age
Bite-sized chunks of information not cluttered
Test content for keyboard only user access.
She hadn‟t realised that she was in a similar situation to that of a disabled woman at home.
It was a case of the pot calling the kettle black when she referred to the disabled housewife.
* http://simbon.madpage.com/Fog/
Don‟t forget to avoid offending anyone! This means taking account of the protected
characteristics such as religion, culture and gender.
© Access2All
Pasting from a Word Processor
WP formatting and code removed when pasted
Web formatting applied to headings
Web formatting applied to bullets/numbers
Embedded images in WP saved as 72 dpi files.
The following important details:
Title of the book
Name of the author
ISBN (if known)
The following important details:
. Title of the book
. Name of the author
. ISBN (if known)
If you are copying and pasting from another program or file, you might inadvertently import
unwanted code into your HTML page or the text might not end up being formatted properly. >
© Access2All
Pasting from a Word Processor
WP formatting and code removed when pasted
Web formatting applied to headings
Web formatting applied to bullets/numbers
Embedded images in WP saved as 72 dpi files.
The following important details:
Title of the book
Name of the author
ISBN (if known)
The following important details:
. Title of the book
. Name of the author
. ISBN (if known)
This means that screen reading software may not identify headings, or numbered or bulleted
lists for the blind user. >
© Access2All
Pasting from a Word Processor
WP formatting and code removed when pasted
Web formatting applied to headings
Web formatting applied to bullets/numbers
Embedded images in WP saved as 72 dpi files.
The following important details:
Title of the book
Name of the author
ISBN (if known)
The following important details:
. Title of the book
. Name of the author
. ISBN (if known)
So you need to have some basic understanding of coding. >
© Access2All
Pasting from a Word Processor
WP formatting and code removed when pasted
Web formatting applied to headings
Web formatting applied to bullets/numbers
Embedded images in WP saved as 72 dpi files.
The following important details:
Title of the book
Name of the author
ISBN (if known)
The following important details:
. Title of the book
. Name of the author
. ISBN (if known)
Images can‟t be copied onto a web page from a document file. You‟ll need to save them as
separate files. >
© Access2All
Pasting from a Word Processor
WP formatting and code removed when pasted
Web formatting applied to headings
Web formatting applied to bullets/numbers
Embedded images in WP saved as 72 dpi files.
The following important details:
Title of the book
Name of the author
ISBN (if known)
The following important details:
. Title of the book
. Name of the author
. ISBN (if known)
When you do that always make sure that their resolution is not higher than 72 dots per inch
and that they are not larger in size than you need.
© Access2All
Tables
Table given title (within HTML „caption‟ code)
Make sense read cell by cell, left to right
Column row/headings have been defined
Summary is brief explanation of data for blind as not visible to sighted users (add explanation of navigation if complex table structure).
Day Times
Tuesday 8-9am
Friday 8-9am
Day Times
Tuesday 8-9am
Friday 8-9am
There are 2 types of tables: Data tables and layout tables. In this instance we are talking about
data tables. >
© Access2All
Tables
Table given title (within HTML „caption‟ code)
Make sense read cell by cell, left to right
Column row/headings have been defined
Summary is brief explanation of data for blind as not visible to sighted users (add explanation of navigation if complex table structure).
Day Times
Tuesday 8-9am
Friday 8-9am
Day Times
Tuesday 8-9am
Friday 8-9am
These tables should always have headers for the columns or rows, or both, and they should be
correctly defined in the HTML coding. >
© Access2All
Tables
Table given title (within HTML „caption‟ code)
Make sense read cell by cell, left to right
Column row/headings have been defined
Summary is brief explanation of data for blind as not visible to sighted users (add explanation of navigation if complex table structure).
Day Times
Tuesday 8-9am
Friday 8-9am
Day Times
Tuesday 8-9am
Friday 8-9am
Data tables should always have an HTML “Caption” and make sense when they are read from left
to right, one cell at a time. This is how blind screen reader users will hear the table contents. >
© Access2All
Tables
Table given title (within HTML „caption‟ code)
Make sense read cell by cell, left to right
Column row/headings have been defined
Summary is brief explanation of data for blind as not visible to sighted users (add explanation of navigation if complex table structure).
Day Times
Tuesday 8-9am
Friday 8-9am
Day Times
Tuesday 8-9am
Friday 8-9am
If the table has a complex structure you can add instructions on how to navigate for the blind
user within the HTML “Summary” code.
© Access2All
Headings
Use HTML formatting (h1) through to (h6)
Only one main heading (h1) per web page
Not chosen for „look‟ but in relevant order
Briefly describe following topic
Head up bite-sized chunks of text to help dyslexics.
Note. Relevant page titles act as headings too.
Garden Birds
We can still expect to see quite a variety in the average urban garden.
RobinsThese delightful little birds are the most easily recognisable to visit us.
This article is all about the different birds that can be found in the average urban garden.
Robins are the most easily recognisable of the birds to visit us.
Just as for links many blind users will list the headings on a page in a single list. So it is very
important that they are correctly coded. >
© Access2All
Headings
Use HTML formatting (h1) through to (h6)
Only one main heading (h1) per web page
Not chosen for „look‟ but in relevant order
Briefly describe following topic
Head up bite-sized chunks of text to help dyslexics.
Garden Birds
We can still expect to see quite a variety in the average urban garden.
RobinsThese delightful little birds are the most easily recognisable to visit us.
This article is all about the different birds that can be found in the average urban garden.
Robins are the most easily recognisable of the birds to visit us.
Headings tell users what the following content is all about. >
Note. Relevant page titles act as headings too.
© Access2All
Headings
Use HTML formatting (h1) through to (h6)
Only one main heading (h1) per web page
Not chosen for „look‟ but in relevant order
Briefly describe following topic
Head up bite-sized chunks of text to help dyslexics.
Garden Birds
We can still expect to see quite a variety in the average urban garden.
RobinsThese delightful little birds are the most easily recognisable to visit us.
This article is all about the different birds that can be found in the average urban garden.
Robins are the most easily recognisable of the birds to visit us.
They mustn‟t just look like headings to sighted users. If they are not properly coded blind users
will not know that they are there.
Note. Relevant page titles act as headings too.
© Access2All
Colour
Think of colour blind and avoid colour dependency
Sufficient contrast between text and background
Do not change colour of text using HTML code. Use style sheet (CSS) only. Some users replace the default style sheet with their chosen colours for text and background in their own style sheet.
Questions marked (*) are mandatory
Questions in red are mandatory
Some people are colour blind! Whatever you do avoid any sort of colour dependency.
© Access2All
Colour
Think of colour blind and avoid colour dependency
Sufficient contrast between text and background
Do not change colour of text using HTML code. Use style sheet (CSS) only. Some users replace the default style sheet with their chosen colours for text and background in their own style sheet.
Questions marked (*) are mandatory
Questions in red are mandatory
Everything on your web page should have good contrast. Some dyslexics can only read text if
they customise both the background and the foreground to specific colours.
© Access2All
Colour
Think of colour blind and avoid colour dependency
Sufficient contrast between text and background
Do not change colour of text using HTML code. Use style sheet (CSS) only. Some users replace the default style sheet with their chosen colours for text and background in their own style sheet.
Questions marked (*) are mandatory
Questions in red are mandatory
Always use the built-in stylesheet. This way these users can replace your stylesheet with
their own.
© Access2All
Video/Audio
Foreground easily discernible from background
Video/Audio both have verbatim transcript
Transcript includes relevant sound/cues
Scenario explained to blind
Video includes captioning for deaf.
Seated Carer looking sympathetic and holding hands of elderly gentleman. He says “I‟m worried about my wife”
Before preparing a video bear in mind that people who are hard of hearing find it really difficult
to hear something if there is a lot of background noise.
© Access2All
Video/Audio
Foreground easily discernible from background
Video/Audio both have verbatim transcript
Transcript includes relevant sound/cues
Scenario explained to blind
Video includes captioning for deaf.
Seated Carer looking sympathetic and holding hands of elderly gentleman. He says “I‟m worried about my wife”
There are lots of other things you will need to do if you want to make your videos accessible.
The most basic one is to prepare a verbatim transcript.
© Access2All
Video/Audio
Foreground easily discernible from background
Video/Audio both have verbatim transcript
Transcript includes relevant sound/cues
Scenario explained to blind
Video includes captioning for deaf.
Seated Carer looking sympathetic and holding hands of elderly gentleman. He says “I‟m worried about my wife”
Within this transcript add relevant sound cues in brackets for the deaf. Also explain the
scenario to the blind.
© Access2All
This is the slide version of the pocket booklet“The Little Web Content Book”
We‟ve come to the end of the quick tips on how to make your web content accessible. You can
obtain hard copies of this pocket booklet by emailing: [email protected]
This presentation was delivered to you
bywww.access2all.org
© Access2All
What we do… Accessibility awareness training*
Conversion to EasyRead documents (training and document creation)
10-hour eLearning Course for Content Authors “Writing accessible content for the web”*
Accessibility auditing of websites for conformance.
email: [email protected]
www.access2all.org
If you, or your organisation, would like support with making your website accessible we can
help you. Contact us if you would like a quick FREE audit.
* In partnership with VerseOne Technologies Limited.
© Access2All
What we do… Accessibility awareness training*
Conversion to EasyRead documents (training and document creation)
10-hour eLearning Course for Content Authors “Writing accessible content for the web”*
Accessibility auditing of websites for conformance.
email: [email protected]
www.access2all.org
We will establish your current level of conformance with version 2.0 of the Web Content
Accessibility Guidelines.
* In partnership with VerseOne Technologies Limited.
