{"id":13344,"date":"2019-01-24T14:27:02","date_gmt":"2019-01-24T19:27:02","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?p=13344"},"modified":"2026-03-17T08:46:33","modified_gmt":"2026-03-17T12:46:33","slug":"accessibility-is-for-everyone","status":"publish","type":"post","link":"https:\/\/carleton.ca\/webservices\/2019\/accessibility-is-for-everyone\/","title":{"rendered":"Accessibility is for Everyone"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Accessibility is for Everyone\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>Accessibility has become a bit of a buzzword in recent years, and, as with the names of many crucial initiatives and endeavours when they become used commonly, their importance can be diminished. So it is sometimes a useful exercise to loop back around and remember why something like accessibility is a crucial aspect of work we all do on campus, and why Web Services makes accessibility a key priority in building websites here at 杏吧原创. We think this is also a great opportunity to tell you why it is we ask you to do certain things when it comes to creating content for your websites.<\/p>\n\n\n\n<h2 id=\"what-is-accessibility-about\" class=\"wp-block-heading\">What is accessibility about?<\/h2>\n\n\n\n<p>When we talk about accessibility, many people think of physical barriers (and their removal). Websites are really no different. As website builders and content creators, it is our responsibility to make sure, for example, that<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>people can see the text on the page (or hear it if they use a screen reader to assist their browsing),<\/li>\n\n\n\n<li>they can understand what an images contains (if any visual impairment stops them from discerning this in the way we might usually expect),<\/li>\n\n\n\n<li>they can browse between and interact with items on a page (such as hyperlinks if they have a physical limitation).<\/li>\n<\/ul>\n\n\n\n<p>Creating an accessible website can be aided with something as simple as making sure the colour of the text is in clear contrast to the background colour of the web page.<\/p>\n\n\n\n<h2 id=\"accessibility-and-aoda\" class=\"wp-block-heading\">Accessibility and AODA<\/h2>\n\n\n\n<p>So how do we make sure our sites are accessible? Luckily, we do have some guidance and help from the AODA legislation and documentation. In Web Services we don\u2019t start off with the aim of meeting all the criteria of provincial legislation; instead our goal is to make our web templates and content as accessible as possible to the greatest number of people; this will, coincidentally, meet all the AODA criteria.<\/p>\n\n\n\n<h2 id=\"how-widespread-are-accessibility-considerations\" class=\"wp-block-heading\">How widespread are accessibility considerations?<\/h2>\n\n\n\n<p>Isn\u2019t this a lot of work to help a minority of individuals with accessibility issues who access websites? According to research, the answer is 14%, which is surprisingly high. But, bear in mind, that number only reflects people <em>registered<\/em> as having a disability \u2013 that statistic doesn\u2019t cover the number of people who suffer with issues and don\u2019t report them. Also, you might be a person who, like me, one day needs reading glasses to read web content. If you are placing text on your site that is tiny you are excluding not only people who are registered as legally visually impaired; you are also excluding almost everyone who is middle-aged or older!<\/p>\n\n\n\n<h2 id=\"two-aspects-to-consider\" class=\"wp-block-heading\">Two aspects to consider<\/h2>\n\n\n\n<p>When it comes to the web at 杏吧原创, there are two general things we have to consider: the <strong>template<\/strong> and the <strong>content<\/strong>. The template is the responsibility of Web Services. We have developed a template that maximises, to the best of our ability, people\u2019s power to access and navigate the websites placed in this template. Content is all about you! Once we hand a website over to the people who administer it and maintain its content, the responsibility becomes theirs to insure what is placed in the site is as accessible as possible.<\/p>\n\n\n\n<h2 id=\"examples-of-good-practices\" class=\"wp-block-heading\">Examples of good practices<\/h2>\n\n\n\n<p>So, why do we ask that you do certain things on your sites and not do others? Let\u2019s look at two great examples.<\/p>\n\n\n\n<h3 id=\"compare-and-contrast\" class=\"wp-block-heading\">Compare and contrast<\/h3>\n\n\n\n<p>We are often asked by website maintainers how to change the colour of a piece of text on a web page. As a for-instance, people often want to make the text red to highlight it. This we discourage.<\/p>\n\n\n\n<p>The standard text we use on all of our websites (which have white backgrounds) is black. There is, after all, a reason people say something is \u2018black and white\u2019 when they want to say two things are in complete contrast to each other. Different colours can stand in contrast to each other, but black and white are the best at helping us discern text from not-text.<\/p>\n\n\n\n<p>If we want to get technical, there is a world wide standard for the colour contrast, determined by the poetically named <em>WCAG 2.0 Contrast Ratio Formula<\/em>. It is about as sexy as it sounds and it is <a href=\"https:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-contrast\">a pain to understand<\/a> but thankfully there are online tools that allow you to enter a text colour and a background colour to quickly see if the combination is accessible or not.<\/p>\n\n\n\n<p>For instance, if you were to force red code into your CMS website, here&#8217;s what you get:<\/p>\n\n\n\n<p>Brightness Difference: (&gt;= 125): 178.755<br>\nColour Difference: (&gt;= 500): 510<br>\nAre colours compliant?<br>\nContrast Ratio: 3.998<br>\nWCAG 2 AA Compliant: NO<br>\nWCAG 2 AAA Compliant: NO<\/p>\n\n\n\n<p>The important indicator is that the WCAG 2 AA\/AAA Compliances must be YES. Alas, they are both a big NO.<\/p>\n\n\n\n<p>So \u2018red\u2019 (as defined by the color hex code of #FF0000) is inaccessible to many and non-optimal for almost everyone! This is why we ask you do not highlight text by changing the colour of the font. Instead there are any other options, for example, bolding text, using headings to highlight a new section on a page, etc.<\/p>\n\n\n\n<h3 id=\"getting-the-word-out-there\" class=\"wp-block-heading\">Getting the word out there<\/h3>\n\n\n\n<p>Banners and other images can have a massive impact on your site. They can communicate brand, illustrate concepts and underline the meaning of your text \u2013 that is, to those with the visual ability to discern what is in the image and what it is trying to convey. When it comes to accessibility and images we employ different methods to make them partially accessible. For example, because screen readers (employed by those with visual impairments to speak web content to them) cannot decipher what is in an image we use alt text to describe the image.<\/p>\n\n\n\n<p>But because of the nature of how an image works, this means a big no-no in web content is placing text on you images that is designed to convey a message. Consider this image:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"210\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/picturewithtext.png\" alt=\"example of a non accessible image with text on it\" class=\"wp-image-13345\" srcset=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/picturewithtext.png 484w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/picturewithtext-320x139.png 320w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/picturewithtext-360x156.png 360w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/picturewithtext-200x87.png 200w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/figure>\n\n\n\n<p>This is a classic example of why text on images is a bad idea. None of the text instructions on the picture would be apparent if scanned by a screen reader. If the instructions are nowhere else on the page then these instructions are lost. It is also a great example of ensuring your website is accessible benefits everyone: if the instructions were text then it would also be easily accessed by search engines such as Google. Also, if someone who doesn\u2019t consider themselves sight impaired comes across the page when they don\u2019t have their reading glasses on, they can enlarge text on the page; if they tried enlarging the image, the text becomes MORE blurred.<\/p>\n\n\n\n<h2 id=\"in-conclusion\" class=\"wp-block-heading\">In conclusion<\/h2>\n\n\n\n<p>It is very important that our 杏吧原创 websites are accessible.&nbsp; Yes, we need to meet AODA standards (by law), but we want to provide a really great online experience for all. And that means understanding who our audience is, what barriers exist, and solutions to minimize those barriers. &nbsp;Your takeaways today are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>do not change font colours \u2013 there are more accessible ways to emphasize your content<\/li>\n\n\n\n<li>do not put words on images \u2013 put the content below the image so that everyone gets the same experience<\/li>\n\n\n\n<li>use alt tags on your images \u2013 a screen reader will be able to relay to the user the context of the image<\/li>\n<\/ul>\n\n\n\n<p>We\u2019ll be talking a lot more about accessibility and easy ways that you can make sure your website is accessible.&nbsp; Make sure to <a href=\"https:\/\/carleton.ca\/webservices\/2016\/subscribe-to-our-newsletter\/\">subscribe to our newsletter<\/a> to stay informed.<\/p>\n\n\n\n<p>To learn more about the importance of accessibility, visit our self-guided accessibility training:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/webworkshops\/accessibility-training\/\">Accessibility Training<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Accessibility has become a bit of a buzzword in recent years, and, as with the names of many crucial initiatives and endeavours when they become used commonly, their importance can be diminished. So it is sometimes a useful exercise to loop back around and remember why something like accessibility is a crucial aspect of work [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[197,390,391],"tags":[],"class_list":["post-13344","post","type-post","status-publish","format-standard","hentry","category-accessibility","category-keep","category-rewrite"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/13344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/comments?post=13344"}],"version-history":[{"count":1,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/13344\/revisions"}],"predecessor-version":[{"id":21388,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/13344\/revisions\/21388"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/media?parent=13344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/categories?post=13344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/tags?post=13344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}