{"id":9812,"date":"2022-11-18T09:58:26","date_gmt":"2022-11-18T09:58:26","guid":{"rendered":"https:\/\/www.20i.com\/blog\/?p=9812"},"modified":"2025-04-24T16:15:10","modified_gmt":"2025-04-24T15:15:10","slug":"8-accessibility-tips-design-websites-users-disabilities","status":"publish","type":"post","link":"https:\/\/www.20i.com\/blog\/8-accessibility-tips-design-websites-users-disabilities\/","title":{"rendered":"12 accessibility tips to design websites for users with disabilities"},"content":{"rendered":"\n<p>In our last article on <a href=\"https:\/\/www.20i.com\/blog\/website-accessibility-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\">website accessibility<\/a>, we shared what web accessibility is and why it\u2019s important. It included accessible website examples and how to make your website accessible using our <a href=\"https:\/\/www.20i.com\/blog\/website-accessibility-checklist\/#accessibilitychecklist\" target=\"_blank\" rel=\"noreferrer noopener\">checklist<\/a>.<\/p>\n\n\n\n<p>In this guide, we dive into web accessibility best practices and share practical accessibility tips to design websites for users with disabilities.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">TL;DR:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Accessibility issues you should consider include visual, auditory, neurological, and physical impairments&nbsp;<\/li>\n\n\n\n<li>Consider colour ratios and contrasts for users with visual impairments.&nbsp;<\/li>\n\n\n\n<li>Prioritise font size, style, and alignment for enhanced readability.&nbsp;<\/li>\n\n\n\n<li>Emphasise descriptive links and buttons for improved navigation.&nbsp;<\/li>\n\n\n\n<li>Ensure keyboard-accessible navigation for users with disabilities.&nbsp;<\/li>\n\n\n\n<li>Prioritise website adaptability for diverse devices and orientations.&nbsp;<\/li>\n\n\n\n<li>Organise content structure with headings for improved readability.&nbsp;<\/li>\n\n\n\n<li>Include text options like captions and transcripts for multimedia content.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Accessible design: what disabilities are covered?<\/h2>\n\n\n\n<p>People develop and experience varying degrees of disabilities. They have them for different reasons, ranging from birth, illness, accidents, or age. Some people have one disability, while others have multiple.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/www.w3.org\/WAI\/\" target=\"_blank\" rel=\"noreferrer noopener\">Web Accessibility Initiative<\/a> (WAI) from the World Wide Web Consortium (W3C) groups most disabilities into five categories:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visual<\/li>\n\n\n\n<li>Auditory<\/li>\n\n\n\n<li>Neurological<\/li>\n\n\n\n<li>Physical<\/li>\n\n\n\n<li>Speech<\/li>\n<\/ul>\n\n\n\n<p>Keep reading to find eight actionable tips to improve usability based on the Web Content Accessibility Guidelines (<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"noreferrer noopener\">WCAG<\/a>) and Americans with Disabilities Act (<a href=\"https:\/\/www.ada.gov\/resources\/web-guidance\/\" target=\"_blank\" rel=\"noreferrer noopener\">ADA<\/a>) guidelines.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bestpractices\">Accessibility best practices<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"#contrast\">Provide enough colour contrast<\/a><\/li>\n\n\n\n<li><a href=\"#fonts\">Use larger text and simpler fonts<\/a><\/li>\n\n\n\n<li><a href=\"#linksbuttons\">Differentiate links and buttons explicitly<\/a><\/li>\n\n\n\n<li><a href=\"#keyboard\">Create keyboard-accessible navigation<\/a><\/li>\n\n\n\n<li><a href=\"#responsive\">Adaptation and responsiveness<\/a><\/li>\n\n\n\n<li><a href=\"#alt\">Use image alt text<\/a><\/li>\n\n\n\n<li><a href=\"#headings\">Organise content structure with headings<\/a><\/li>\n\n\n\n<li><a href=\"#dynamic\">Make dynamic content accessible<\/a><\/li>\n\n\n\n<li><a href=\"#ARIA\">ARIA attributes<\/a><\/li>\n\n\n\n<li><a href=\"#reCAPTCHA\">reCAPTCHA<\/a><\/li>\n\n\n\n<li><a href=\"#Animations\">Animations<\/a><\/li>\n\n\n\n<li><a href=\"#Clarity\">Clear language<\/a><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"contrast\">1. Provide enough colour contrast<\/h3>\n\n\n\n<p><em>Addresses:<strong> <\/strong>users with cognitive and visual disabilities, especially those with colour vision deficiency (CVD or \u2018colour blindness\u2019) and low vision.<\/em><\/p>\n\n\n\n<p>An accessibility tip for designing websites for users with<strong> visual impairments<\/strong> is to consider designs that don\u2019t rely heavily on colour. Users with low vision may struggle to distinguish differences with similar colours, so be conscious of colour ratios and contrast.&nbsp;<\/p>\n\n\n\n<p>The WCAG 2.1 suggests a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.&nbsp;<\/p>\n\n\n\n<p>Black text on a white background has a high colour contrast of 21:1, but using pure black (#000000) against pure white (#FFFFFF) isn&#8217;t recommended.<\/p>\n\n\n\n<p>That&#8217;s because extreme contrast at a single pixel distance increases eye strain for users, especially those with light sensitivity and cognitive disabilities like dyslexia.<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>Use colour contrast testing tools<\/strong> like the WebAIM <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noreferrer noopener\">Contrast Checker<\/a> or <a href=\"https:\/\/www.getstark.co\/\" target=\"_blank\" rel=\"noreferrer noopener\">Stark plugin<\/a> to test text colour and background colour combinations while taking text size into account.<\/pre>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a0afd7dad1e6&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a0afd7dad1e6\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"365\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Contrast-checker-results.png\" alt=\"web contrast checker\" class=\"wp-image-9818\" style=\"border:2px solid #EBEBEB\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Contrast-checker-results.png 800w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Contrast-checker-results-300x137.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Contrast-checker-results-768x350.png.webp 768w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Contrast-checker-results-370x169.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Contrast-checker-results-270x123.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Contrast-checker-results-570x260.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Contrast-checker-results-740x338.png.webp 740w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Contrast-checker-results-150x68.png.webp 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>If you use Google Chrome, you can also use the <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome DevTools<\/a> accessibility checker to test contrast anywhere online.<\/p>\n\n\n\n<p>To do so, open DevTools and use the &#8216;Select an Element&#8217; tool to click on the element you&#8217;d like to check. <\/p>\n\n\n\n<p>In the example below, we used the Twitter Analytics page, where positive results are shown in green on white. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"554\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Twitter-analytics.png\" alt=\"A low contrast statistic in Twitter analytics.\" class=\"wp-image-9944\" style=\"border:2px solid #EBEBEB\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Twitter-analytics.png 805w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-300x206.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-768x529.png.webp 768w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-370x255.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-270x186.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-435x300.png.webp 435w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-570x392.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-740x509.png.webp 740w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-150x103.png.webp 150w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><\/figure>\n\n\n\n<p>Here we&#8217;ve highlighted the tool you need in the top left:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"709\" height=\"553\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Twitter-analytics-contrast-checker.png\" alt=\"Chrome Dev Tools' contrast checker showing problems with Twitter Analytics.\" class=\"wp-image-9819\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Twitter-analytics-contrast-checker.png 709w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-contrast-checker-300x234.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-contrast-checker-370x289.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-contrast-checker-270x211.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-contrast-checker-385x300.png.webp 385w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-contrast-checker-570x445.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Twitter-analytics-contrast-checker-150x117.png.webp 150w\" sizes=\"auto, (max-width: 709px) 100vw, 709px\" \/><\/figure>\n\n\n\n<p>Then, go to <strong>Styles <\/strong>and click on the colour box. If there isn&#8217;t enough contrast, it will have a red notification next to it.<\/p>\n\n\n\n<p>Clicking on this notification will show you a useful colour chart, which shows the good contrast (AA) and the best contrast (AAA), represented by two lines. You can see this above.<\/p>\n\n\n\n<p>In the example, we could move the white circle down &#8211; making it darker &#8211; to get to the colour it needs to be for best contrast. You can then make changes in your code.<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>Avoid using red and green<\/strong>. CVD affects approximately <a href=\"https:\/\/www.colourblindawareness.org\/colour-blindness\/\" target=\"_blank\" rel=\"noreferrer noopener\">300 million people<\/a> worldwide, and red-green colour blindness is the <a href=\"https:\/\/www.nei.nih.gov\/learn-about-eye-health\/eye-conditions-and-diseases\/color-blindness\/types-color-blindness\" target=\"_blank\" rel=\"noreferrer noopener\">most common type<\/a>.<br><br><strong>Colour alone shouldn't be used to convey important information<\/strong> (e.g., \u2018click the blue button\u2019). Secondary indicators such as icons, underlined words, or contrast changes help differentiate elements.<br><br><strong>Add texture or patterns<\/strong> when using graphs and charts to differentiate various data points.<\/pre>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1140\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2021\/10\/hours-worked-weekly.png\" alt=\"Web Designer Survey result showing the use of patterning to differentiate results.\" class=\"wp-image-7063\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2021\/10\/hours-worked-weekly.png 1200w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2021\/10\/hours-worked-weekly-300x285.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2021\/10\/hours-worked-weekly-768x730.png.webp 768w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2021\/10\/hours-worked-weekly-370x352.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2021\/10\/hours-worked-weekly-270x257.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2021\/10\/hours-worked-weekly-740x703.png.webp 740w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">20i&#8217;s Web Designer Survey results<\/figcaption><\/figure>\n\n\n\n<p>For example, use a line graph or pie chart that shows different patterns so users can distinguish between them easily, like we did for the <a href=\"https:\/\/www.20i.com\/blog\/web-designer-survey\/\" target=\"_blank\" rel=\"noreferrer noopener\">Web Designer Survey results<\/a> above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fonts\">2. Use larger text and simpler fonts<\/h3>\n\n\n\n<p><em>Addresses: Users with visual and cognitive disabilities.<\/em><\/p>\n\n\n\n<p>Most online interactions are text-based, so website accessibility tip number two is to optimise text for different readers.<\/p>\n\n\n\n<p>People with <strong>visual and cognitive disabilities<\/strong> might find it difficult to read small text and non-standard fonts, so make your website accessible by considering font size and style.<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>Use sans-serif fonts<\/strong>. These fonts are easy to read in both small and large font sizes. Examples include Tahoma, Calibri, Helvetica, Arial, and Verdana.<br><br><strong>Keep default font sizes at least 9pt (or 12px)<\/strong>. WCAG Guidelines say that users should be able to read the text even when zoomed to 200%<br><br><strong>Enable users to manually select font sizes<\/strong>, like the Wall Street Journal below.<\/pre>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"329\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Wall-Street-Journal-text-size-selection.png\" alt=\"The Wall Street Journal follows web accessibility best practices by giving readers options to change the font size with the click of a button.\n\" class=\"wp-image-9834\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Wall-Street-Journal-text-size-selection.png 761w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Wall-Street-Journal-text-size-selection-300x130.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Wall-Street-Journal-text-size-selection-370x160.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Wall-Street-Journal-text-size-selection-270x117.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Wall-Street-Journal-text-size-selection-570x246.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Wall-Street-Journal-text-size-selection-740x320.png.webp 740w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Wall-Street-Journal-text-size-selection-150x65.png.webp 150w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/figure>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-verse\"><strong>Make sure text is left-aligned and each line doesn\u2019t exceed 70\u201380 characters<\/strong>. <br><br>Left-aligned text maintains consistent character and word spacing, <a href=\"https:\/\/www.w3.org\/TR\/2012\/NOTE-WCAG20-TECHS-20120103\/G169\" target=\"_blank\" rel=\"noreferrer noopener\">unlike justified blocks of text<\/a>, which people with cognitive disabilities can find hard to read.<\/pre>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"linksbuttons\">3. Differentiate links and buttons explicitly<\/h3>\n\n\n\n<p><em>Addresses: users with visual disabilities.<\/em><\/p>\n\n\n\n<p>Users have established expectations about digital elements, and<strong> links<\/strong> are one of the things that have worked the same way for years. For example, linked text is often underlined and a different colour from the rest of the body text.<\/p>\n\n\n\n<p>Users with visual impairments often use assistive technology (AT) like screen readers, which provide a separate list of links to make page navigation more accessible. So using vague labels for anchor text like \u2018click here\u2019 doesn\u2019t give users context.<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>Make links and buttons descriptive<\/strong>. Screen readers provide a separate list of links to make page navigation easier, so vague labels for anchor text like \u2018click here\u2019 don\u2019t give users context. Descriptive links and buttons also have a SEO advantage.<br><br><strong>Incorporate other elements to convey gravity.<\/strong> For example, the caution (\u26a0\ufe0f) icon indicates warning or danger, while a checkmark (\u2714\ufe0f) icon means success, and a cross (\u274c) can indicate failure.<\/pre>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"230\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/symbols.png\" alt=\"Accessibility tip:  use visual cues to convey information to users\" class=\"wp-image-9870\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/symbols.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/symbols-300x115.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/symbols-370x142.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/symbols-270x104.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/symbols-570x219.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/symbols-150x58.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Button states<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"100\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/buttons.png\" alt=\"Accessibility tip: Ensure button appearances change for every action.\" class=\"wp-image-9876\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/buttons.png 600w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/buttons-300x50.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/buttons-370x62.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/buttons-270x45.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/buttons-570x95.png.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/buttons-150x25.png.webp 150w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-verse\">For buttons and links, ensure their appearances change for every action. Distinguish between hover, focus, and click for buttons.<\/pre>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"keyboard\">4. Create keyboard-accessible navigation<\/h3>\n\n\n\n<p><em>Addresses: users with physical and visual disabilities.<\/em><\/p>\n\n\n\n<p>Users with <strong>physical disabilities<\/strong> may need special equipment to access the internet, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ergonomic keyboards or mice<\/li>\n\n\n\n<li>Pointers and other tools to aid with typing<\/li>\n\n\n\n<li>Hands-free tools such as foot- or shoulder-operated switches<\/li>\n<\/ul>\n\n\n\n<p>They rely on keyboards primarily, using the Tab key to move forward and Shift+Tab to go back, for example.<\/p>\n\n\n\n<p>Keyboard-accessible navigation helps users with motor skill disabilities. They can use screen readers to access links, menus, and buttons using keyboard shortcuts.<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>Avoid using elements that break keyboard navigation<\/strong>, like dropdown menus. On dropdown menus, the top menu items are accessible, but the submenu items often aren\u2019t. Instead, assign shortcuts or access key capabilities. For example, pressing \u20181\u2019 will take you to the homepage, \u20182\u2019 to the About page, and so on.\u00a0<br><br><strong>Limit the number of links you include on a page<\/strong>. Links are a form of navigation. Users know they\u2019ll need to go to another page when they see them, so having too many of them will make navigation more difficult.<br><br><strong>Add a \u2018Skip Navigation\u2019 link<\/strong>. That\u2019s an anchored link on the page that lets users jump down the page to a specified location when they click enter with a keyboard.<\/pre>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>For example, pressing the tab key twice on the BBC website reveals a \u2018Skip to content\u2019 option so users can avoid navigation on the page header.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"490\" height=\"157\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/BBC-skip-to-content.png\" alt=\"BBC skip to content button\" class=\"wp-image-9846\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/BBC-skip-to-content.png 490w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/BBC-skip-to-content-300x96.png.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/BBC-skip-to-content-370x119.png.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/BBC-skip-to-content-270x87.png.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/BBC-skip-to-content-150x48.png.webp 150w\" sizes=\"auto, (max-width: 490px) 100vw, 490px\" \/><\/figure>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<pre class=\"wp-block-verse\"><strong><a href=\"https:\/\/www.20i.com\/blog\/quick-easy-wordpress-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Use a breadcrumb trail<\/a><\/strong>. Those help users visualise site architecture. It helps them identify the page\u2019s current location and navigate back to previous webpages.<\/pre>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Separate the items in the breadcrumb menu with a visible separator, like<strong> <\/strong>&#8216;<strong>&gt;<\/strong>&#8216; or &#8216;<strong>\/<\/strong>&#8216;.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"892\" height=\"645\" src=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Patagonia-breadcrumbs.jpg\" alt=\"Website accessibility tip: A breadcrumb trail helps users identify where they are and navigate to previous webpages. The Patagonia website uses a breadcrumb trail.\" class=\"wp-image-9883\" srcset=\"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/Patagonia-breadcrumbs.jpg 892w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Patagonia-breadcrumbs-300x217.jpg.webp 300w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Patagonia-breadcrumbs-768x555.jpg.webp 768w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Patagonia-breadcrumbs-370x268.jpg.webp 370w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Patagonia-breadcrumbs-270x195.jpg.webp 270w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Patagonia-breadcrumbs-570x412.jpg.webp 570w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Patagonia-breadcrumbs-740x535.jpg.webp 740w, https:\/\/www.20i.com\/blog\/wp-content\/smush-webp\/2022\/11\/Patagonia-breadcrumbs-150x108.jpg.webp 150w\" sizes=\"auto, (max-width: 892px) 100vw, 892px\" \/><figcaption class=\"wp-element-caption\">Patagonia&#8217;s breadcrumbs<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"responsive\">5. Adaptation and responsiveness<\/h3>\n\n\n\n<p>Related to navigation, you should always ensure that your website can be viewed on any device, by anyone.<\/p>\n\n\n\n<pre class=\"wp-block-verse\">The website should not require a particular orientation. You should be able to rotate the site to any orientation, and there shouldn\u2019t be horizontal scrolling.<br><br>It should also be adaptable for most screen sizes and pixel densities.<\/pre>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"alt\">6. Use image alt text<\/h3>\n\n\n\n<p><em>Addresses: users with visual disabilities.<\/em><\/p>\n\n\n\n<p>Screen readers can\u2019t process certain types of content, like <a href=\"https:\/\/www.20i.com\/blog\/image-optimisation-web-guide\/\">images<\/a>, tables, and graphics. Instead, they rely on <strong>alternative (or alt) text<\/strong>, which is a written description of an image\u2019s appearance and function.<\/p>\n\n\n\n<p>Screen readers will read the description aloud to the user. If the image doesn\u2019t have alt text, the screen reader skips it entirely.<\/p>\n\n\n\n<pre class=\"wp-block-verse\">All relevant images are accompanied by alt text.<\/pre>\n\n\n\n<p>Alternative text is only helpful for relevant images on the page. <\/p>\n\n\n\n<p>Decorative images or elements that don&#8217;t add value can have empty alt text. <\/p>\n\n\n\n<p>That\u2019s because screen readers read code and not just text, so some elements can be annoying for <strong>visually-impaired users<\/strong> trying to access the content.<\/p>\n\n\n\n<pre class=\"wp-block-verse\">Ensure that alt text is descriptive. If the image is a link, the alt text should explain what will happen if the user selects that image.<\/pre>\n\n\n\n<p>Screen readers will mention that it\u2019s an image, so you don&#8217;t have to include \u2018This is an image of\u2026\u2019 when writing your alt text.<\/p>\n\n\n\n<p>You can insert target keywords in your alt text as part of your SEO strategy, but don&#8217;t overstuff them.<\/p>\n\n\n\n<p>Keep it short and relevant. In general, no alt text is better than<em> irrelevant<\/em> alt text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"headings\">7. Organise content structure with headings<\/h3>\n\n\n\n<p><em>Addresses: users with cognitive and visual disabilities.<\/em><\/p>\n\n\n\n<p>Organising your content structure actually improves readability for <em>all<\/em> users.<\/p>\n\n\n\n<p>Most <a href=\"https:\/\/www.theguardian.com\/commentisfree\/2018\/aug\/25\/skim-reading-new-normal-maryanne-wolf\" target=\"_blank\" rel=\"noreferrer noopener\">people these days skim content<\/a> instead of reading it word for word. That\u2019s why you should use headings (such as &lt;h1&gt; and &lt;h2&gt;) when structuring content to help readers skip directly to the parts they want to read.<\/p>\n\n\n\n<p>Users with<strong> cognitive disabilities<\/strong> may have difficulty understanding complex sentences and long passages of text. That\u2019s why you should also break large chunks of text into more readable parts.<\/p>\n\n\n\n<p>Organising content also helps screen reader users with <strong>visual disabilities<\/strong> to navigate pages. When users land on a page, screen readers read the title first and ask if they want to skip to the different headings. Headers help screen readers determine each section\u2019s context.<\/p>\n\n\n\n<p>If those aren&#8217;t reasons enough, organising your content with headers can also help search engines decide what&#8217;s important, leading to better search engine performance.<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>Establish text hierarchy<\/strong> through headings that describe the section's content.<br><br>Like with headings, <strong>use descriptive titles<\/strong> that state a page\u2019s topic or purpose.<\/pre>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dynamic\">8. Make dynamic content accessible<\/h3>\n\n\n\n<p><em>Addresses: users with cognitive, auditory, visual, and physical disabilities.<\/em><\/p>\n\n\n\n<p>An accessibility best practice when you have multimedia content on your website is to include text options like captions and transcripts. They&#8217;re critical for people who are deaf or mute, and those who can\u2019t play media in public places. <\/p>\n\n\n\n<p>They also aid users with cognitive disabilities who can\u2019t keep up with audio or video content.<\/p>\n\n\n\n<pre class=\"wp-block-verse\"><strong>Include a transcript for audio content<\/strong>. W3C gives plenty of suggestions to <a href=\"https:\/\/www.w3.org\/standards\/webdesign\/audiovideo.html\" target=\"_blank\" rel=\"noreferrer noopener\">make audio and video more accessible<\/a>.<br><br><strong>Embed closed captions into your videos<\/strong> so users can read them no matter what platform they\u2019re using.<br><br><strong>Multimedia content shouldn\u2019t start automatically<\/strong> when the webpage opens. If it must, there should be controls to pause, stop, or turn down the volume.<br><br><strong>Use subtle animations<\/strong>. Make sure they don't flash too much, as those could trigger people with epilepsy.<br><br><strong>Ensure that there is sufficient time before content times out<\/strong>. Give users ample time on web apps before timeouts, and inform them of potential data loss should they need to reauthenticate it. Configure the program to allow data recovery in case of a timeout.<\/pre>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ARIA\">9. Using ARIA Attributes to Enhance Accessibility&nbsp;<\/h2>\n\n\n\n<p>While semantic HTML provides a strong foundation for web accessibility, complex web applications often require additional information to be compatible with assistive technologies.<\/p>\n\n\n\n<p>Accessible Rich Internet Applications (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\" target=\"_blank\" rel=\"noreferrer noopener\">ARIA<\/a>) are categorised as such through the inclusion of attributes added to HTML elements that define their role, state and properties.<\/p>\n\n\n\n<p>By using ARIA attributes effectively, you ensure that users with screen readers and other assistive technologies can understand the purpose and functionality of interactive elements on your website. You can use ARIA attributes to:<\/p>\n\n\n\n<p><strong>Identify interactive elements<\/strong>&nbsp;<br>Not all interactive elements on a website are inherently keyboard accessible. ARIA attributes like <code>role=\"button\"<\/code> or <code>role=\"menuitem\"<\/code> can clarify the interactive nature of elements like custom buttons, dropdown menus or accordions.<\/p>\n\n\n\n<p><strong>Convey Live Updates<\/strong>&nbsp;<br>ARIA attributes like <code>aria-live<\/code> can be used to inform screen readers about dynamic content updates on a webpage. This allows users to stay informed about changes without needing to refresh the entire page.<\/p>\n\n\n\n<p><strong>Relationship descriptors<\/strong>&nbsp;<br>Certain interactive elements have relationships with other parts of a webpage. ARIA attributes like <code>aria-labelledby<\/code> or <code>aria-describedby<\/code> can be used to establish these relationships, allowing screen readers to announce them in a clear and contextual manner.<\/p>\n\n\n\n<p>Taking the time to implement ARIA attributes correctly can significantly improve the user experience and ensure your website is truly inclusive.<\/p>\n\n\n\n<pre class=\"wp-block-verse\">Identify all interactive elements on your webpage (buttons, menus, accordions, etc.)\u00a0<br><br>Assign appropriate ARIA roles for non-standard interactive elements (e.g. role=\"button\" for custom buttons)\u00a0<br><br>Use aria-live for dynamic content sections that update frequently\u00a0<br><br>Utilise aria-labelledby or aria-describedby to connect interactive elements to relevant labels or descriptions\u00a0<br><br>Test your website with assistive technologies to ensure ARIA attributes are interpreted correctly<\/pre>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"reCAPTCHA\">10. reCAPTCHA and Accessibility<\/h2>\n\n\n\n<p>reCAPTCHA is a powerful tool for combating spam and bots, but it can also prevent people from accessing your website. Users of assistive technologies are foremost among those for whom the protocol presents a <a href=\"https:\/\/abilitynet.org.uk\/news-blogs\/ai-making-captcha-increasingly-cruel-disabled-users\" target=\"_blank\" rel=\"noreferrer noopener\">significant obstacle<\/a>.<\/p>\n\n\n\n<p>Ensure that reCAPTCHA does not keep legitimate users and customers out:<\/p>\n\n\n\n<p><strong>Alternatives<\/strong><br>Consider offering <a href=\"https:\/\/datadome.co\/guides\/captcha\/captcha-recaptcha-alternatives\" target=\"_blank\" rel=\"noreferrer noopener\">alternative CAPTCHA solutions<\/a> for users who may struggle with traditional visual or audio challenges. This could include text-based CAPTCHAs or challenges that rely on logic or simple maths problems.<\/p>\n\n\n\n<p><strong>Clear instructions<\/strong><br>Provide clear and concise instructions for completing the reCAPTCHA challenge. This will help users understand what is expected of them, regardless of their ability level.<\/p>\n\n\n\n<p><strong>Error Handling with Accessibility<\/strong><br>Ensure error messages associated with failed reCAPTCHA attempts are informative and accessible. Use screen reader-friendly text and avoid overly technical language.<\/p>\n\n\n\n<p><strong>Focus Management<\/strong><br>When a reCAPTCHA challenge is presented, ensure focus is set appropriately on the challenge itself. This will make it clear to users with screen readers where they need to interact.<\/p>\n\n\n\n<p><strong>Keyboard accessibility<\/strong><br>If reCAPTCHA challenges involve interactive elements; ensure they are fully keyboard accessible. Users should be able to complete the challenge solely with a keyboard.<\/p>\n\n\n\n<p>These guidelines will enable you to integrate reCAPTCHA into your website without compromising accessibility for users with disabilities. For more information about reCAPTCHA visit: <a href=\"https:\/\/developers.google.com\/recaptcha\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developers.google.com\/recaptcha<\/a><\/p>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Animations\">11. Animations and Accessibility<\/h2>\n\n\n\n<p>Animations can add interest, interactivity and flair to your website. Striking the right balance is important as you design your website with consideration given to how animations might impact users with accessibility issues. Here is how to ensure the animations on your website remain accessible:<\/p>\n\n\n\n<p><strong>Provide control over movement<\/strong><br>Users with motion sensitivities or cognitive disabilities may find constant animations distracting or disorienting. Offer a mechanism for users to pause, stop or hide animations altogether. A simple toggle button or link can accomplish this function while not detracting from your design and intent.<\/p>\n\n\n\n<p><strong>Prioritise content over movement<\/strong><br>Do not rely solely on animations to convey important information. Ensure your content is clear and understandable wile static. This principle is especially important for users who choose to disable animations.<\/p>\n\n\n\n<p><strong>Flashing content<\/strong><br>Avoid using rapidly flashing content, especially at high contrast levels. Flashing lights can trigger seizures in users with photosensitivity. If animations do include flashes, keep them brief and below the WCAG recommendation of 3 or less flashes per second &#8211; and avoid using red hues.<\/p>\n\n\n\n<p><strong>Alternatives for complex animations<\/strong><br>For intricate animations that convey information; provide alternative ways for users to access that same information. This might include static visuals, text descriptions or audio explanations.<\/p>\n\n\n\n<p>By following these principles, you can create engaging animations that do not compromise accessibility for your users.<\/p>\n\n\n\n<pre class=\"wp-block-verse\">Identify all animated elements on your webpage.<br><br>Consider offering a user-controllable option (pause, stop, hide) for animations.<br><br>Ensure animations do not rely solely on movement to convey information.<br><br>Avoid using rapidly flashing content, especially at high contrasts.<br><br>For complex animations, provide alternative ways to access the information they convey (text, audio, static visuals).<br><br>Test your website with assistive technologies to ensure animations don't interfere with screen reader functionality.<\/pre>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Clarity\">12. Accessibility through clarity<\/h2>\n\n\n\n<p>Clear and concise language isn&#8217;t just good practice: it is necessary for accessibility. When website copy is written in a straightforward manner, it benefits everyone &#8211; most especially users with disabilities who rely on assistive technologies or may have cognitive limitations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Why clarity matters<\/strong><\/h3>\n\n\n\n<p><strong>Screen reader compatibility<\/strong><br>Screen readers interpret and vocalise website content. Complex sentence structure, jargon and overly technical language can be difficult for screen readers to process and convey coherently. Clear and concise writing ensures a smooth and understandable experience for users relying on this assistive technology.<\/p>\n\n\n\n<p><strong>Cognitive Processing<\/strong><br>Users with cognitive impairments may struggle with complex sentence structures or overly technical language. Plain language reduces cognitive load, making it easier for users to understand the information presented on the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Writing for Accessibility<\/strong><\/h3>\n\n\n\n<p><strong>Keep it Short and Simple<\/strong><br>Opt for shorter sentences and avoid overly complex vocabulary. Aim for a writing style that is easy to understand at a glance.<\/p>\n\n\n\n<p><strong>Active voice<\/strong><br>Active voice sentences are generally clearer and more concise than passive voice. For example, &#8220;The user clicks the button&#8221; is more direct than &#8220;The button is clicked by the user.&#8221;<\/p>\n\n\n\n<p><strong>Explain Acronyms<\/strong><br>If you must use acronyms; define them the first time they appear. Make sure to do this for each page so that users who access directly, through search engines, adverts or links enjoy the benefits of having terms used throughout the page defined upon entry.<\/p>\n\n\n\n<p><strong>Use Headings and bullet points<\/strong><br>Break up large blocks of text with clear headings and bullet points. This improves readability and makes it easier for users to scan the content and find the information they need.<\/p>\n\n\n\n<p><strong>Focus on the user<\/strong><br>Write in a way that directly addresses your audience. Use &#8220;you&#8221; statements and avoid overly technical jargon.<\/p>\n\n\n\n<p><strong>Consider readability score<\/strong><br>There are online tools that calculate the readability score of your text. Aim for a score that reflects your content being easily understandable by a broad audience.<\/p>\n\n\n\n<p>By following these guidelines, you can create website copy that is accessible and user-friendly for everyone.<\/p>\n\n\n\n<pre class=\"wp-block-verse\">Review your text for sentence length and complexity. Aim for shorter sentences with clear subject-verb relationships.<br><br>Identify and replace jargon and overly technical language with simpler alternatives.<br><br>Define acronyms and technical terms the first time they are used per page.<br><br>Break up large blocks of text with clear headings and bullet points.<br><br>Use online readability scoring tools to ensure your content is easily understandable.<\/pre>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Final thoughts: web accessibility best practices<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.20i.com\/blog\/category\/web-design-dev\/\">Web design<\/a> that doesn\u2019t consider the needs of users with disabilities is a form of exclusion.<\/p>\n\n\n\n<p>It&#8217;s a lose-lose situation for both visitors and your business. Users will avoid your website when they can\u2019t get the information they need from it. In turn, you lose a potential client or customer.<\/p>\n\n\n\n<p>If you&#8217;re new to accessibility, follow these eight tips to design an accessible website, and use our <a href=\"https:\/\/www.20i.com\/blog\/website-accessibility-checklist\/#accessibilitychecklist\">web accessibility checklist<\/a> to keep track of your work. Eventually, these best practices will become second nature, and both your users and the websites you create will benefit from them.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"In our last article on website accessibility, we shared what web accessibility is and why it\u2019s important. It&hellip;","protected":false},"author":27,"featured_media":12421,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"ub_ctt_via":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[60],"tags":[152,57],"class_list":{"0":"post-9812","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design-dev","8":"tag-accessibility","9":"tag-web-design","10":"cs-entry"},"featured_image_src":"https:\/\/www.20i.com\/blog\/wp-content\/uploads\/2022\/11\/12-accessibility-tips_blog.png","author_info":{"display_name":"Maddy Osman","author_link":"https:\/\/www.20i.com\/blog\/author\/maddyosman\/"},"_links":{"self":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/9812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/comments?post=9812"}],"version-history":[{"count":99,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/9812\/revisions"}],"predecessor-version":[{"id":15852,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/posts\/9812\/revisions\/15852"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media\/12421"}],"wp:attachment":[{"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/media?parent=9812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/categories?post=9812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.20i.com\/blog\/wp-json\/wp\/v2\/tags?post=9812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}