{"id":19698,"date":"2022-12-14T15:45:08","date_gmt":"2022-12-14T21:45:08","guid":{"rendered":"https:\/\/theadminbar.com\/?p=19698"},"modified":"2022-12-14T16:10:34","modified_gmt":"2022-12-14T22:10:34","slug":"is-your-website-accessible-to-people-with-dyslexia","status":"publish","type":"post","link":"https:\/\/theadminbar.com\/is-your-website-accessible-to-people-with-dyslexia\/","title":{"rendered":"Is your website accessible to people with dyslexia?"},"content":{"rendered":"\n<p>Between 9% and 12% of all people worldwide have dyslexia. Let that sink in. That\u2019s 720 million people. With so many dyslexics around the world, it&#8217;s incredibly important to take their needs into account for the accessibility of your website. In the US particularly, <a rel=\"noreferrer noopener\" href=\"https:\/\/www.cnbc.com\/2019\/10\/07\/dominos-supreme-court.html\" target=\"_blank\">websites owners are being sued if they&#8217;re not accessible<\/a> to people with disabilities.<\/p>\n\n\n\n<p>Of course, you want your website to be accessible to everyone. If you don&#8217;t have dyslexia yourself, it&#8217;s quite a challenge to understand how it impacts online browsing. Fortunately, German web designer Maja Benke gave <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.tv\/2022\/07\/22\/maja-benke-accessibility-for-dyslexia\/\" target=\"_blank\">an interesting presentation at WordCamp Europe 2022<\/a>, which gave me the inspiration to write this blog and to get you started on the road to a dyslexia-friendly website.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-8c547f7c gb-headline-text\">Dyslexia: what exactly is it?<\/h2>\n\n\n\n<p>You might already have an idea of what dyslexia is, or at least what it involves: letters seem to dance, reading is difficult, and writing is exhausting. In short, people with dyslexia have difficulty converting spoken word to written word and vice versa.<\/p>\n\n\n\n<p>Dyslexia is actually a learning disability. And not just any learning disability; it is the most common learning disability in the world. As many as 80% of all people with learning disabilities have dyslexia. Of course, that doesn&#8217;t mean that all these people are the same.&nbsp;<\/p>\n\n\n\n<p>What these people do have in common is that the processing of text in the brain is different from people who do not have dyslexia. A few facts about dyslexia:&nbsp;<\/p>\n\n\n\n<ul>\n<li>Dyslexics have difficulty converting speech into writing<\/li>\n\n\n\n<li>Dyslexics have difficulty converting writing into speech<\/li>\n\n\n\n<li>The way the dyslexic brain works is different from other people<\/li>\n\n\n\n<li>Dyslexia is a spectrum<\/li>\n<\/ul>\n\n\n\n<p>People with dyslexia are not stupid or lazy, which is a common misconception.<\/p>\n\n\n\n<p>If you have dyslexia, you can read and write normally. Dyslexics have been proven to be no less intelligent than the rest of the population &#8211; at least not because of his or her dyslexia. Dyslexics are often very creative and they\u2019re good at thinking logically and conceptually.<\/p>\n\n\n\n<p>The extent to which someone suffers from his or her dyslexia varies from person to person. Reading is especially difficult when dyslexics are tired or stressed, cannot focus, or are in a distracting environment. <\/p>\n\n\n\n<p>When it comes down to it: it would be a shame if you alienated 12% of your website&#8217;s visitors by overlooking their basic needs.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-42ea4c83 gb-headline-text\">How do dyslexics see your website&#8217;s text?<\/h2>\n\n\n\n<p>Writing and displaying text that is easy to read for dyslexics is a challenge. If you use the wrong fonts or line spacing, letters will start to dance. Double negatives in phrases can go unnoticed and dyslexics can skip over some words. That can become a big issue if those missed words are words like &#8216;not&#8217; and &#8216;none&#8217;.<\/p>\n\n\n\n<p>If you don&#8217;t have dyslexia yourself, I&#8217;d like to give you an idea of what its like to read a text when you are dyslexic, see the picture below:<\/p>\n\n\n\n<figure class=\"gb-block-image gb-block-image-dfb614db\"><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexia-example.webp 660w,https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexia-example-420x242.webp 420w\" sizes=\"(max-width: 660px) 100vw, 660px\" type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexia-example.jpg\" height=\"381\" width=\"660\" srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexia-example.jpg 660w, https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexia-example-420x242.jpg 420w\" sizes=\"(max-width: 660px) 100vw, 660px\" class=\"gb-image gb-image-dfb614db sp-no-webp\" alt=\"Example of what someone with dyslexia might see\" loading=\"lazy\" decoding=\"async\" title=\"dyslexia-example\"  > <\/picture><\/figure>\n\n\n\n<h2 class=\"gb-headline gb-headline-dbc8457f gb-headline-text\">Improving accessibility with physical and digital tools<\/h2>\n\n\n\n<p>Not everyone experiences dyslexia in the same way, but there are a few different solutions to help. You may remember seeing them in primary and secondary school: colored paper for reduced contrast, a ruler for following the rule, or a handy reading strip.<\/p>\n\n\n\n<figure class=\"gb-block-image gb-block-image-c77fe577\"><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexie-leesstok.webp 657w,https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexie-leesstok-420x207.webp 420w\" sizes=\"(max-width: 657px) 100vw, 657px\" type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexie-leesstok.jpg\" height=\"324\" width=\"657\" srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexie-leesstok.jpg 657w, https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyslexie-leesstok-420x207.jpg 420w\" sizes=\"(max-width: 657px) 100vw, 657px\" class=\"gb-image gb-image-c77fe577 sp-no-webp\" alt=\"Reading stick for Dyslexia\" loading=\"lazy\" decoding=\"async\" title=\"dyslexie-leesstok\"  > <\/picture><\/figure>\n\n\n\n<p>Now there are also digital tools to help, and its important to check whether these digital tools work well on your website. For example, make sure that you do not process text in images, but keep it eligible for the computer.&nbsp;<\/p>\n\n\n\n<p>Examples of commonly used digital &#8216;reading tools&#8217; for dyslexics are:<\/p>\n\n\n\n<ul>\n<li>Software that converts text to speech<\/li>\n\n\n\n<li>The Firefox Reader Mode, which strips everything out, but leaves the text<\/li>\n\n\n\n<li>Browser extensions that adjust fonts, sizes, widths and colors<\/li>\n<\/ul>\n\n\n\n<p>But the best thing is (of course) when your site already works well without these tools. Here&#8217;s how to do it.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-c9c10c4e gb-headline-text\">Choose a dyslexia-friendly font<\/h3>\n\n\n\n<p>An infinite amount of research has been done into what is or is not pleasant reading for dyslexics. There are even special fonts just for dyslexics! Just search for <a rel=\"noreferrer noopener\" href=\"https:\/\/opendyslexic.org\/\" target=\"_blank\">Open Dyslexic<\/a> and <a rel=\"noreferrer noopener\" href=\"https:\/\/brailleinstitute.org\/freefont\" target=\"_blank\">Atkinson Hyperlegible<\/a>. Pretty nice, but I can imagine that you&#8217;d prefer to stay closer to your own brand identity.<\/p>\n\n\n\n<p>In any case, make sure that your font and text style meet the following requirements:<\/p>\n\n\n\n<ul>\n<li>A font size of at least 16px<\/li>\n\n\n\n<li>A line height of at least 1.5m<\/li>\n\n\n\n<li>Make characters look distinctly different. Think of the capital letter i (\u2018I\u2019), the letter l, and the number 1<\/li>\n\n\n\n<li>The same goes for the number zero (&#8216;0&#8217;) and the letter &#8216;O&#8217; and for the letters &#8216;q&#8217; and the &#8216;g&#8217;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"gb-headline gb-headline-fc4a507c gb-headline-text\">Avoid bold and italic text, or all capital letters<\/h3>\n\n\n\n<p>Dyslexics often learn the &#8216;form&#8217; of common words by heart, that way they don&#8217;t have to read these words letter by letter. When you change the appearance of a word, for example by displaying it in bold or italics, the shape of the word changes. A dyslexic does not recognize the form and has to read the word after all.<\/p>\n\n\n\n<p>A site like Wikipedia makes extensive use of bold and italicized text, and is therefore an excellent example of a website that is not pleasant or easy for people with dyslexia to use.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-e2b9dc3f gb-headline-text\">Accessible layout for dyslexia<\/h3>\n\n\n\n<p>Your site&#8217;s page layouts are also of great importance for the readability of your website. This also applies to visitors without dyslexia: an accessible layout is a plus for everyone!<\/p>\n\n\n\n<p>First of all, don&#8217;t make the text area too wide. Between 400px and 700px is optimal. Also make sure you have plenty of white space. It&#8217;s best to write in smaller paragraphs instead of large blocks of text. Preferably do this in a clear and logical layout. For example, provide clear headers, use bullet points and center texts as little as possible.<\/p>\n\n\n\n<p>In the example below, the left-hand website is difficult to read. In contrast to the website on the right, with a lot of white space and a pleasant layout.<\/p>\n\n\n\n<figure class=\"gb-block-image gb-block-image-f9e16b4d\"><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyxlexie-layout.webp 658w,https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyxlexie-layout-420x204.webp 420w\" sizes=\"(max-width: 658px) 100vw, 658px\" type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyxlexie-layout.jpg\" height=\"319\" width=\"658\" srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyxlexie-layout.jpg 658w, https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/12\/dyxlexie-layout-420x204.jpg 420w\" sizes=\"(max-width: 658px) 100vw, 658px\" class=\"gb-image gb-image-f9e16b4d sp-no-webp\" alt=\"A comparison of two different layouts showing how much easier one is to read based on the layout and white space\" loading=\"lazy\" decoding=\"async\" title=\"dyxlexie-layout\"  > <\/picture><\/figure>\n\n\n\n<h3 class=\"gb-headline gb-headline-3c24e89c gb-headline-text\">Choose the right colors for accessibility<\/h3>\n\n\n\n<p>Many dyslexics have difficulty with high-contrast texts. It is therefore better not to opt for black on white, but instead, for example, for dark gray or dark blue on off-white.<\/p>\n\n\n\n<p>But of course you can achieve even more with colors.<\/p>\n\n\n\n<p>Sharp contrasts or &#8216;pure&#8217; colors do not promote easy reading, especially for dyslexics. For example, do not place red on green. Making a Dark Mode available is a great option.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-43f40f35 gb-headline-text\">Write dyslexia-friendly text<\/h3>\n\n\n\n<p>A good layout, pleasant font and fine colors will go a long way. But do you really want to make your website easily accessible for dyslexics? Then immerse yourself in writing good text.<\/p>\n\n\n\n<p><strong>Dyslexia-friendly text has:<\/strong><\/p>\n\n\n\n<ul>\n<li>The most important information at the beginning of the text<\/li>\n\n\n\n<li>A clear summary as a conclusion<\/li>\n\n\n\n<li>Clear headers, bullets, and quotes for variety<\/li>\n\n\n\n<li>Short paragraphs<\/li>\n\n\n\n<li>One piece of information per sentence<\/li>\n\n\n\n<li>Active language use (i.e. \u201cI was\u201d instead of \u201cI have been\u201d)<\/li>\n\n\n\n<li>Explanatory images, tables, or graphs<\/li>\n<\/ul>\n\n\n\n<p><strong>You won&#8217;t find this in a dyslexia-friendly text:<\/strong><\/p>\n\n\n\n<ul>\n<li>Sarcasm (unless clarified with emojis, for example)<\/li>\n\n\n\n<li>Animated GIFs, flashing elements, and popups<\/li>\n\n\n\n<li>Abbreviations not written out (unless the abbreviation is commonly used, like VAT)<\/li>\n\n\n\n<li>Foreign words and filler words<\/li>\n\n\n\n<li>Links and buttons with generic text like &#8216;click here&#8217; (instead, describe exactly what happens when someone clicks on that button or link)<\/li>\n\n\n\n<li>Incomplete information because you think the reader already has certain knowledge<\/li>\n<\/ul>\n\n\n\n<p>Need an extra pair of eyes to make your site dyslexia-friendly? Sometimes it takes some puzzling before you realize what works well for your site. Feel free to contact me. If possible, I\u2019ll gladly take a moment to help you out.<\/p>\n\n\n\n<p>\u2014<\/p>\n\n\n\n<p>Translated from Dutch by <a href=\"https:\/\/talentandskills-sg.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Anita Van Den Bos<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A practical approach to making websites more accessible for people with cognitive impairments. <\/p>\n","protected":false},"author":23,"featured_media":19726,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_piecal_is_recurring":false,"_piecal_recurring_interval":1,"_piecal_recurring_frequency":"","_piecal_recurring_exact_position":false,"_piecal_recurring_end":"","_piecal_color":"","_piecal_text_color":"","_piecal_global_color_master":false,"_piecal_is_event":false,"_piecal_start_date":"","_piecal_end_date":"","_piecal_is_allday":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","footnotes":""},"categories":[1],"tags":[],"banner":[],"acf":[],"_links":{"self":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/posts\/19698"}],"collection":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/comments?post=19698"}],"version-history":[{"count":0,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/posts\/19698\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/media\/19726"}],"wp:attachment":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/media?parent=19698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/categories?post=19698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/tags?post=19698"},{"taxonomy":"banner","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/banner?post=19698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}