Some quick tips on making your content accessible for the web.

1. The Little Web
Content Book
By Penny Everett
This is the slide version of the pocket booklet – hard copies are
available by emailing penny@access2all.org
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

2. 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

3. 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

4. Meaningful links
 Text links make sense out of
Further details are
context
 available from the
book list.  Avoid links such as Click here...
and More...
 Not too close together to help
motor impaired
 More details from
the book list.
 Warn users before they open a
PDF or file
 Same links go to same place and
* It is best to avoid links that open in a new window.
vice versa.
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

5. Meaningful links
 Text links make sense out of
Further details are
context
 available from the
book list.  Avoid links such as Click here...
and More...
 Not too close together to help
motor impaired
 More details from
the book list.
 Warn users before they open a
PDF or file
 Same links go to same place and
* It is best to avoid links that open in a new window.
vice versa.
Blind people who use screen readers often listen to all the links on a page in a single list. >
© Access2All

6. Meaningful links
 Text links make sense out of
Further details are
context
 available from the
book list.  Avoid links such as Click here...
and More...
 Not too close together to help
motor impaired
 More details from
the book list.
 Warn users before they open a
PDF or file
 Same links go to same place and
* It is best to avoid links that open in a vice versa.
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

7. Meaningful links
 Text links make sense out of
Further details are
context
 available from the
book list.  Avoid links such as Click here...
and More...
 Not too close together to help
motor impaired
 More details from
the book list.
 Warn users before they open a
PDF or file
 Same links go to same place and
* It is best to avoid links that open in a vice versa.
new window.
Nothing should be a surprise to your users. For instance, always warn them in advance before
they open a PDF. >
© Access2All

8. Meaningful links
 Text links make sense out of
Further details are
context
 available from the
book list.  Avoid links such as Click here...
and More...
 Not too close together to help
motor impaired
 More details from
the book list.
 Warn users before they open a
PDF or file
 Same links go to same place and
* It is best to avoid links that open in a vice versa.
new window.
Also, make sure the same link always go to the same place otherwise users get confused.
© Access2All

9. Image links
 Alternative text to state
Alt txt:
 Mayor opening school
AnyTube video of
destination not describe
image
mayor opening
school.  Use title text to inform
sighted users of link but
keep short
Alt txt:  Do not open in a new
 AnyTube logo
window without notice (new
windows disorientate blind
users – best avoided).
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

10. Image links
Alt txt:  Alternative text to state
 Mayor opening school
AnyTube video of
destination not describe
image
mayor opening
school.  Use title text to inform
sighted users of link but
keep short
Alt txt:  Do not open in a new
 AnyTube logo
window without notice (new
windows disorientate blind
users – best avoided).
Whereas, title text (also known as a tool tip) is only for sighted users who can mouse over. >
© Access2All

11. Image links
 Alternative text to state
Alt txt:
 Mayor opening school
AnyTube video of
destination not describe
image
mayor opening
school.  Use title text to inform
sighted users of link but
keep short
Alt txt:  Do not open in a new
 AnyTube logo
window without notice (new
windows disorientate blind
users – best avoided).
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

12. Images
 No images of text unless logo or essential (then
Don‟t forget the repeat text in alternative text for blind)
 amazing book sale
2-10 July.  Contrast sufficient (background v foreground)
 If decorative are called from CSS or alt=“”
 Resolution is not greater than 72 dpi for web
Don‟t
 forget the
amazing
book sale.


Use relevant images to illustrate information
No flashing images longer than 3 seconds
 Big files saved in reduced size before uploading.
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

13. Images
 No images of text unless logo or essential (then
Don‟t forget the repeat text in alternative text for blind)
 amazing book sale
2-10 July.  Contrast sufficient (background v foreground)
 If decorative are called from CSS or alt=“”
 Resolution is not greater than 72 dpi for web
Don‟t
 forget the
amazing
book sale.


Use relevant images to illustrate information
No flashing images longer than 3 seconds
 Big files saved in reduced size before uploading.
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

14. Images
 No images of text unless logo or essential (then
Don‟t forget the repeat text in alternative text for blind)
 amazing book sale
2-10 July.  Contrast sufficient (background v foreground)
 If decorative are called from CSS or alt=“”
 Resolution is not greater than 72 dpi for web
Don‟t
 forget the
amazing
book sale.


Use relevant images to illustrate information
No flashing images longer than 3 seconds
 Big files saved in reduced size before uploading.
If they are purely decorative then ideally they should be „called‟ from the CSS otherwise they
should be given a null alternative text. >
© Access2All

15. Images
 No images of text unless logo or essential (then
Don‟t forget the repeat text in alternative text for blind)
 amazing book sale
2-10 July.  Contrast sufficient (background v foreground)
 If decorative are called from CSS or alt=“”
 Resolution is not greater than 72 dpi for web
Don‟t
 forget the
amazing
book sale.


Use relevant images to illustrate information
No flashing images longer than 3 seconds
 Big files saved in reduced size before uploading.
Help dyslexics to make sense of the content by giving them relevant and informative images. >
© Access2All

16. Images
 No images of text unless logo or essential (then
Don‟t forget the repeat text in alternative text for blind)
 amazing book sale
2-10 July.  Contrast sufficient (background v foreground)
 If decorative are called from CSS or alt=“”
 Resolution is not greater than 72 dpi for web
Don‟t
 forget the
amazing
book sale.


Use relevant images to illustrate information
No flashing images longer than 3 seconds
 Big files saved in reduced size before uploading.
Avoid flashing images as these affect people prone to seizures. >
© Access2All

17. Images
 No images of text unless logo or essential (then
Don‟t forget the repeat text in alternative text for blind)
 amazing book sale
2-10 July.  Contrast sufficient (background v foreground)
 If decorative are called from CSS or alt=“”
 Resolution is not greater than 72 dpi for web
Don‟t
 forget the
amazing
book sale.


Use relevant images to illustrate information
No flashing images longer than 3 seconds
 Big files saved in reduced size before uploading.
Always upload images as close to the size you think you will need. Huge files take longer
to download.
© Access2All

18. Alternative text for images
Alt txt:  Brief but descriptive Alternative
Text (alt txt)
Child blowing on
 a Dandelion to
make a wish.  Words such as “images/picture”
not in alt txt
 Title text additional information
Alt txt: only, should not repeat alt txt
 Image of child
(some screenreaders read both)
 Complex images (charts etc) fully
explained in text or additional web
page/file.
The thing to remember about writing alternative text for images is that it is a description that
only blind people will hear. >
© Access2All

19. Alternative text for images
Alt txt:  Brief but descriptive Alternative
Text (alt txt)
Child blowing on
 a Dandelion to
make a wish.  Words such as “images/picture”
not in alt txt
 Title text additional information
Alt txt: only, should not repeat alt txt
 Image of child
(some screenreaders read both)
 Complex images (charts etc) fully
explained in text or additional web
page/file.
When describing the image you need to imagine you have a blind person sitting next to you. >
© Access2All

20. Alternative text for images
Alt txt:  Brief but descriptive Alternative
Text (alt txt)
Child blowing on
 a Dandelion to
make a wish.  Words such as “images/picture”
not in alt txt
 Title text additional information
Alt txt: only, should not repeat alt txt
 Image of child
(some screenreaders read both)
 Complex images (charts etc) fully
explained in text or additional web
page/file.
Don‟t use words such as “picture of” or “image of” because their screen reader will also tell
them it is an image. >
© Access2All

21. Alternative text for images
Alt txt:  Brief but descriptive Alternative
Text (alt txt)
Child blowing on
 a Dandelion to
make a wish.  Words such as “images/picture”
not in alt txt
 Title text additional information
Alt txt: only, should not repeat alt txt
 Image of child
(some screenreaders read both)
 Complex images (charts etc) fully
explained in text or additional web
page/file.
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

22. Alternative text for images
Alt txt:  Brief but descriptive Alternative
Text (alt txt)
Child blowing on
 a Dandelion to
make a wish.  Words such as “images/picture”
not in alt txt
 Title text additional information
Alt txt: only, should not repeat alt txt
 Image of child
(some screenreaders read both)
 Complex images (charts etc) fully
explained in text or additional web
page/file.
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

23. Alternative text for images
Alt txt:  Brief but descriptive Alternative
Text (alt txt)
Child blowing on
 a Dandelion to
make a wish.  Words such as “images/picture”
not in alt txt
 Title text additional information
Alt txt: only, should not repeat alt txt
 Image of child
(some screenreaders read both)
 Complex images (charts etc) fully
explained in text or additional web
page/file.
Never repeat title text in the alternative text as some blind users will hear the same words twice.
© Access2All

24. Target audience
She hadn‟t realised that she
 Reading level suitable for target
was in a similar situation to audience*
 that of a disabled woman at
home.
 Plain English, no jargon/sayings
(idioms)
 NO SHOUTING (CAPS also
difficulty for dyslexics)
It was a case of the pot  Sensitivity to
 calling the kettle black when
she referred to the disabled
housewife.
culture/religion/gender/age
 Bite-sized chunks of information
not cluttered
 Test content for keyboard only
* http://simbon.madpage.com/Fog/
user access.
As a guide you should write so that the average 14-year old could understand your content. >
© Access2All

25. Target audience
She hadn‟t realised that she
 Reading level suitable for target
was in a similar situation to audience*
 that of a disabled woman at
home.
 Plain English, no jargon/sayings
(idioms)
 NO SHOUTING (CAPS also
difficulty for dyslexics)
It was a case of the pot  Sensitivity to
 calling the kettle black when
she referred to the disabled
housewife.
culture/religion/gender/age
 Bite-sized chunks of information
not cluttered
 Test content for keyboard only
* http://simbon.madpage.com/Fog/
user access.
This will help people who find it difficult to read English to follow what you are saying. >
© Access2All

26. Target audience
She hadn‟t realised that she
 Reading level suitable for target
was in a similar situation to audience*
 that of a disabled woman at
home.
 Plain English, no jargon/sayings
(idioms)
 NO SHOUTING (CAPS also
difficulty for dyslexics)
It was a case of the pot  Sensitivity to
 calling the kettle black when
she referred to the disabled
housewife.
culture/religion/gender/age
 Bite-sized chunks of information
not cluttered
 Test content for keyboard only
* http://simbon.madpage.com/Fog/
user access.
It is particularly good practice to add content in bite-sized chunks and to avoid the use of
jargon or sayings. >
© Access2All

27. Target audience
She hadn‟t realised that she
 Reading level suitable for target
was in a similar situation to audience*
 that of a disabled woman at
home.
 Plain English, no jargon/sayings
(idioms)
 NO SHOUTING (CAPS also
difficulty for dyslexics)
It was a case of the pot  Sensitivity to
 calling the kettle black when
she referred to the disabled
housewife.
culture/religion/gender/age
 Bite-sized chunks of information
not cluttered
 Test content for keyboard only
* http://simbon.madpage.com/Fog/
user access.
You can test the reading level of your content. There are free tools on the web - such as the
Gunning Fog Index. >
© Access2All

28. Target audience
She hadn‟t realised that she
 Reading level suitable for target
was in a similar situation to audience*
 that of a disabled woman at
home.
 Plain English, no jargon/sayings
(idioms)
 NO SHOUTING (CAPS also
difficulty for dyslexics)
It was a case of the pot  Sensitivity to
 calling the kettle black when
she referred to the disabled
housewife.
culture/religion/gender/age
 Bite-sized chunks of information
not cluttered
 Test content for keyboard only
* http://simbon.madpage.com/Fog/
user access.
By-the-way, you should always test that everything on your web page can be accessed by just
using the keyboard. >
© Access2All

29. Target audience
She hadn‟t realised that she
 Reading level suitable for target
was in a similar situation to audience*
 that of a disabled woman at
home.
 Plain English, no jargon/sayings
(idioms)
 NO SHOUTING (CAPS also
difficulty for dyslexics)
It was a case of the pot  Sensitivity to
 calling the kettle black when
she referred to the disabled
housewife.
culture/religion/gender/age
 Bite-sized chunks of information
not cluttered
 Test content for keyboard only
* http://simbon.madpage.com/Fog/
user access.
Not everyone can use a mouse or pointer. >
© Access2All

30. Target audience
She hadn‟t realised that she
 Reading level suitable for target
was in a similar situation to audience*
 that of a disabled woman at
home.
 Plain English, no jargon/sayings
(idioms)
 NO SHOUTING (CAPS also
difficulty for dyslexics)
It was a case of the pot  Sensitivity to
 calling the kettle black when
she referred to the disabled
housewife.
culture/religion/gender/age
 Bite-sized chunks of information
not cluttered
* http://simbon.madpage.com/Fog/
 Test content for keyboard only
user access.
Don‟t forget to avoid offending anyone! This means taking account of the protected
characteristics such as religion, culture and gender.
© Access2All

31. Pasting from a Word Processor
The following important details:  WP formatting and code removed
Title of the book when pasted
 Name of the author
 Web formatting applied to
ISBN (if known)
headings
The following important details:  Web formatting applied to
bullets/numbers
 .
.
Title of the book
Name of the author
 Embedded images in WP saved
. ISBN (if known)
as 72 dpi files.
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

32. Pasting from a Word Processor
The following important details:  WP formatting and code removed
Title of the book when pasted
 Name of the author
 Web formatting applied to
ISBN (if known)
headings
The following important details:  Web formatting applied to
bullets/numbers
 .
.
Title of the book
Name of the author
 Embedded images in WP saved
. ISBN (if known)
as 72 dpi files.
This means that screen reading software may not identify headings, or numbered or bulleted
lists for the blind user. >
© Access2All

33. Pasting from a Word Processor
The following important details:  WP formatting and code removed
Title of the book when pasted
 Name of the author
 Web formatting applied to
ISBN (if known)
headings
The following important details:  Web formatting applied to
bullets/numbers
 .
.
Title of the book
Name of the author
 Embedded images in WP saved
. ISBN (if known)
as 72 dpi files.
So you need to have some basic understanding of coding. >
© Access2All

34. Pasting from a Word Processor
The following important details:  WP formatting and code removed
Title of the book when pasted
 Name of the author
 Web formatting applied to
ISBN (if known)
headings
The following important details:  Web formatting applied to
bullets/numbers
 .
.
Title of the book
Name of the author
 Embedded images in WP saved
. ISBN (if known)
as 72 dpi files.
Images can‟t be copied onto a web page from a document file. You‟ll need to save them as
separate files. >
© Access2All

35. Pasting from a Word Processor
The following important details:  WP formatting and code removed
Title of the book when pasted
 Name of the author
 Web formatting applied to
ISBN (if known)
headings
The following important details:  Web formatting applied to
bullets/numbers
 .
.
Title of the book
Name of the author
 Embedded images in WP saved
. ISBN (if known)
as 72 dpi files.
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

36. Tables
Day Times  Table given title (within HTML
„caption‟ code)
 Tuesday 8-9am
 Make sense read cell by cell,
Friday 8-9am
left to right
 Column row/headings have been
defined
Day Times
 Tuesday 8-9am  Summary is brief explanation of
data for blind as not visible to
Friday 8-9am sighted users (add explanation of
navigation if complex table
structure).
There are 2 types of tables: Data tables and layout tables. In this instance we are talking about
data tables. >
© Access2All

37. Tables
Day Times  Table given title (within HTML
„caption‟ code)
 Tuesday 8-9am
 Make sense read cell by cell,
Friday 8-9am
left to right
 Column row/headings have been
defined
Day Times
 Tuesday 8-9am  Summary is brief explanation of
data for blind as not visible to
Friday 8-9am sighted users (add explanation of
navigation if complex table
structure).
These tables should always have headers for the columns or rows, or both, and they should be
correctly defined in the HTML coding. >
© Access2All

38. Tables
Day Times  Table given title (within HTML
„caption‟ code)
 Tuesday 8-9am
 Make sense read cell by cell,
Friday 8-9am
left to right
 Column row/headings have been
defined
Day Times
 Tuesday 8-9am  Summary is brief explanation of
data for blind as not visible to
Friday 8-9am sighted users (add explanation of
navigation if complex table
structure).
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

39. Tables
Day Times  Table given title (within HTML
„caption‟ code)
 Tuesday 8-9am
 Make sense read cell by cell,
Friday 8-9am
left to right
 Column row/headings have been
defined
Day Times
 Tuesday 8-9am  Summary is brief explanation of
data for blind as not visible to
Friday 8-9am sighted users (add explanation of
navigation if complex table
structure).
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

40. Headings
Garden Birds  Use HTML formatting (h1)
We can still expect to see quite a through to (h6)
variety in the average urban garden.
 Robins
These delightful little birds are the
 Only one main heading (h1)
per web page
most easily recognisable to visit us.
 Not chosen for „look‟ but in
This article is all about relevant order
the different birds that
 can be found in the
average urban garden.
 Briefly describe following topic
Robins are the most easily
recognisable of the birds to visit us.
 Head up bite-sized chunks of
text to help dyslexics.
Note. Relevant page titles act as headings too.
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

41. Headings
Garden Birds  Use HTML formatting (h1)
We can still expect to see quite a through to (h6)
variety in the average urban garden.
 Robins
These delightful little birds are the
 Only one main heading (h1)
per web page
most easily recognisable to visit us.
 Not chosen for „look‟ but in
This article is all about relevant order
the different birds that
 can be found in the
average urban garden.
 Briefly describe following topic
Robins are the most easily
recognisable of the birds to visit us.
 Head up bite-sized chunks of
text to help dyslexics.
Note. Relevant page titles act as headings too.
Headings tell users what the following content is all about. >
© Access2All

42. Headings
Garden Birds  Use HTML formatting (h1)
We can still expect to see quite a through to (h6)
variety in the average urban garden.
 Robins
These delightful little birds are the
 Only one main heading (h1)
per web page
most easily recognisable to visit us.
 Not chosen for „look‟ but in
This article is all about relevant order
the different birds that
 can be found in the
average urban garden.
 Briefly describe following topic
Robins are the most easily
recognisable of the birds to visit us.
 Head up bite-sized chunks of
text to help dyslexics.
Note. Relevant page titles act as headings too.
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.
© Access2All

43. Colour
 Think of colour blind and avoid
colour dependency
 Questions marked (*) are mandatory
 Sufficient contrast between
text and background
 Do not change colour of text
using HTML code. Use style
 Questions in red are mandatory
sheet (CSS) only. Some users
replace the default style sheet
with their chosen colours for
text and background in their
own style sheet.
Some people are colour blind! Whatever you do avoid any sort of colour dependency.
© Access2All

44. Colour
 Think of colour blind and avoid
colour dependency
 Questions marked (*) are mandatory
 Sufficient contrast between
text and background
 Do not change colour of text
using HTML code. Use style
 Questions in red are mandatory
sheet (CSS) only. Some users
replace the default style sheet
with their chosen colours for
text and background in their
own style sheet.
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

45. Colour
 Think of colour blind and avoid
colour dependency
 Questions marked (*) are mandatory
 Sufficient contrast between
text and background
 Do not change colour of text
using HTML code. Use style
 Questions in red are mandatory
sheet (CSS) only. Some users
replace the default style sheet
with their chosen colours for
text and background in their
own style sheet.
Always use the built-in stylesheet. This way these users can replace your stylesheet with
their own.
© Access2All

46. Video/Audio
Seated Carer looking
 Foreground easily discernible
sympathetic and from background
 holding hands of
elderly gentleman.
He says “I‟m worried  Video/Audio both have verbatim
about my wife”
transcript
 Transcript includes relevant
sound/cues
  Scenario explained to blind
 Video includes captioning for deaf.
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

47. Video/Audio
Seated Carer looking
 Foreground easily discernible
sympathetic and from background
 holding hands of
elderly gentleman.
He says “I‟m worried  Video/Audio both have verbatim
about my wife”
transcript
 Transcript includes relevant
sound/cues
  Scenario explained to blind
 Video includes captioning for deaf.
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

48. Video/Audio
Seated Carer looking
 Foreground easily discernible
sympathetic and from background
 holding hands of
elderly gentleman.
He says “I‟m worried  Video/Audio both have verbatim
about my wife”
transcript
 Transcript includes relevant
sound/cues
  Scenario explained to blind
 Video includes captioning for deaf.
Within this transcript add relevant sound cues in brackets for the deaf. Also explain the
scenario to the blind.
© Access2All

49. This presentation
was delivered to you
by
www.access2all.org
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: penny@access2all.org
© Access2All

50. 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: penny@access2all.org
www.access2all.org
* In partnership with VerseOne Technologies Limited.
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.
© Access2All

51. 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: penny@access2all.org
www.access2all.org
* In partnership with VerseOne Technologies Limited.
We will establish your current level of conformance with version 2.0 of the Web Content
Accessibility Guidelines.
© Access2All