Category Archivess: Website accessibility

Checking your website can be viewed using screen magnifiers

Users with visual impairments will often need to enlarge the text on your site in order to read it. It is important that they are able to do this without the website appearing so large that they have to scroll sideways to see all the page content. The WCAG 2.1 Accessibility Guidelines state that you must be able to magnify the text to 200% without there being any problems for users to view it.

To check your website, works correctly when zoomed in or magnified, you can change your browser settings to magnify the page. To do this in Chrome, select ‘Settings’ then ‘Font size’ and change it to ‘very large’. If you use Firefox you can click on the 3 horizontal bars icon at the top right of your browser and click the ‘+’ in the Zoom section.

If you would prefer to use keyboard shortcuts, you can hold down the ‘Cmd’ or ‘Ctrl’ key and the ‘+’ key on your keyboard at the same time. Click the ‘+’ key repeatedly to enlarge the text. The %size will show at the top of the browser next to where the website address is showing. If you need more details about your particular browser, click one of the links below.

You need to check that you can complete all tasks with the font magnified to 200% for your website to be accessible (WCAG 2.1 level AA).

Website accessibility for local councils: 4 things to start doing now

Compliance with website accessibility regulations (WCAG 1.2 AA standard) will become mandatory for all town, parish and community councils in September 2020. This is going to mean changes in the way you publish information online, as well as in the way you write your web pages and documents such as minutes and agendas.

Here are 4 things to start doing now.

Structure your documents correctly

Make sure that you are using proper markup to style your headings. You need to do this because some users with visual impairments use ‘screen readers’ to read out the text for them. These screen readers will often jump through the list of headings so that they can quickly find the information they are looking for – in the same way non visually impaired users will quickly scan the headings on a page.

If you style your headings just using the normal font but making it larger or bold, the screen readers will not recognise them as headings.

If you are using WordPress, you can tell if the headings are styled correctly by opening up the page in the editor and clicking on the headings. The drop-down box at the top of the screen should show ‘Heading 2’ or ‘Heading 3’, rather than ‘Paragraph’ when you have a heading selected. If it doesn’t, simply select the heading that you would like to apply to the text, then click ‘Publish’ to save your changes.

Use descriptive links

Check that links clearly state what they are linking to. This is important because users viewing your site using screen readers will frequently scan through just the links on the page. This means that they don’t have the surrounding text to explain where the link is going to. So for example instead of a link saying ‘Agenda’ you should set up a link saying ‘Agenda 3 March 2019’.

How to write good link text

  • Put the most important words at the front of the link for example use ‘website accessibility – further information’ instead of ‘click here for more information about website accessibility’
  • Make sure the links make sense if viewed in isolation
  • For links that lead to information, use text about that information in the link
  • For links that take visitors to a page where they will complete a task, begin the link with a verb. For example: ‘contact us’
  • Where possible use the title of the page you are linking to as the link text
  • Don’t use the same link text to link to different places
  • Think about visitors with reduced motor skills and don’t make the link too small as it will be difficult to select. One word links aren’t ideal for these users.

Save files in accessible PDF/A format

All office files that were created after 23rd September 2018 need to be accessible. This means that if you have saved them as PDF files, they must be saved in the accessible version of PDF which is PDF/A. You can read more about how to do that here: How to save Word documents in accessible PDF/A format

PDF/A format is a version of PDF. In order for a document to be accessible by screen readers it needs to have ‘tags’ and ‘searchable text’.

  • Tags are elements that structure the page. For example there are tags for paragraphs, headings, lists, table and images. These tags enable users using screen readers to quickly and easily navigate the page content.
  • Searchable text means that text is embedded in the pdf, rather than the text existing as an image (for example a scanned form). If you’re not sure, open your pdf and try to drag and select the text. If you can do that it is searchable.

Older documents that were published before September 2018 do not need to be accessible unless they are essential for the council’s services. However you should state this in your accessibility statement and provide an alternative means of users being provided with that information on request.

Write in simple language

When you are writing it is important to think about making your information – whether it’s web pages or pdf minutes – accessible to users with cognitive impairments. These include visitors who may have difficulties with memory, comprehending and reasoning or users with adaptive behavior impairments. For example users with dementia, dyslexia, autism.

You should:

  • Write in plain English
  • Use short, simple sentences
  • Do not use long or complicated words
  • Break up long blocks of text into headings/bullets/short paragraphs
  • Don’t use figures of speech
  • Don’t use footnotes
  • Don’t expect users to remember information from a previous pages

Website Accessibility (WCAG 2.1 AA) for Town and Parish Council Websites

What is WCAG 2.1 AA website accessibility?

WCAG 2.1 AA is the minimum standard of website accessibility that public sector websites must meet.

Making a website accessible means ensuring that it can be used by as many people as possible. At least 1 in 5 people have an impairment or a disability including those with:

  • Impaired vision – for example, blind or partially blind
  • Motor difficulties – for example, users who may have problems using a mouse
  • Cognitive impairments – for example, users with autism or learning disabilities
  • Impaired hearing – for example, deaf or hard of hearing

As website editors for local councils, the two main groups you need to consider are those with impaired vision who may be reading your site using a screen reader or magnification and users with cognitive impairments. Your website designer should make sure that your site works for users with motor difficulties. Users with impaired hearing will not have problems using your site, unless your town, parish or community council website uses sound or video.

We go into more detail here: Website accessibility – what is it and why does it matter?

We have also published some handy pictorial guides here: Website Accessibility Dos and Don’t s – a pictorial guide

Who needs to comply?

All local authorities need to meet the regulations unless they are exempt. That includes all town, parish and community councils.

If you feel that full compliance would be a disproportionate burden on the council, you need to explain why in an accessibility statement and state how users can obtain the information in an accessible format.

So, for example, a local council that has already published a lot of historical minutes in PDF format might find that converting them all to accessible PDF/A format presents a disproportionate burden. However, going forward, you need to make sure that all information is published in an accessible format as soon as you are able.

You can read more about applying for exemption here: Website accessibility regulations – applying for exemption

When must you comply by?

For new websites that were created on or after 23 September 2018, you need to meet accessibility standards by 23 September 2019.

For websites that were created before 23 September 2018 you need to ensure that your website meets accessibility standards by 23 September 2020.

What do you need to do?

Ensure your web pages are accessible

Make sure you writing is easy to understand, that your information is well structured and that your pages don’t use complicated layouts. That includes writing in short sentences and structuring your pages using headings or bullet points, for example. You can read more here:  How to write accessible web pages

Accessible formatting for web pages

You should make sure that the way you style your pages does not make them less accessible. Common issues that make pages harder to read and therefore less accessible include writing in uppercase, using underlining (other than for text links) and centered text (unless used sparingly – as an example, for headings.)

Other parts of your web pages

If you publish images on your site or have links to other pages in your site or other websites, you also need to make sure they are accessible. We’ll be writing more about that later.

Ensure your file attachments are accessible

Most councils publish a lot of documents in PDF or Word format. These might include minutes, agendas, financial information and other documents. Making these files accessible is twofold – you must write and structure the document in an accessible way and you must then save it in an accessible format. You can read more here:

Guide to writing documents that are accessible

Making PDF files accessible

How to save Word documents in accessible PDF/A format

Accessibility statement

You need to have an accessibility statement that details how your website complies with accessibility regulations. You can read more about it here: Developing an Accessibility Statement/

Accessibility of your website framework

As well as what you need to do to make sure your website content is accessible, there are also lots of things your web designer needs to do to ensure the framework and design of your site is accessible. This includes making changes to the coding of the pages to enable them to be read more easily by screen readers, making sure the design works for users with impaired vision and that it is flexible enough to be viewed with the text enlarged and ensuring the coding of the contact form is accessible.

Writing an Accessibility Statement

Why provide an accessibility statement

Accessibility statements are important for several reasons:

  • Show your users that you care about accessibility and about them
  • Provide them with information about the accessibility of your content
  • Demonstrate commitment to accessibility, and to social responsibility

As a local council you will be required to provide an accessibility statement on your website

What to include in an accessibility statement

Accessibility statements should contain at least the following:

  • A commitment to accessibility for people with disabilities
  • The accessibility standard applied, such as WCAG 2.1
  • Contact information in case users encounter problems

It is also advisable to include the following information:

  • Any known limitations, to avoid frustration of your users
  • Measures taken by your organisation to ensure accessibility
  • Technical prerequisites, such as supported web browsers
  • Environments in which the content has been tested to work
  • References to applicable national or local laws and policies

How to write an accessibility statement

Accessibility statements are primarily for users of your content. Usually they will refer to accessibility statements when they encounter problems. Technical and jurisdictional language will likely lead to confusion and increase the frustration rather than help your users. It is important to write in simple language, and to provide information that is useful to the users, rather than use the language of developers and lawyers.

In particular, accessibility statements should explain functionality and known limitations in common terms. For example, rather than to say “WCAG Success Criterion 1.2.2 was not met”, it is better to say “videos do not have captions”. Accessibility statements are not technical assessments or declarations of conformity, though they ideally refer to such background to provide verification and increase credibility.

Where to put an accessibility statement

Accessibility statements should be easy to find. Linking them to the footer of your website is an acknowledged convention, but you could include links to them from other areas from your site.

Sample accessibility statement

You can view a sample accessibility statement on the Government website here: https://www.gov.uk/government/publications/sample-accessibility-statement/sample-accessibility-statement-for-a-fictional-public-sector-website

How to make your website accessible for users with different impairments

The Web Content Accessibility Guidelines (WCAG 2.1) outline what you need to do to improve the accessibility of your Town, Parish or Community Council website. This involves considering how the users with the following impairments can access your information:

  • Vision – including people who are blind, partially sighted or colour blind
  • Mobility – including users who find it difficult to use a mouse or keyboard
  • Thinking and understanding – including people with dyslexia, autism or learning difficulties
  • Hearing – people who are either deaf or hard of hearing. We won’t go into this in detail as it doesn’t apply to most Town, Parish or Community Council websites, only websites that use sound or video.

Making your website accessible to users with impaired vision

This means that your website should be accessible for users who cannot see well and may need to use a screen reader that will ‘speak’ the content to them to access your site or may need to enlarge the text using a screen magnifier or increasing the text size

What you need to do:

  • Provide ‘alt text’ for all non text content, for example images
  • Ensure your web pages are structured logically so that they can be read by a screen reader. The best way to do this is to use the Heading 1, Heading 2, Heading 3 options structure the sections in your web page, rather than manually setting font sizes and making them bold etc
  • Use tables sparingly. If you are using tables make sure that the headers and content are defined as such and that they work when magnified to 200% and on smaller screens
  • Do not use underlining other than for text links
  • If you publish PDF files as so many Town, Parish or Community Councils do, make sure they are accessible – See making pdf files accessible for how to do this

What your web designer needs to do:

  • Make sure that any forms, such as the contact form, have the correct markup to be read by a screen reader
  • Do not just use colour to distinguish something. For example use the convention of underlining to define links and do not use underlining elsewhere
  • Use default text colours that show up well against the background colour
  • Ensure that every feature can still be used when viewed at 200% text size and that content flows into a single column when it’s increased by 400%
  • Make sure you site is correctly programmed for screen readers
  • Use valid HTML to enable assistive technologies to interpret content
  • Ensure that all parts of the interface can be read by assistive technologies

Making your website accessible for users with impaired mobility

This is especially to address the needs of users with mobility impairments to ensure they can access your web content using keyboard or voice commands, rather than a mouse, to navigate through your site

What you need to do:

  • Make links descriptive rather than using ‘click here’ as the link. For example use ‘click for Parish Council minutes‘ rather than ‘for Parish Council minutes click here‘ where the underlined text represents the actual link.
  • Use meaningful page titles, headings and labels so that users can easily find the information they want if they are using a screen reader

What your web designer needs to do:

  • Make sure everything works for users who are just using keyboards
  • Ensure that using keyboards mean that users can move through the content in a logical order
  • Provide a ‘skip to content’ link in the coding of the site so that screen readers do not read out all the programming commands
  • Use ‘active focus’ so that users can see what their assistive technology is currently focused on
  • Enable visitors to disable or change shortcut keys

Making your website accessible for users with cognitive impairments

This is to address the needs of users with thinking or understanding difficulties. You need to ensure that the language and structure of your site is easy to understand

What you need to do:

  • Write in plain English, using short sentences
  • Use straightforward language and simple words and explain any complicated words or phrases
  • Always provide an explanation of any acronyms used

What your web designer needs to do:

  • Ensure that form fields are correctly labeled and that they’re correctly coded with accessibility in mind

 

Guide for local councils – how to write accessible web pages

From 23 September 2020 information published on town, community and parish council websites must comply with WCAG 2.1 AA accessibility regulations. This will cover your website content including web pages, pdf files, images and the website itself. We have published a series of guides on how to make sure that your website content is compliant.

Making web pages accessible

  • Write using simple language and short sentences
  • Keep pages simple
  • Use ‘all capitals’ text sparingly
  • Avoid using underlined text unless it is for links

Structuring your web pages for accessibility

  • Avoid using tables to layout your page
  • Structure your pages using headings, bullets and numbered lists. Make sure that your headings are correctly nested, where heading 3 is always a sub-heading of heading 2 and heading 4 is a sub heading of heading 3 etc. The main page heading will be heading 1, so start your heading structure with heading 2
  • Make sure that your headings are correctly defined as heading 2, heading 3 and so on, rather than using text that is larger and bold. In WordPress, you can set the headings using the drop-down box at the top left of the page you are editing. It will usually be set to ‘paragraph’ unless you change it to a heading.

Making images accessible

You must ensure that any images you add to the website are accessible to visually impaired users who need to use screen readers and users with images turned off by adding an ‘Alternative text’ tag (‘alt tag’) to the image that describes what the picture shows. The alt tag will be what is shown to these visitors. How you add the alt tag will depend on what you use to make your web pages.

To add alt text in WordPress, navigate to the image in your media library and click on it to bring up the ‘Attachment Details’ screen. On the right of the screen you will see a box to add ‘Alternative text’ in the grey sidebar on the right of the screen.

Making website links (hyperlinks) accessible

Again, for users with impaired vision who are browsing your site using a screen reader it is important to make website hyperlinks descriptive, rather than using ‘click here’ as your text link. See the links in the following paragraph as a good way to show descriptive links.

Making PDF and Word files accessible

Also, you must make sure that all PDFs or other documents you put on your website are accessible. See Guide to writing documents that are accessible, Making pdf files accessible and How to save Word documents in accessible pdf-a format.

 

Guide to writing documents that are accessible

Write using simple language

Use simple language as often as is possible. This makes your document accessible to people with cognitive impairments or learning disabilities.

Most people would prefer to read documents that use simple language as it means they can quickly understand the information.

If you need to use technical terms or acronyms, explain what the mean the first time you use them.

Keep your documents simple

  • Use short sentences and paragraphs
  • Use a sans serif font like Arial or Helvetica. Make the minimum size 12pt.
  • Avoid using ‘all capitals’ text or italics
  • Left align your text, don’t justify text
  • Use centred text sparingly and only where you want it to stand out such as the main heading
  • Avoid underlining unless for links
  • Use single columns if possible, rather than a more complicated layout
  • Use tables sparingly – only for data and avoid splitting or merging cells
  • Don’t use colour alone to get across the meaning
  • If you use images, think about how a user with visual impairment will be able to access the information
    • by stating the same information in the text
    • by giving the image an ‘alt text’ (alternative text) tag
  • Avoid footnotes if possible

Structure the document

Use bullet points, numbered lists and subheads to break up the document.

Always mark up subheadings with styles – you can create a heirarchy of headings to structure your document, using heading 1, heading 2, heading 3 etc.


Ideally publish web pages rather than PDF files

The Government guidelines state that wherever possible, information should be published as an HTML web page, rather than as a PDF file.

The reason is that information is harder to find, use and maintain in a PDF file and is more difficult to make PDF files accessible. You can read here about why content should be published in HTML and not PDF



More complex documents

There’s lots of information about how to make more complex Microsoft Office documents accessible on the Accessible Digital Office Document (ADOD) Project website.

How to save Word documents in accessible PDF/A format

Save your document using Save or Save AS
  1. Under ‘Save as type’ select PDF (*.pdf)
  2. Select the checkbox for Minimum size (publishing online)
  3. Click on the Options button for more options. This will launch the Options window (shown below)
  1. Check the box ‘Document structure tags for accessibility.
  2. Check the box PDF/A compliant
When you have done this, click OK and Save your document.

Making PDF files accessible

How to make your minutes and agendas PDF files accessible

You must save any documents you want to publish to the web in PDF format as a PDF/A format.

How to create accessible PDFs from a scanned document

In order to make scanned documents such as annual returns or Councillors’ register of interest forms machine readable you need to use Optical Character Recognition (OCR).

Perhaps, going forwards, these forms could be made available as Word documents for you or your Councillors to fill in. You would then be able to save them in PDF/A format.

How to check if your PDF file is accessible

You can check if your PDF file is accessible by using Adobe Acrobat Pro.

Open your document in Adobe reader then go to ‘Edit’ > ‘Accessibility’ and select ‘Quick check’. If you find any problems you’ll either need to change your original Word document, and re-save as PDF or use Acrobat Pro to fix the problems. Depending on the version of Acrobat you are using you may find ‘Accessibility’ under the ‘Tools’ or ‘Advanced’ menu.

If you want to check if your original Word document is accessible before converting it to PDF, use the Office Accessibility checker

 

 

 

 

 

 

 

 

If you are using Microsoft Office 2010 and above you can do this by checking the PDF/A box when saving.

How to save as a PDF/A

  1. Under ‘Save as type’ select PDF (*.pdf)
  2. Select the checkbox for Minimum size (publishing online)
  3. Click on the Options button for more options. This will launch the Options window (shown below)

  1. Check the box ‘Document structure tags for accessibility.
  2. Check the box PDF/A compliant

When you have done this, click OK and Save your document.

 

 

Website Accessibility Dos and Don’t s – a pictorial guide

Click on the images for a larger version

 

What the posters say

Designing for users on the autistic spectrum

Do

  • use simple colours
  • write in plain English
  • use simple sentences and bullets
  • make buttons descriptive – for example, Attach files
  • build simple and consistent layouts

Don’t

  • use bright contrasting colours
  • use figures of speech and idioms
  • create a wall of text
  • make buttons vague and unpredictable – for example, Click here
  • build complex and cluttered layouts

 

Designing for users of screen readers

Do

  • describe images and provide transcripts for video
  • follow a linear, logical layout
  • structure content using HTML5
  • build for keyboard use only
  • write descriptive links and heading – for example, Contact us

Don’t

  • only show information in an image or video
  • spread content all over a page
  • rely on text size and placement for structure
  • force mouse or screen use
  • write uninformative links and heading – for example, Click here

Designing for users with low vision

Do

  • use good contrasts and a readable font size
  • publish all information on web pages (HTML)
  • use a combination of colour, shapes and text
  • follow a linear, logical layout -and ensure text flows and is visible when text is magnified to 200%
  • put buttons and notifications in context

Don’t

  • use low colour contrasts and small font size
  • bury information in downloads
  • only use colour to convey meaning
  • spread content all over a page -and force user to scroll horizontally when text is magnified to 200%
  • separate actions from their context

 

Designing for users with physical or motor disabilities

Do

  • make large clickable actions
  • give form fields space
  • design for keyboard or speech only use
  • design with mobile and touch screen in mind
  • provide shortcuts

Don’t

  • demand precision
  • bunch interactions together
  • make dynamic content that requires a lot of mouse movement
  • have short time out windows
  • tire users with lots of typing and scrolling

Designing for users who are D/deaf or hard of hearing

Do

  • write in plain English
  • use subtitles or provide transcripts for video
  • use a linear, logical layout
  • break up content with sub-headings, images and videos
  • let users ask for their preferred communication support when booking appointments

Don’t

  • use complicated words or figures of speech
  • put content in audio or video only
  • make complex layouts and menus
  • make users read long blocks of content
  • don’t make telephone the only means of contact for users

Designing for users with dyslexia

Do

  • use images and diagrams to support text
  • align text to the left and keep a consistent layout
  • consider producing materials in other formats (for example, audio and video)
  • keep content short, clear and simple
  • let users change the contrast between background and text

Don’t

  • use large blocks of heavy text
  • underline words, use italics or write capitals
  • force users to remember things from previous pages – give reminders and prompts
  • rely on accurate spelling – use autocorrect or provide suggestions
  • put too much information in one place