What we will cover • Introduction to accessibility • Overview of WCAG • Practical accessibility tips • Q&A We are UX specialists. We provide inclusive UX research and advice to optimise your digital services. Introduction to accessibility 4 “Web accessibility is about universality and making something that can be used by as many people as possible.” 5 Why is accessibility important? 6 11.2 million 83% £80 billion 73% Types of disability 7 Physical Weakness and limitations of muscular control including involuntary movements, lack of coordination, paralysis or pain that impedes movements. Cognitive Neurological disorders, as well as behavioral and mental health disorders that impact well people process and comprehend information. Auditory Mild to severe hearing impairment in one or both ears that can result in partial or complete deafness. Visual Mild or moderate vision loss in one or both eyes to substantial or complete loss of vision in both eyes. Accessibility: The Law The Equality Act 2010 “UK service providers must consider ‘reasonable adjustments’ for disabled people.” While it does not explicitly reference websites, the consensus is these channel are included. 8 Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 “You must make your website or mobile app more accessible by making it ‘perceivable, operable, understandable and robust’. You need to include and update an accessibility statement on your website.” • meet the international WCAG 2.1 AA accessibility standard • publish an accessibility statement that explains how accessible your website or mobile app is 9 WCAG 2.1 Level A, AA, AAA 10 Perceivable Operable Understandable Robust Practical accessibility tips 11 Formats we will cover • HTML website content • Word document • PDFs A note of PDFs PDFs should be avoided: • They do not change size to fit the browser • They are not designed for reading on screens • It is harder to track their use • They cause difficulties for navigation and orientation • They can be hard for some users to access • They are less likely to be kept up to date • They are hard to reuse Inverclyde Council’s PDF banned list: • Flyers and posters • How-to guides • Word document advice notes • Terms and conditions documents • New printable forms 13 Ask yourself… 1. Do we have to have the PDF on the site for legal reasons? 2. Can this PDF be added as webpage content instead? 3. How does having the PDF on the website help the user? 14 The big 3 of accessibility… • Page structure • Images • Link text Page structure 16 Page structure Proper visual and programmatic page structure is vital for helping users effectively navigate a website or document. Key structural elements: 1. Headings 2. Page titles 17 Headings Heading element (h1-h6) are used on websites and within documents to convey the hierarchy of content on the page 1. Heading elements must be used in order 2. There should be only one level 1 heading (

) per page 3. Text that looks like a heading, should also be marked up as one (not just bolded!) 4. Front load heading text with key information 18 Headings: key issues 19 Missing headings Headings not used in order Headings used correctly 20 Headings used in order to correctly convey the structure of content Headings convey content within subsections Headings in Word docs Use the in-built ‘Styles’ options Highlight text and click the heading you want it to be. Headings should follow a structure order: • Use Title for the title of your document • Use H1 for a section title • Use H2 for a sub-section title under an H1 • Use H3 for a sub-section title under an H2 21 Headings in PDFs Using Adobe Acrobat Pro. Open the Accessibility settings and select the ‘Tags’ panel Select the text you wish to make a heading and add ‘New tag’ Follow the same heading hierarchy: • Use Heading Level 1 for the title of your document • Use Heading Level 2 for a section title • Use Heading Level 3 for a sub-section title under an H2 22 Page titles Titles help people identify the primary purpose of a page or document. This allows users to quickly establish that they are on the correct page/ in the correct document. 23 Page titles in Word docs 24 Add a title to the document properties File>Info>Properties Copy and paste your Heading level 1 text Page titles in PDFs 25 Using Adobe Acrobat Pro. Run an accessibility check. If a ‘Title’ is missing, it will be flagged. Right click ‘Title-failed’ and select ‘Fix’ Add the document title to the top box Images 26 Image alt text Image alternative text is the written copy that appears in place of an image on a website or in a document The primary purpose of alt text is so blind people, using a screen reader, can benefit from the visual content on the site Image alt text should be used carefully to add meaning without cluttering the page 27 Informative vs decorative 28 Informative image – Adds richness and context to the text Decorative images – simply there to add visual appeal. Should be given an empty “null” alt text How to write a good image alt text 29 Decide on the context Establish if it is just decoration Be descriptive Don’t include ‘image of’ or ‘picture of’ Image alt texts on websites 30 Can be added when a image is uploaded or added to a page • Only add to images that are informative • Leave blank for decorative images Image alt texts in Word docs 31 Once image is inserted, right click to bring up options menu Select ‘View Alt Text’ • If informative, enter your alt text into the box • If decorative, select the ‘Mark as decorative’ checkbox Image alt texts in PDFs 32 Using Adobe Acrobat Pro Run an accessibility check. If a alt text is missing, it will be flagged. Right click ‘Figures alternate text - Failed’ and select ‘Fix’ • If informative, enter your alt text into the box • If decorative, select the ‘Decorative figure’ checkbox Link text 33 Link text Clear link text is important is important for easy navigation around a website or document • For neurodiverse users, it can be difficult to work out where the link will take them if it is not clearly described in the link label. • For blind users they are a key form of navigation, as they jump between links on the page using the tab key. 34 Link text on websites 35 Link text not user friendly (URL) or clickable Link text is not user friendly (URL) and only distinguished by colour Link text is generic and repeated Creating accessible link text 36 Make sense on their own Short and concise User friendly Not left blank Visually distinct Link text 37 Hyperlink the descriptive part of a sentence e.g. Skills Development Scotland offers redundancy support. This is free support for businesses of any size, no matter how many employees are involved. To do this, highlight the words you wish to link and add a URL Link text in Word/ PDFs 38 Highlight the descriptive part of the sentence, right click and select ‘Link’ (Word doc) or ‘Create link’ (PDF) Useful accessibility tools 39 Useful tools 40 HTML website Word documents PDFs All Inverclyde Council guidance 41 Inverclyde Council guidance: • Guidance for using PDFs on our council website • Guidance on how to create accessible PDFs Q&A 42 Tel: 01249 444 757 Email: info@webusability.co.uk www.webusability.co.uk Studio 14 Glove Factory Studios 1 Brook Lane Holt Trowbridge BA14 6RL