{"componentChunkName":"component---src-templates-posts-js","path":"/principles/accessibility","result":{"data":{"mdx":{"id":"6801bc60-327b-56f7-8ff2-bcfce0a4168e","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Accessibility\",\n  \"path\": \"/principles/accessibility\",\n  \"excerpt\": \"We care about creating designs that are inclusive, serving as many people as possible. While accessibility is a core objective, inclusion means much more - we also think about things like the environment and cognitive load.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Masthead = makeShortcode(\"Masthead\");\nvar UsageImage = makeShortcode(\"UsageImage\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Masthead, {\n    title: \"Accessibility\",\n    subheader: \"We care about creating designs that are inclusive, serving as many people as possible. While accessibility is a core objective, inclusion means much more - we also think about things like the environment and cognitive load.\",\n    mdxType: \"Masthead\"\n  }), mdx(\"h2\", null, \"Purpose\"), mdx(\"p\", null, \"The concept focuses on enabling access for people with disabilities, or special needs, or enabling access through the use of assistive technology; however, research and development in accessibility brings benefits to everyone.\"), mdx(\"h2\", null, \"Benefits\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Avoiding Discrimination - Increase Your Audience\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"71% of web users with a disability will simply leave a website that is not accessible.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The Equality Act and its predecessor \\u2013 the Disability Discrimination Act: Legally protects people from discrimination in the workplace and in wider society.\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Better SEO (Search Engine Optimization)\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When you incorporate accessibility features into your website (such as alt text for images), your Search Engine Optimization also improves.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Useability For All Improvements of accessible design offer advantages for all users.\")), mdx(InsightBlock, {\n    insighttype: \"Research Insight\",\n    sourcename: \"Gov.uk\",\n    sourcedate: \"2015\",\n    sourcetitle: \"1 in 5 people had some form of disability in England and Wales\",\n    sourceurl: \"https://www.ons.gov.uk/peoplepopulationandcommunity/healthandsocialcare/disability/articles/nearlyoneinfivepeoplehadsomeformofdisabilityinenglandandwales/2015-07-13\",\n    mdxType: \"InsightBlock\"\n  }, mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Inclusive - We could tap into 20% more customers.\")), mdx(\"p\", null, \"There are over 11 million people in the UK, 1 in 5 people have a disability - this could be visual, hearing, motor or cognitive (affecting memory and thinking).\\nOver half of the population over the age of 65 experience some kind of disability. \")), mdx(\"hr\", null), mdx(\"h2\", null, \"Key Aspects\"), mdx(\"p\", null, \"Disabilities can be thought of as a mismatch between one\\u2019s ability and one\\u2019s environment, and can be broken into three main types\"), mdx(\"div\", {\n    className: \"cglform two\"\n  }, mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"420px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/96028c417f2cccbefa3249a984c8ed4d/d10fb/Access_Aspects_1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.666666666666664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABdUlEQVQoz42Ty0sCURTG+6eiECMks1Utg9pFtGkhQZsWhlGWEJJGIYQtGhI3QdnYmI8Us3xAhfQQ08JFilEmJFJYeOdrHGZstHx8m3sv5/A73z333C4IYlm2top7qSqEBSFs27wu6UGaEMrkQSeyiD69ofBR/s1BPbQ5kAtWXVTlT+QwYHRDaXBBbYtibu8CBvoayWQeIGgKqwPyV6huvghmzWfo1tgxYQ7A4ktgjbmBcpmBSusAZY2h/F5u71AMVkrfUJsCkC06MGo6wU4whU1PHCMGNxQrDPo1h/B4H2p9bQkkAnTVdomeeTsmt06hpsJYP77D2IaPdylboGF03QpA0vpRxIrh+DN6uStPWYKgOIfb/nsM6Z0Y5IByzvl5+qUzh9KeTFMh9HFudAcxzOxGeJBcS8MafuTjpN3YiEEiVE2+FjFs8kKhO4JqicG43g3/VablDDadQ7GX2eIn9iNpON0pFHKlP846GuxGqFSNP+U//QBfIyjJw/PwfgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Situational\",\n    \"title\": \"Situational\",\n    \"src\": \"/static/96028c417f2cccbefa3249a984c8ed4d/d10fb/Access_Aspects_1.png\",\n    \"srcSet\": [\"/static/96028c417f2cccbefa3249a984c8ed4d/5a46d/Access_Aspects_1.png 300w\", \"/static/96028c417f2cccbefa3249a984c8ed4d/d10fb/Access_Aspects_1.png 420w\"],\n    \"sizes\": \"(max-width: 420px) 100vw, 420px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h5\", null, \"Situational\"), mdx(\"p\", null, \"A person with typical vision might struggle to view their screen in a bright environment. Or,  a new parent with their focus split between multiple tasks.\")), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"420px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/104c6cd7cec8bc02f47f9eeec3b306d6/d10fb/Access_Aspects_2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.666666666666664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABZUlEQVQoz42Sy0sCURjF538KDLNF9FgEES2if6FWriJKKhWVWvTcBkWTE1FK2aAVNiSRo2ZlBWZl6SophBZFi1LvnMZ5MZmvs/nuDL977nfudykoEgRBq+parxIR/jC1ROk/9GbBVA7zoRROnt9QVP41Y0rpzcobyuKvX2Cysmizs+hfDGKY5hHP5GWuIk1dQ6IALncchikfzOsRrHD3YuVhsrFwcw+yY7MdSkhRwNhaRDIcZWLYjmbg2E2gw+GHcdIHhr2TeFLjrqt2aNk8R6vSodV7CTMdQbcrgK6ZA/TZA8g+vcumpIFhkRBpvXSURItlD+NbcXhiWdi8V+h0+tE7ewjj9D4S6bw2pLpTVoHTx1cp8tAyhzn/LUZWz9Au3qFBjDzhudCm3jCyCpTEamaiksnAwjF6nAEMipUOp1FQUpBGQ1Glgp/fBeyE0thgkwjf5PDx9fOPqduhHqh1euXDrmb4C2FcKQxo3LRJAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Temporary\",\n    \"title\": \"Temporary\",\n    \"src\": \"/static/104c6cd7cec8bc02f47f9eeec3b306d6/d10fb/Access_Aspects_2.png\",\n    \"srcSet\": [\"/static/104c6cd7cec8bc02f47f9eeec3b306d6/5a46d/Access_Aspects_2.png 300w\", \"/static/104c6cd7cec8bc02f47f9eeec3b306d6/d10fb/Access_Aspects_2.png 420w\"],\n    \"sizes\": \"(max-width: 420px) 100vw, 420px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h5\", null, \"Temporary\"), mdx(\"p\", null, \"A person with a broken arm may not be able to type but will regain the ability when healed.\"), mdx(\"br\", null), mdx(\"br\", null)), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"420px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c2bd6c1f4f5fe2cf5d5f06cb32d8736f/d10fb/Access_Aspects_3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.666666666666664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABeUlEQVQoz42Sy0sCURjF/ZtapAuhopLaBC1a9Fi4iaAHQasgHMgH0yrKigiFKBEClRJnVMyslLRQiNIeqFBZRJAWYRSaM6cJZ3KMRv24i3sv5/4493yfDHyxLAuW3zOssKtUiSnfsbxWqmRioBj2mH2H6TgFRyKDAsP8QgWdFFQmPjC8i/tkDoOkD0o9hV6jH2PWCK4fXssa1IZWORTcWe1xNM9sY8oSwdruJQaWAmibdSEQuqn77Wrgj5RbBksUcsKJYVMQRm8CQ8v7UGpd6CYoHHpSlcwbdUhsRaHggJMbYSy44xhfP0KHnkYLSWPC4MdT8qX8hqkDLPHhk9QZFBon1KsHWPFdgLDF0M4BO+c86NG6kbp6rspcsikC0H56iyYuw34uu3n6HCPmEFp1FOSaHajNQXx8lRpriiB4KxQxuhmGSkejb9EPlcGNLtKNaUcM6VxeclZrzuFnsQRvIA2rLY69kztksvnKeDUyNv9B/xYjapxUl78BQsIo8n2OMFMAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Permanent \",\n    \"title\": \"Permanent \",\n    \"src\": \"/static/c2bd6c1f4f5fe2cf5d5f06cb32d8736f/d10fb/Access_Aspects_3.png\",\n    \"srcSet\": [\"/static/c2bd6c1f4f5fe2cf5d5f06cb32d8736f/5a46d/Access_Aspects_3.png 300w\", \"/static/c2bd6c1f4f5fe2cf5d5f06cb32d8736f/d10fb/Access_Aspects_3.png 420w\"],\n    \"sizes\": \"(max-width: 420px) 100vw, 420px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h5\", null, \"Permanent\"), mdx(\"p\", null, \"This is what people typically think of when they hear \\u201Cdisability.\\u201D For example a person with one arm.\"), mdx(\"br\", null))), mdx(\"h3\", null, \"Impairment Types\"), mdx(\"h4\", null, \"Cognitive\"), mdx(\"p\", null, \"Cognitive and learning disabilities impact how people process information. For example, they can affect people\\u2019s perception, memory, language, attention, problem solving, and comprehension. Terminology for categories and conditions varies, and includes intellectual disabilities, developmental disabilities; attention deficit hyperactivity disorder (ADHD), autism, dementia, dyslexia, and more.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Long-lasting:\"), \" Autistic Spectrum  |  Dyslexia  |  Anxiety  |  Attention deficit hyperactivity disorder (ADHD)  |  Learning difficulty \"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Temporary:\"), \" Injury  |  Illness\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Situational:\"), \" Noisy Room, Distractions\"), mdx(\"h4\", null, \"Motor\"), mdx(\"p\", null, \"Motor disabilities are weakness and limitations of muscular control. These include: involuntary movements including tremors, lack of coordination, paralysis, limitations of sensation, joint disorders such as arthritis, pain that impedes movement, and missing limbs\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Long-lasting:\"), \" Physical Disability  |  Athritis\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Temporary:\"), \" Injury  |  Illness\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Situational:\"), \" On the move, Train, Car\"), mdx(\"h4\", null, \"Visual\"), mdx(\"p\", null, \"Visual disabilities can range from mild or moderate vision loss in one or both eyes to substantial or complete loss of vision in both eyes. Some people experience reduced or lack of sensitivity to certain colors or color blindness, as well as sensitivity to brightness. Color-blindness affects 8% of all men and 0.4% of women.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Long-lasting:\"), \" Visual Impairment  |  Colour Blind  \"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Temporary:\"), \" Injury  |  Illness \"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Situational:\"), \" Bright Sunlight   |  Small or low quality screens\"), mdx(\"h4\", null, \"Tools\"), mdx(\"p\", null, \"We need to accommodate the range of tools that people use when using our services. Browsers provide settings to increase font size and colours so people can make text more legible. Screen magnifiers allows us to make interfaces even bigger. Screen readers convert text to audio to enable people who can\\u2019t see to hear content instead. Speech recognition software allows people to operate a computer without the use of their hands.\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Accessibility Considerations\"), mdx(\"h5\", null, \"Accessible design not only hellps users with disabilities; it provides better user experiences for everyone.\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Colour Contrast\"), mdx(\"h5\", null, \"WCAG standards (Web Content Accessibility Guidelines)\"), mdx(\"p\", null, \"Meeting the AA requirement is sufficient for the majority of users. The AA requirement constitutes a contrast ratio of 4.5:1 to compensate for the loss of contrast sensitivity by users with a 20/40 vision loss. A study found the \\u201Cmajority of persons maintain at least fair acuity (20/40 or better) into their eighties\\u201D (source). This finding suggests that meeting the AA requirement will make your text accessible to the majority of users.\"), mdx(\"div\", {\n    className: \"wcagTbl\"\n  }, mdx(\"div\", {\n    className: \"wcagImg\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"550px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b1fdacfba17127515563687ba55b1b35/dd45a/Access_ColourGuideline_1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"73.00000000000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABnElEQVQ4y5WUC4+CMBCE+f//T42gKIKoCD54Kb7WfJssVzG5yzVpbLfT3c7Mine/3+X5fMrr9RJ3DPd/xRmPx0M8krFI01Tm87msVitdZ1kmURTJcrmUMAz1bLvdynq91thisZAgCPSXO8Qp5pGMpEVR6AXmfr+Xqqpks9nomuQUOZ1Okue57HY73TPBsz8cDj8Jf6Pxn8HDlLJtmNDzfV9ut5sWsmnnjOPxKJPJRKbTqbKw+/pCTHFH0zRKd1jZNQ5WYMqy1MJfL+y6TnVCR0BMdEGf6/XaX2CNhuB4JUlNw8vlohhNSBXE5/nQgDaC41zbtn27gDNTZrOZdgEPcXFqijvO57NWH/ae6WeD5HVdf5tCQtPNNKEaFIjzaxqSAAztg0yGcXGakCfTnHEcKyWaGFrEiRkL9jQyVMHR4MTQkft9QnNuSNOoupSHOIsZxmOBAePxWKsjMuYgOnvW1lpoOxqNlAE4DOQuOEz9MIUABzR1kiR9MveDgL4k4D8MRX4pTFd8uGytY4YgONPO7APCBEM/cm5rDLGv1huH04P6SEqS3wAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Clour Contrast Compliance\",\n    \"title\": \"Clour Contrast Compliance\",\n    \"src\": \"/static/b1fdacfba17127515563687ba55b1b35/dd45a/Access_ColourGuideline_1.png\",\n    \"srcSet\": [\"/static/b1fdacfba17127515563687ba55b1b35/5a46d/Access_ColourGuideline_1.png 300w\", \"/static/b1fdacfba17127515563687ba55b1b35/dd45a/Access_ColourGuideline_1.png 550w\"],\n    \"sizes\": \"(max-width: 550px) 100vw, 550px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"))), mdx(\"div\", {\n    className: \"wcagTxt\"\n  }, mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"WCAG 2.0 level AA\"), \" requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"WCAG 2.1\"), \" requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). \"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"WCAG Level AAA\"), \" requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.\"), mdx(\"p\", null, \"Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.\"))), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1172px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e7c98527fd27822794b52bb71a2e8778/511f0/Access_ColourGuideline_2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"29.000000000000004%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABNUlEQVQY043Myy4DARTG8Xkib2AlFhIW9h7AigiiwsamKyktjaYhESK0M20JG2FalFZbVnoRSatKTW/G3Lr+GyRNCGHx5Zfz5ZwjXNVLXNVKXL+rFP9p6ce50KwiSPMp4mKeiDvDRbjwu4vpjnEp/2Fy75aQK0Xq4I5tZ4Ja6QVhqj+Id+KImUEJ/0wUx0AQn0PmvfdNy0z2BVhxHDPWu/XhaM8GS+OHjPSs45+VGe5eZW0uxlDXEvnMI8LOQgJZvCHgSRKLZAl5M5xEckjLaU7Ctp5L2yyi+9OgO0nU3hdtz3ZzBFwJzvcLbDpPeSo2EO7VGg9qnaal8VpXMCpljFYTs6Fg6hpW28Q0Ddpt45vmVy3djonwbB8rLy103URrtFDLFftxA7WqoKkammb8Eb2jZbV5Awu/kj6/dStGAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Text Contrast\",\n    \"title\": \"Text Contrast\",\n    \"src\": \"/static/e7c98527fd27822794b52bb71a2e8778/511f0/Access_ColourGuideline_2.png\",\n    \"srcSet\": [\"/static/e7c98527fd27822794b52bb71a2e8778/5a46d/Access_ColourGuideline_2.png 300w\", \"/static/e7c98527fd27822794b52bb71a2e8778/0a47e/Access_ColourGuideline_2.png 600w\", \"/static/e7c98527fd27822794b52bb71a2e8778/511f0/Access_ColourGuideline_2.png 1172w\"],\n    \"sizes\": \"(max-width: 1172px) 100vw, 1172px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Make sure text has enough contrast.\")), mdx(\"p\", null, \"White on a light colour even with a drop shadow is not sufficient to be legiable for most people.\"), mdx(\"p\", null, \"Please use an accessibility contrast checker if you are unsure:\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://webaim.org/resources/contrastchecker/\"\n  }), \"Web AIM contast checker\")), mdx(\"h3\", null, \"Bright Colours\"), mdx(\"p\", null, \"Those on the autistic spectrum can find bright or contrasting colours very distracting.\"), mdx(\"h3\", null, \"Too Many Colours\"), mdx(\"p\", null, \"By limiting the use of colour the areas that do receive color gain more attention, such as text, images, and individual elements like buttons.\"), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"420px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5411a7d02cbf10d19f57bfa6451f6847/d10fb/Access_Colours_DO.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"144.66666666666669%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAAACXBIWXMAAAsSAAALEgHS3X78AAAD3klEQVRIx6VWW28bRRTO7yk8QIsAicsDjwj6jsQLCNGoSStRqr7Q3Cqq0AeEEFKkkLa5NC0PrSAWIapACCGg15AENbFTaieN7Tre9V7ivXlvsx9nZnedpHE2CFb+dM7MnPnm3HbWXaAniiL83yfl6EoVU7cxPTiDKwMzmB7KkZ4Tko+n+r7D5Nlv96xxyefVmh6TsghdjMWEjYqKj14+j57nBtH9TB+6n+3HsUN9OHF4CB+/MozTr322e41kL41PHjmHx8tVwcFCRh4mhOoTHWfeuIATLw6i58gAel8YwPHn+3Hq1fM4++bnGDj6Bemf4vjhfrHWQ/LkS0M4/fowyoVaTMjYtodyRcHw0TFMHJvD5Q9nBcYJlz74HmPv5zD2Xk7o48naZPccrvb+iOG3L257yAnTHAahj/VfVJSmbJSuWShd3cbaNVuA68VpE5XrHnKfLOLLd+ZQuqnC87x2YbrSZIqwH7hYHlVQmNCQv6x2xMolBY+uNDHbt4SRd29Cvu9gJ4fwMB3ICzbyX2tYndQFaWF8L1YndCGL0waKEyY279icDjxQ4eFOwsaig5WEkG/shDYpHbg8qqIuCGMP/xNhG2TDbbMJlxzkL2p4OBVvyAK34bb1u3a7IHsIpXkbD75S6GRK/ugBIBtuW/vd6uBh8ipbNR/yfItCJywkMtWfGisk5XkHZtnbWxSIX4SwxeBvEZpc0tiJEFgRPJ3PkW5yGxqTjbcVxnMOE3vRiTCwI6hFC42HTbgybdIYrE0P1SUF1hMfbiM+SCvZqCw2YNOcb2QSMujrDpGaaEmh8MyRA3GAVNhCqxGKCPQ1W4yNskteZxE6sVeciEt+Og9fzHHwdJi7bbgT2YQqbdKTDU9h5zwP/WBCyqGUN7B2V0bxVh3lRRXlBRXr92SU7khCbvypiDVp1YjzbIT7E/KqSgUivCfRxgaqf2mCoF5oQn/sQFtzsLXRImlDo1xzwsyi+BaDvRlQZX04UkC6L3ReDE+NYiisrbfkOKeZOQwMIDSR9GMkIPpOZ0n/Mbh6KMDnsvvQ4T1mUUiW8MQlz7h3rtBjiNZRKD0q4pDNA/rQrHowKq4g4b0oSFIpE1kjgin5kGrWAYQkQ49BuuVgY9aEstRC6UYT2rKLR99QE6/7CDW6kWo23vphBIdunMOF2z8BdGGHEds/h/qKR9d6C80ieXGbXn4iqv/hwKoG8MhLs+5j5P5vOPPrDH7O/003Cn2ckEHoG/GFwNtByGYik8IE1NAwIYjQpOLZnfowuSD5Z5CR+/tJYUMyiEIELBShpvO7v3rphRht37z/Foh2/7f5B/nVTNpo1yt2AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"DO\",\n    \"title\": \"DO\",\n    \"src\": \"/static/5411a7d02cbf10d19f57bfa6451f6847/d10fb/Access_Colours_DO.png\",\n    \"srcSet\": [\"/static/5411a7d02cbf10d19f57bfa6451f6847/5a46d/Access_Colours_DO.png 300w\", \"/static/5411a7d02cbf10d19f57bfa6451f6847/d10fb/Access_Colours_DO.png 420w\"],\n    \"sizes\": \"(max-width: 420px) 100vw, 420px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(UsageBlock, {\n    usageType: \"Do\",\n    mdxType: \"UsageBlock\"\n  })), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"420px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3c2a584c9ddfe9c5142c7b803824ffc1/d10fb/Access_Colours_DONT.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"144.66666666666669%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAAACXBIWXMAAAsSAAALEgHS3X78AAAFKElEQVRIx6WWa1CUVRiAv6lxusw40dSPmsmxUDPQFBPFC6aAZto0zZSpjE3lJe8KEoK4aCqIrOzqZBp3FgS8sAupCIiTAi6QiaDipRQSL6WCsK0oAnt7Ovt967COOP3wm3nmfc85e54957x7dldCPA6Hg2d9Hjkkh11JzC3tpEfq0UXlk7m2B12UQe5Pj9DLuftYpiqflLB9NF9vlR124ZLsdrvcuNXYTOiYGJaP/IHF70ezZFg0i4aqWDl6I6snbSEySM1y3w1iTCWPOeMK0V7ms57GuuuK0GZ3CpUV3m5qIcJfQ9jIBEJ81ISOUBMyPJ7VY7exbvIuNkxNJNxPK/c5x0KHqwkfpSVstJqr9Td6ETaYCJ+1iujouURHLRDMl1GtmUfU6rmCb+X8Uf/aaMGmuYTMXMrVun96hM7DdCC23QVF9Rq2nPZBe3oCmtPjFWoVtLVKW3tqPHEXx3N4ux/nZg+moEaFrVMui1wYSTlMq/wOlTfTiCkbiaYykK3Gib2SUDGRuFOTyNs5gePzh3K0YaurIDZXlYXV7lAa5U1JxFYIYVUACZVC0BtVE+Wx+JoA1tX4UtygVoTCIa/QXVhxLblH6JzYG7L0Q7SVAWwu96XkyrMKXThfE1vxv8JUYipGo6meLFYRKCYGoq2aJCb3oHWxrTqQuBOjOPLoDB8XKkU50bRDbGOg2I6vYATxxg/YaPRjk3GMC5FXOBlHzAl/VMeHcehyXG9C5bZU3qpBXZfIjvoMNGcz2H0xmd8vqKg8t4aqc5FU1a+jumG9YAW/Na7CeHkRDXf2uu6yvUdotSufo/WXbEh6C30PdiMZHHxtbIZjwdgKpsGBqVAyD64vgGuvQ9O7cFXE1kiU6TZ3oXJboi52IGXcwCP7GlLev8wuuywkn9KUPIX2/f50F87AfnUmHef7ctvoRfell3C0hOB4mjCi/iFS6k1ezryBlGtmxq9X4PA0bqdNoCXNn66Cz3E0fMHDMy9iqn6brrN94M7yXoTyd5mDrU0WPMoeMLDyAa+Ud7H8/C2oW0TniWAsxllYT4aAaRW0DRGME9v1xnE/9kmhw6YUpS21nga/XP4K0tMYkMffQfu5F5SBOTAdc0CaQORTdIIkzB+lYPbfSYe2QimKza0oDosi7Fh5DHMfDe3e6dwfJib2T6atfyomr0xMQ7IweYs4WIfJJ5dWj5+5I23k3pxiRWh1Fyplpj2inGbPFNpmHqR1uoHWoH2Yputp9c3i7qAU7r6Xxt0Bydz1SpPbt6VYzAuP9L5C5zl0h5bxUNpM5/PbRUwQaF3E0yH6O6Q4N7YINtI1p0g5Q/cV2l1neOnwBfK+28uBkHwOhRRwaGUBB1eKPFTkYb88RuH3B8hfkseZfbXKCu0O9yorwvA/a3nuaA6vlemRSnYjHckW0UWxW+6kNAepMJ259dXyXJvDXej6oYqoPYmkS6fvnlykzGSkrESkHBFzU0QUZAmyFZ7XiX7dLuZVlbuE9ieFS2susNj4GYZGbz7eXUr2/iYmxaRT0U+L54+p4jqm80JmKl8Ga4n8ZDveyxL4ptb4dOGiU2cIKPmK6NoAvHQFhOXU4BmfhHqshr4/idXuSRJXMxG/hRpmBGvwCFcTfEpZobU34bY/6nnVkE+/A8W8c3g/bxXuwbNEz5tl+QwqNuBVqGdwkQHPUgMDSvN5o2gfqrM1T57ho78SFpuNbptFRAvdVhsWQbfVisVipUvETpsSu0Xb2S/nNhvujseEz/q/xhn/A6upGnKHKfSSAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"DONT\",\n    \"title\": \"DONT\",\n    \"src\": \"/static/3c2a584c9ddfe9c5142c7b803824ffc1/d10fb/Access_Colours_DONT.png\",\n    \"srcSet\": [\"/static/3c2a584c9ddfe9c5142c7b803824ffc1/5a46d/Access_Colours_DONT.png 300w\", \"/static/3c2a584c9ddfe9c5142c7b803824ffc1/d10fb/Access_Colours_DONT.png 420w\"],\n    \"sizes\": \"(max-width: 420px) 100vw, 420px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(UsageBlock, {\n    usageType: \"Don't\",\n    mdxType: \"UsageBlock\"\n  })), mdx(\"hr\", null), mdx(\"h2\", null, \"Font Sizing\"), mdx(\"p\", null, \"There\\u2019s no official minimum size font for website use. However, it\\u2019s usually recommended that you use at least 16px font for the body text. While that\\u2019s a good start for the body portion, the headers should feature larger text and some text can be smaller (between 10px and 14px).\"), mdx(\"h5\", null, \"There are two main concerns when working with font sizes:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Ensuring that default font sizes are not too small.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Ensuring that text can be expanded to 200% on websites.\")), mdx(\"h4\", null, \"Best Practice\"), mdx(\"p\", null, \"The best practice is to set the font-size on the html to 100%, and then set all the other elements to either em or rem which will be relative to the body size.\\nLet\\u2019s say someone has an impaired vision and sets their browser\\u2019s default font size to something larger. Setting the base font size in our CSS to pixels will overwrite their browser default font size setting. Instead of seeing most of the text at a larger font size, we now force them to read it at 16 pixels size. That\\u2019s because pixels are an absolute unit and not a relative one. \"), mdx(\"h3\", null, \"Text Style\"), mdx(\"p\", null, \"To improve accessibility and legibility and avoid confusion, websites should use as few fonts as possible.\"), mdx(\"p\", null, \"Avoid decorative or overly stylized fonts, which are often difficult to read even for users without visual impairments or reading disabilities.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"912px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d3f01110cb812137dac9d6445b9b7227/8b69f/Access_gbu.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"6.666666666666667%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAAAsSAAALEgHS3X78AAAAM0lEQVQI12NgYGCwAGItIDYEYiMg1mGAAGYgVgNiFSAWAWJRIJYAYmGoPCdUHiYnBcSyAGDeAiIpnEp6AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Text Style\",\n    \"title\": \"Text Style\",\n    \"src\": \"/static/d3f01110cb812137dac9d6445b9b7227/8b69f/Access_gbu.png\",\n    \"srcSet\": [\"/static/d3f01110cb812137dac9d6445b9b7227/5a46d/Access_gbu.png 300w\", \"/static/d3f01110cb812137dac9d6445b9b7227/0a47e/Access_gbu.png 600w\", \"/static/d3f01110cb812137dac9d6445b9b7227/8b69f/Access_gbu.png 912w\"],\n    \"sizes\": \"(max-width: 912px) 100vw, 912px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h4\", null, \"Don't centre-align long paragraphs\"), mdx(\"p\", null, \"When we have lines of text that are of unequal length and they\\u2019re center-aligned it makes it extremely hard to find the beginning of the next line. Again, put impaired vision or reading disorders on top of that and it becomes nearly impossible to read. Don\\u2019t center-align paragraphs that are longer than 2 or 3 lines of text.\"), mdx(\"div\", {\n    className: \"accTst\"\n  }, mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Do\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, \"Left aligned text has a straight edge each line starting at the same place.\"), mdx(\"div\", {\n    className: \"exCnt\"\n  }, mdx(\"p\", null, \"There can be no thought of \\uFB01nishing for \\u2018aiming for the stars.\\u2019 Both \\uFB01guratively and literally, it is a task to occupy the generations.\"), mdx(\"p\", null, \"And no matter how much progress one makes, there is always the thrill of just beginning.\"), mdx(\"p\", null, \"As I stand out here in the wonders of the unknown at Hadley, I sort of realize there\\u2019s a fundamental truth to our nature, Man must explore...\"), mdx(\"p\", null, \"and this is exploration at its greatest.\"), mdx(\"p\", null, \"Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a\"), mdx(\"p\", null, \"globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center \\u2014\"), mdx(\"p\", null, \"an equal earth which all men occupy as equals. The airman\\u2019s earth, if free men make it, will be truly round: a globe in practice, not in theory.\")))), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Don't\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, \"Centred text has a ragged left edge, each line starting at a different place making it difficult to track to the next sentence.\"), mdx(\"div\", {\n    className: \"exCnt\"\n  }, mdx(\"p\", null, \"There can be no thought of \\uFB01nishing for \\u2018aiming for the stars.\\u2019 Both \\uFB01guratively and literally, it is a task to occupy the generations.\"), mdx(\"p\", null, \"And no matter how much progress one makes, there is always the thrill of just beginning.\"), mdx(\"p\", null, \"As I stand out here in the wonders of the unknown at Hadley, I sort of realize there\\u2019s a fundamental truth to our nature, Man must explore...\"), mdx(\"p\", null, \"and this is exploration at its greatest.\"), mdx(\"p\", null, \"Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a\"), mdx(\"p\", null, \"globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center \\u2014\"), mdx(\"p\", null, \"an equal earth which all men occupy as equals. The airman\\u2019s earth, if free men make it, will be truly round: a globe in practice, not in theory.\"))))), mdx(\"h4\", null, \"Divide your content into easily-digestible paragraphs\"), mdx(\"p\", null, \"Long paragraphs are hard to read for people with reading disorders. Try to divide your content into short paragraphs, avoid really long paragraphs or what\\u2019s even worse\\u2014long sentences in long paragraphs.\"), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Caution\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Long paragraphs can be hard to read\")), mdx(\"p\", null, \"There can be no thought of finishing for \\u2018aiming for the stars.\\u2019 Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning. As I stand out here in the wonders of the unknown at Hadley, I sort of realize there\\u2019s a fundamental truth to our nature, Man must explore... and this is exploration at its greatest.\"))), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Do\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Divide your content into short paragraphs\")), mdx(\"p\", null, \"There can be no thought of finishing for 'aiming for the stars.'' Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.\"), mdx(\"p\", null, \"As I stand out here in the wonders of the unknown at Hadley, I sort of realize there\\u2019s a fundamental truth to our nature, Man must explore... and this is exploration at its greatest.\"))), mdx(\"hr\", null), mdx(\"h2\", null, \"Touch Target\"), mdx(\"p\", null, \"Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, an icon may appear to be 24 x 24 dp, but the padding surrounding it comprises the full 44 x 44 dp touch target.\"), mdx(\"p\", null, \"For most platforms, consider making touch targets at least 44 x 44 dp. A touch target of this size results in a physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen elements is 7-10mm. It may be appropriate to use larger touch targets to accommodate a larger spectrum of users.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"772px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/4d9838b85e4c0cf731ddcefabb3a4085/940c5/Access_TouchTarget.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"31.666666666666664%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABIklEQVQY01WQy07DMBBF8/X8AQu+gCUSQkiw4APYtTuktqFJyMvPGSd90NaXSdKHsHRla+b62HcS7wneM4gIxCJiDLXrzozuEND9BoQ9jzv3PPYvnotIOMnUkIJluDLA2f8w2xAWry1W7wrph8byTaH+spPHyT2a/IN3UDLSDaNJDVbzHKagyTgAA0NlHp93BWb3FeYPNb5fCPWMYFovvgkyQI22MMoJUC67OiCdF3h6fIZee5jKj6+GIDG7gH7fodueo9qA4y6CVA/nPKx20D/ibzr0didAukVTKzG0E8waj2zZIBdliwZF2qLKtfzEwZaEk0BdIY/UGxw2J1xWchuuQGq6DnuYZZkplOuz5KxbB+Yg0Sy8pDpuI+IhjqAY46g/8HPE0CZVW8sAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Touch Target\",\n    \"title\": \"Touch Target\",\n    \"src\": \"/static/4d9838b85e4c0cf731ddcefabb3a4085/940c5/Access_TouchTarget.png\",\n    \"srcSet\": [\"/static/4d9838b85e4c0cf731ddcefabb3a4085/5a46d/Access_TouchTarget.png 300w\", \"/static/4d9838b85e4c0cf731ddcefabb3a4085/0a47e/Access_TouchTarget.png 600w\", \"/static/4d9838b85e4c0cf731ddcefabb3a4085/940c5/Access_TouchTarget.png 772w\"],\n    \"sizes\": \"(max-width: 772px) 100vw, 772px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(InsightBlock, {\n    insighttype: \"UX Law\",\n    sourcename: \"Fitts' Law\",\n    sourcedate: \"1956\",\n    sourcetitle: \"UX Laws\",\n    sourceurl: \"https://lawsofux.com/fittss-law.html\",\n    mdxType: \"InsightBlock\"\n  }, \"Fast movements and small targets result in greater error rates, due to the speed-accuracy trade-off.\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Interaction Feedback\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Visual Cues\")), mdx(\"p\", null, \"Because colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), multiple visual cues help communicate important states. Elements such as strokes, indicators, patterns, texture, or text can describe actions and content. \"), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Do\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, \"Provide a redundant visual cue for users who may not be able to discern a difference in colors.\"), mdx(\"p\", null, \"Because colorblindness takes different forms (including red-green, blue-yellow, and monochromatic), multiple visual cues help communicate important states.\"))), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Don't\",\n    mdxType: \"UsageBlock\"\n  }, mdx(\"p\", null, \"Rely solely on visual characteristics such as shape, size, visual location, or orientation to convey meaning.\"))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Focus States\")), mdx(\"p\", null, \"Some people use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states let users know which element they\\u2019re currently on and is ready to be interacted with.\\t\"), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"420px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/bda726e94808b8c3d82dfb8aa15cce0f/d10fb/Access_Focus_DO.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"144.66666666666669%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAAACXBIWXMAAAsSAAALEgHS3X78AAAB+UlEQVRIx9VW2W7bMBD0/39aHwoELRoEaBIfslProk7e5JSkLUeyJMtp+tDKGCy9kkazuyPaK/zlY/V/EFprA7r1pwj7BH3SPqZycwKCwqagoDX/sMKpawMhazgEk5ekkhqSKxhjYLQJNyqhLmsf/bmh8omSu6MtKX5+3eDpywu2jwdsfxyw/h5h/S3Cq8PLwxacivmSu6RX4ZX6iz28ch99TnLp2sLAWxEiazm00rge6oDQKyviCuRXiTKtUWUNkl0GciwRbzLkb0XIpXuC7EBAKzYmXLJLmZyIPWmn6NZgVlPJa2vMnZuy0UBh1zc/xWlyu2ifd0JjQUsOWrhmC2cPV52R9i5cSG2P0GgXnbCatGEovm9LJXpoMXxrBgqNspDMWYfKEK17yBICIU7qBoQ+0RAaPGfNSbFWZhHWDPt4IeRa4Tk9IqpyHBoyRtuLZ+zd9+cihjZ6XHItGIhowVOG8s2Ze1eARAWauIGsxewGsS4SMMHHhExJvLqnRUWKLUmwyWJs8ySsdy4XVdkkHpMIUqkhYdfUY5wjOsQgtEEpaIi3kLc12p660ZQ1M648CdVqGLeGb80CrMBF0NDY+mSbMquR7HMUSXUe/u2PlmbGh51J/VPPuOct8fe8l3y1OYSk6cHeh0kffubXbnpzsPaPMVD4z/9z+A2tYu8FgK84vgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Focus States\",\n    \"title\": \"Focus States\",\n    \"src\": \"/static/bda726e94808b8c3d82dfb8aa15cce0f/d10fb/Access_Focus_DO.png\",\n    \"srcSet\": [\"/static/bda726e94808b8c3d82dfb8aa15cce0f/5a46d/Access_Focus_DO.png 300w\", \"/static/bda726e94808b8c3d82dfb8aa15cce0f/d10fb/Access_Focus_DO.png 420w\"],\n    \"sizes\": \"(max-width: 420px) 100vw, 420px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(UsageBlock, {\n    usageType: \"Do\",\n    mdxType: \"UsageBlock\"\n  })), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"420px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/bf383869f963d580c3eb1f872d4f070e/d10fb/Access_Focus_DONT.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"144.66666666666669%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAAACXBIWXMAAAsSAAALEgHS3X78AAABwklEQVRIx+VW23KCMBDl/z+uT51pZ2qn2iqKCnINuW+zoUKAgNj2pVOcM7loTs6ezQYD+OUn+BuEWmuLa/9HhC6BS7oEPgFWYbJPgVbsboW+31pCwQVo1e1alxTKSwWFAclrizIlUJm2yoidV0rB0K5RyNcnj0t4fwph9bCBcBXB7iWy4/D1COvHLXw87ydVBq4ndUEbJUYFWoBK64oCJU0fFWKLCoukBMHEiDRwzSVFbRdhuNjiwkuUQXYuIA5TyA1JmVaQHnMbBav5mPBWInAhAkmWJMZLODwavvkO/cR0IZsso3cYLva/KCbJp1T2CFkpgBMBimtQQjftDUjuHHA9IJRcQXJIId5dbBaXVI1kbtUMCc2XgikQVJm+WqaQueXqEOLJx2wKLj0mwWw9uz72PTT+CSpM6NIobYB9JYxaqf0QHg/txwzQw9M2sTi8nSBan+3FgbU85ScStkqHHqIi3FWbur+2dmOlpxXKmSxjiRXGR6W6uRYL78W+QiLNBcGAZLQ5j0LPA7NMlS/LTXiiluYyyOG4iW3FtCqn1KmZY2N94o0PzRi6iplROMrysBbb3eF7r4Lg3hfTzaT8v38OnxBU9oNeRXClAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Focus States\",\n    \"title\": \"Focus States\",\n    \"src\": \"/static/bf383869f963d580c3eb1f872d4f070e/d10fb/Access_Focus_DONT.png\",\n    \"srcSet\": [\"/static/bf383869f963d580c3eb1f872d4f070e/5a46d/Access_Focus_DONT.png 300w\", \"/static/bf383869f963d580c3eb1f872d4f070e/d10fb/Access_Focus_DONT.png 420w\"],\n    \"sizes\": \"(max-width: 420px) 100vw, 420px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(UsageBlock, {\n    usageType: \"Don't\",\n    mdxType: \"UsageBlock\"\n  })), mdx(\"h2\", null, \"Alt Tags\"), mdx(\"p\", null, \"ALT text refers to invisible description of images which are read aloud to blind users on a screen reader. Adding ALT text allows authors to include images, but still provide the content in an alternative text based format. Using alt text on your images can make for a better user experience, but it will also help earn you SEO benefits.\"), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Do\",\n    mdxType: \"UsageBlock\"\n  }, \"Be redundant or provide the same information as text within the context of the image.\", mdx(\"p\", null, \"Use the phrases \\\"image of\\u2026\\\" or \\\"graphic of\\u2026\\\".\"))), mdx(UsageImage, {\n    mdxType: \"UsageImage\"\n  }, mdx(UsageBlock, {\n    usageType: \"Don't\",\n    mdxType: \"UsageBlock\"\n  }, \"Give every <img> an alt= attribute Describe the information, not the picture\", mdx(\"p\", null, \"Decorative images still need an alt attribute, but it should be null (alt=\\\"\\\").\"), mdx(\"p\", null, \"Keep it (relatively) short. The most popular screen readers cut off alt text at around 125 characters, so it's advisable to keep it to that character count or less.\"))), mdx(\"h2\", null, \"ARIA Labels\"), mdx(\"p\", null, \"The Web Accessibility Initiative's Accessible Rich Internet Applications specification (WAI-ARIA, or just ARIA) is good for bridging areas with accessibility issues that can't be managed with native HTML. It works by allowing you to specify attributes that modify the way an element is translated into the accessibility tree.\"), mdx(\"p\", null, \"ARIA provides several mechanisms for adding labels and descriptions to elements. In fact, ARIA is the only way to add accessible help or description text. From the perspective of assistive technologies, ARIA gives authors the ability to dress up HTML and SVG elements with critical accessibility semantics that the assistive technologies would not otherwise be able to reliably derive.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Some of ARIA is like a cloak; it covers up, or overrides, the original semantics or content.\")), mdx(\"p\", null, \"<\", \"a role=\\\"menuitem\\\"\", \">\", \"Assistive tech users perceive this element as an item in a menu, not a link.\", \"<\", \"/a\", \">\"), mdx(\"p\", null, \"<\", \"a aria-label=\\\"Assistive tech users can only perceive the contents of this aria-label, not the link text\\\"\", \">\", \"Link TextG\", \"<\", \"/a\", \">\"), mdx(\"h3\", null, \"Stying States with ARIA\"), mdx(\"p\", null, \"When you build components, it's common practice to reflect their state, and thus their appearance, using CSS classes controlled with JavaScript.\"), mdx(\"p\", null, \"For example, consider a toggle button that goes into a \\\"pressed\\\" visual state when clicked and retains that state until it is clicked again. To style the state, your JavaScript might add a pressed class to the button. And, because you want good semantics on all your controls, you would also set the aria-pressed state for the button to true.\"), mdx(\"p\", null, \"A useful technique to employ here is to remove the class altogether, and just use the ARIA attributes to style the element. Now you can update the CSS selector for the pressed state of the button from this\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"toggle.pressed { ... }\")), mdx(\"p\", null, \"to this.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".toggle\", \"[aria-pressed=\\\"true\\\"]\", \" { ... }\")), mdx(\"p\", null, \"This creates both a logical and a semantic relationship between the ARIA state and the element's appearance, and cuts down on extra code as well.\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Video\"), mdx(\"p\", null, \"Web accessibility standards such as the Web Content Accessibility Guidelines (WCAG) require websites to have closed captions and transcripts for all prerecorded audio and video content. Higher levels of WCAG compliance also require captions for live audio and video content, and even sign language interpretation for prerecorded content.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Accessibility"}}},"pageContext":{"id":"6801bc60-327b-56f7-8ff2-bcfce0a4168e"}}}