The Little Web Content Book by Penny Everett

The Little Web Content Book

The Little Web Content BookBy 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

1

About this bookletThe 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

2

About this bookletThe 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

3

Meaningful linksText links make sense out of contextAvoid links such as Click here... and More... Not too close together to help motor impaired Warn users before they open a PDF or fileSame 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 doesnt make sense when read out of context. >

Access2All


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


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


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


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 linksAlternative text to state destination not describe imageUse title text to inform sighted users of link but keep shortDo 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 lets 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



Alt txt:

AnyTube logo


Whereas, title text (also known as a tool tip) is only for sighted users who can mouse over. >

Access2All



Alt txt:

AnyTube logo


It is best to avoid links which open in a new window. Blind users cant use the back button which is what they would normally do to return to a previous window.

Access2All

ImagesNo 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 webUse relevant images to illustrate informationNo flashing images longer than 3 secondsBig files saved in reduced size before uploading.

Dont forget the amazing book sale 2-10 July.

Dont 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

12




Make sure that all images including photos have good contrast. Images that arent links come under 2 categories - they are either decorative or informative. >

Access2All

13




If they are purely decorative then ideally they should be called from the CSS otherwise they should be given a null alternative text. >

Access2All

14




Help dyslexics to make sense of the content by giving them relevant and informative images. >

Access2All

15




Avoid flashing images as these affect people prone to seizures. >

Access2All

16




Always upload images as close to the size you think you will need. Huge files take longer to download.

Access2All

17

Alternative text for imagesBrief but descriptive Alternative Text (alt txt)Words such as images/picture not in alt txtTitle 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



Image of child

When describing the image you need to imagine you have a blind person sitting next to you. >

Access2All



Image of child

Dont use words such as picture of or image of because their screen reader will also tell them it is an image. >

Access2All



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



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



Image of child

Never repeat title text in the alternative text as some blind users will hear the same words twice.

Access2All

Target audienceReading level suitable for target audience*Plain English, no jargon/sayings (idioms)NO SHOUTING (CAPS also difficulty for dyslexics)Sensitivity to culture/religion/gender/ageBite-sized chunks of information not clutteredTest content for keyboard only user access.

She hadnt 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


She hadnt 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


She hadnt 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


She hadnt 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


She hadnt 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


She hadnt 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


She hadnt 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/ Dont forget to avoid offending anyone! This means taking account of the protected characteristics such as religion, culture and gender.

Access2All

Pasting from a Word ProcessorWP formatting and code removed when pastedWeb formatting applied to headingsWeb formatting applied to bullets/numbersEmbedded images in WP saved as 72 dpi files.

The following important details:Title of the bookName of the authorISBN (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


The following important details:Title of the bookName of the authorISBN (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


The following important details:Title of the bookName of the authorISBN (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


The following important details:Title of the bookName of the authorISBN (if known)The following important details:. Title of the book. Name of the author. ISBN (if known)Images cant be copied onto a web page from a document file. Youll need to save them as separate files. >

Access2All


The following important details:Title of the bookName of the authorISBN (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

TablesTable given title (within HTML caption code)Make sense read cell by cell, left to rightColumn row/headings have been definedSummary is brief explanation of data for blind as not visible to sighted users (add explanation of navigation if complex table structure).

DayTimesTuesday8-9amFriday8-9am


There are 2 types of tables: Data tables and layout tables. In this instance we are talking about data tables. >

Access2All




These tables should always have headers for the columns or rows, or both, and they should be correctly defined in the HTML coding. >

Access2All




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




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

HeadingsUse HTML formatting (h1) through to (h6)Only one main heading (h1) per web pageNot chosen for look but in relevant orderBriefly describe following topicHead 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

HeadingsUse HTML formatting (h1) through to (h6)Only one main heading (h1) per web pageNot chosen for look but in relevant orderBriefly describe following topicHead up bite-sized chunks of text to help dyslexics.


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

HeadingsUse HTML formatting (h1) through to (h6)Only one main heading (h1) per web pageNot chosen for look but in relevant orderBriefly describe following topicHead up bite-sized chunks of text to help dyslexics.


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 mustnt 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

ColourThink of colour blind and avoid colour dependencySufficient contrast between text and backgroundDo 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 mandatoryQuestions in red are mandatorySome people are colour blind! Whatever you do avoid any sort of colour dependency.

Access2All


Questions marked (*) are mandatoryQuestions in red are mandatoryEverything 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


Questions marked (*) are mandatoryQuestions in red are mandatoryAlways use the built-in stylesheet. This way these users can replace your stylesheet with their own.

Access2All

Video/AudioForeground easily discernible from backgroundVideo/Audio both have verbatim transcriptTranscript includes relevant sound/cuesScenario explained to blindVideo includes captioning for deaf.

Seated Carer looking sympathetic and holding hands of elderly gentleman. He says Im 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



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



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 bookletThe Little Web Content Book

Weve 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] presentation was delivered to youbywww.access2all.org

Access2All

49

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]

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]

We will establish your current level of conformance with version 2.0 of the Web Content Accessibility Guidelines.* In partnership with VerseOne Technologies Limited.

Access2All

Education

The Little Web Content Book by Penny Everett