{"id":226,"date":"2019-10-03T12:49:17","date_gmt":"2019-10-03T11:49:17","guid":{"rendered":"http:\/\/blogs.york.ac.uk\/marketing\/?p=226"},"modified":"2019-11-20T14:43:08","modified_gmt":"2019-11-20T14:43:08","slug":"improving-the-accessibility-of-our-website","status":"publish","type":"post","link":"https:\/\/blogs.york.ac.uk\/communications\/2019\/10\/03\/improving-the-accessibility-of-our-website\/","title":{"rendered":"Improving the accessibility of our website"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Our web content should be easy for everyone to access, but we need to be specifically mindful that we don\u2019t exclude people with accessibility needs.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While we\u2019ve always tried to make the website work as well as possible for everyone, we\u2019re conscious that it\u2019s not as accessible as it should be, and new legislation has prompted us to make improving it a priority.<\/p>\n\n\n\n<!--more-->\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">The legislation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.gov.uk\/guidance\/accessibility-requirements-for-public-sector-websites-and-apps\">Recent changes in legislation<\/a> state that:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Websites created after September 2018 must meet level AA of the<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\"> Web Content Accessibility Guidelines (WCAG) 2.1<\/a> by 23 September 2019<\/li><li>Websites created before this date must meet this standard by 23 September 2020.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">There are <a href=\"https:\/\/www.gov.uk\/guidance\/make-your-website-or-app-accessible-and-publish-an-accessibility-statement#things-you-might-not-need-to-fix\">exemptions for some specific types of content<\/a>, but most public-facing web content will need to comply by these dates.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Impairments that may make using websites difficult<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are lots of reasons why a person may find web pages difficult to use, for both temporary and permanent reasons. Access needs fall into four main categories:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Visual impairment<\/h3>\n\n\n\n<div class=\"wp-block-media-text alignwide\" style=\"grid-template-columns:18% auto\"><figure class=\"wp-block-media-text__media\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"113\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2019\/10\/eye.png?resize=150%2C113\" alt=\"\" class=\"wp-image-232\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\">For example no vision, low vision, sensitivity to light, colour blindness.<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This is probably what most people think about when they think about accessibility of websites.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">People with a visual impairment may need to use screen reading or screen magnification\/zoom software.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hearing impairment<\/h3>\n\n\n\n<div class=\"wp-block-media-text alignwide\" style=\"grid-template-columns:17% auto\"><figure class=\"wp-block-media-text__media\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2019\/10\/hearing.png?resize=150%2C150&#038;ssl=1\" alt=\"\" class=\"wp-image-233\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\">For example no hearing, or low level of hearing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">People in this category will benefit from captions on videos, and non-sound indicators.<\/p>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Mobility impairment<\/h3>\n\n\n\n<div class=\"wp-block-media-text alignwide\" style=\"grid-template-columns:17% auto\"><figure class=\"wp-block-media-text__media\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2019\/10\/pointer.png?resize=150%2C150&#038;ssl=1\" alt=\"\" class=\"wp-image-234\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\">For example physical issues (such as loss of limb or paralysis), or neurological\/genetic disorders that lead to weakness or loss of control in limbs.&nbsp;<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Some people might have difficulty making the hand movements required to use a mouse, while others might only use a keyboard, and some people navigate using a head pointer or a single button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cognitive impairment<\/h3>\n\n\n\n<div class=\"wp-block-media-text alignwide\" style=\"grid-template-columns:17% auto\"><figure class=\"wp-block-media-text__media\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"131\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2019\/10\/cogs.png?resize=150%2C131&#038;ssl=1\" alt=\"\" class=\"wp-image-235\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\">For example learning disabilities, mental illnesses or age-related limitations.&nbsp;<\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Although there are a wide range of cognitive impairments, people with them experience a common set of problems when accessing websites. These include difficulty with understanding content and remembering how to complete tasks, and confusion caused by inconsistent web page layouts.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Checking for accessibility problems<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Most of the content on the University website is published via the web CMS, so we\u2019re starting by checking our CMS templates and the content published using them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019re using a combination of methods to check the site:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Automated testing<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"692\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2019\/10\/pasted-image-0-1024x692.png?resize=1024%2C692&#038;ssl=1\" alt=\"\" class=\"wp-image-227\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2019\/10\/pasted-image-0.png?resize=1024%2C692&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2019\/10\/pasted-image-0.png?resize=300%2C203&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2019\/10\/pasted-image-0.png?resize=768%2C519&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2019\/10\/pasted-image-0.png?w=1293&amp;ssl=1 1293w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><em>An accessibility page report in Siteimprove, showing where colour contrast in the template needs improvement<\/em> <\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ve bought a licence for a tool called Siteimprove, which scans our pages for accessibility errors, and lets us know which ones are the highest priority to fix.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Siteimprove tests things such as colour combinations, alternative text for images, heading structures, and form and PDF accessibility. It also flags unhelpful link text, such as \u201c<a href=\"http:\/\/stephanieleary.com\/2015\/05\/why-click-here-is-a-terrible-link-and-what-to-write-instead\/\">click here<\/a>\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In addition, Siteimprove checks for broken links, spelling mistakes and readability, helping us improve the overall quality of the website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manual testing<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2019\/10\/manual-testing.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"289\" src=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/marketing\/wp-content\/uploads\/sites\/4\/2019\/10\/manual-testing-1024x289.png?resize=1024%2C289\" alt=\"\" class=\"wp-image-228\" srcset=\"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2019\/10\/manual-testing.png?resize=1024%2C289&amp;ssl=1 1024w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2019\/10\/manual-testing.png?resize=300%2C85&amp;ssl=1 300w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2019\/10\/manual-testing.png?resize=768%2C216&amp;ssl=1 768w, https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2019\/10\/manual-testing.png?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption><em>Outcomes of manual testing are recorded in a Google Sheet<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There are some issues that an automated tool can\u2019t detect, so we\u2019re using an accessibility checklist to manually check a selection of pages.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, we\u2019ll be checking that our pages can be navigated using only a keyboard, and that if an image contains information (rather than just being decorative), that the same information is provided as text.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">User testing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ve been talking to people who have access needs, asking them to show us how they use the York website and the problems they face.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">External review<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We asked <a href=\"https:\/\/www.jisc.ac.uk\/\">Jisc<\/a> to carry out a review of our website. Their report highlighted what we&#8217;re already doing well and where there are things we need to improve.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/drive.google.com\/file\/d\/1wHPnAZLHUxOyg-Hca68t3IESEvk-l-nA\/view?usp=sharing\">University of York Accessibility Snapshot<\/a> (University of York staff only)<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Fixing the problems<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The above methods are helping us build a picture of what we need to fix, and which issues are a priority.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are two types of fixes that we\u2019ll need to carry out:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Changes to CMS templates and the Digital Pattern Library<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The first type of fixes to tackle are the ones related to our <a href=\"https:\/\/www.york.ac.uk\/pattern-library\/\">Digital Pattern Library<\/a>, and the associated CMS templates. These are being done by the Digital Team within Marketing.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ve already made a start on improving colour contrasts, forms, news listings and changing the way our search works.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Changes to the content of individual pages<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once we\u2019ve made good progress with the CMS templates, we\u2019ll move on to supporting web page owners fixing any changes to the content of individual pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re already following <a href=\"https:\/\/wiki.york.ac.uk\/pages\/viewpage.action?pageId=74712085\">good practice for writing for the web<\/a> \u2013 eg using headings correctly, writing effective link text, providing text alternatives to images \u2013 then there probably won\u2019t be much to do. If you\u2019re creating any new content, following this guidance will mean that it\u2019s more likely that the content will be accessible from the start, so you won\u2019t need to come back and fix it later.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019re preparing guidance on how to fix specific types of content issues. We\u2019ll then get in touch with owners of pages where we\u2019ve identified that there any issues, and provide help in resolving them. We\u2019ll be using Siteimprove to automatically find these issues, so you don\u2019t need to start manually checking all of your existing pages.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Producing an accessibility statement<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The legislation also requires us to <a href=\"https:\/\/www.gov.uk\/guidance\/make-your-website-or-app-accessible-and-publish-an-accessibility-statement#publish-your-accessibility-statement\">publish an accessibility statement<\/a> that explains how accessible our website is. It will also provide people with a way to contact us to report accessibility problems, and a link to a central government website that they can use if they\u2019re not happy with our response.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This will be something that we\u2019ll link to from all of our web pages.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The deadlines for publishing accessibility statements are the same as the deadlines for complying with the standards.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Other work being done around the University<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As well as the pages that are published from the web CMS, there are many other things that can be referred to as being part of \u2018the website\u2019. These range from tools providing specific pieces of functionality, to large systems such as YorSearch and the VLE. The legislation applies to all of these too.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">An e-accessibility working group has been formed, with representation from services from around the University. The group is leading on several initiatives to make digital content easier for everyone to use.&nbsp;&nbsp;<br>There are lots of useful resources on the <a href=\"https:\/\/wiki.york.ac.uk\/display\/EAC\/e-accessibility+home\">e-accessibility wiki<\/a>, including details of training sessions on topics such as producing accessible documents.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-default\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Any questions?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;ve got any further questions that weren&#8217;t covered in this post, feel free to contact me (<a href=\"mailto:paul.kelly@york.ac.uk\">paul.kelly@york.ac.uk<\/a>) or leave a comment below. We&#8217;ll be posting more updates as the project progresses.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our web content should be easy for everyone to access, but we need to be specifically mindful that we don\u2019t exclude people with accessibility needs.&nbsp; While we\u2019ve always tried to make the website work as well as possible for everyone, we\u2019re conscious that it\u2019s not as accessible as it should be, and new legislation has [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":229,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[27,15,39],"class_list":["post-226","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-accessibility","tag-digital","tag-user-experience-ux"],"acf":[],"uoy_author":{"name":"Paul Kelly","bio":"Digital Platforms and Developments Manager","image":{"src":"https:\/\/secure.gravatar.com\/avatar\/?s=200&d=mm&r=g","width":200,"height":200,"alt":""}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blogs.york.ac.uk\/communications\/wp-content\/uploads\/sites\/4\/2019\/10\/header.png?fit=800%2C400&ssl=1","_links":{"self":[{"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":0,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/media\/229"}],"wp:attachment":[{"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.york.ac.uk\/communications\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}