{"id":18588,"date":"2021-01-10T15:00:55","date_gmt":"2021-01-10T14:00:55","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=18588"},"modified":"2022-10-31T13:27:11","modified_gmt":"2022-10-31T12:27:11","slug":"how-to-improve-accessibility-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-improve-accessibility-wordpress\/","title":{"rendered":"How to Improve the Accessibility of Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Here at Qode, we bring beauty to WordPress. That\u2019s literally our motto. But this doesn\u2019t mean that we espouse putting style over substance. Designing for accessibility is an important consideration. Whether your content is targeted specifically towards people with disabilities or not, sparing a thought for differently abled visitors who might nonetheless appreciate what you have to offer can never be a bad thing. In this article, we will discuss several things you can do in order to increase your WordPress website\u2019s accessibility. But before we get right down to the brass tacks, let us say a few words about accessibility design in WordPress.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-wordpress-accessibility-means\">What Does WordPress Accessibility Mean?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#test-websites-current-accessibility\">How To Test My Website\u2018s Current Accessibility<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#basic-in-built-accessibility-features\">Basic In-Built Accessibility Features of WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#colour-palettes\">Colour Palettes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#design-accessible-forms\">How to Design Accessible Forms<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#improve-accessibility-using-plugin\">How to Improve the Accessibility of Your WordPress Website Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-wordpress-accessibility-means\"><\/a>What Does WordPress Accessibility Mean?<\/h2>\n<p>[\/vc_column_text][vc_column_text]In general, web accessibility means that website designers take steps to ensure that <strong>people with disabilities<\/strong>, be they cognitive, visual, auditory, neurological or other, <strong>can use the website<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Specifically, designing for accessibility means taking in mind those visitors who have disabilities which might prevent them from enjoying all of your website\u2019s features, at least, or even prevent them from accessing your content, at the most extreme. The gist of it is that <strong>accessible design means being UX-forward for the differently abled<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Best practices in design now include several techniques which allow you to improve accessibility and make your WordPress website easier to use for people who can\u2019t use it unassisted. This does not mean that designing for accessibility will only benefit your disabled visitors. It may also <strong>benefit people with temporary disabilities<\/strong>, such as those who may have broken an arm or temporarily lost vision due to eye surgery, people who are on a very slow connection, or people who just prefer their text in audio form.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This all means accessible design is not catering to a disabled minority, but instead makes for a better overall user experience \u2013 and <strong>a potential increase in the audience<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"test-websites-current-accessibility\"><\/a>How To Test My Website\u2018s Current Accessibility<\/h2>\n<p>[\/vc_column_text][vc_column_text]You can test your web pages for accessibility using one of <strong>several web-based accessibility evaluation tools<\/strong>, such as <a href=\"https:\/\/fae.disability.illinois.edu\/anonymous\/\" target=\"_blank\" rel=\"noopener\">FAE<\/a>, <a href=\"https:\/\/achecker.ca\/checker\/\" target=\"_blank\" rel=\"noopener\">Achecker<\/a> or <a href=\"https:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noopener\">WAVE<\/a>. Out of those, we found WAVE to be the fastest and the most user friendly. Simply paste the web page address into the address field and click the arrow icon to get the report.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"494\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave.jpg\" class=\"attachment-full size-full\" alt=\"Wave\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave-768x392.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave-620x316.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have run a report on an article from the international edition of The Guardian, and we can easily see which areas need improvement, as they are labeled with icons. To get a detailed look at the issue, simply click the icon and read the tooltip. That is how you\u2018ll know how to resolve each issue.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"483\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave-Report.jpg\" class=\"attachment-full size-full\" alt=\"Wave Report\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave-Report.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave-Report-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave-Report-768x383.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Wave-Report-620x309.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]WAVE developers have also provided <a href=\"https:\/\/wave.webaim.org\/extension\/\" target=\"_blank\" rel=\"noopener\">extensions for Chrome and Firefox<\/a>, which you can use to return an accessibility report without sending any data to the WAVE servers, making it as secure as possible.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"basic-in-built-accessibility-features\"><\/a>Basic In-Built Accessibility Features of WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]WordPress developers have instituted <a href=\"https:\/\/developer.wordpress.org\/coding-standards\/wordpress-coding-standards\/accessibility\/\" target=\"_blank\" rel=\"noopener\">standards for accessibility<\/a> for all new code and a <a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/best-practices\/\" target=\"_blank\" rel=\"noopener\">best practices<\/a> handbook for coders, with examples of code. But you don\u2018t need to know how to code in order to make your website more accessible.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Headings<\/h3>\n<p>[\/vc_column_text][vc_column_text]For instance, <strong>a good heading structure is very important<\/strong> to persons using software such as screen readers. Making text large and bold will not make the screen reader understand that the text is a heading. Use a <strong>Heading<\/strong> block in Gutenberg, a Heading element in Elementor, or heading tags such as <i><span style=\"font-weight: 400;\">&lt;h1&gt; &lt;\/h1&gt;<\/span><\/i> in the Classic editor. The Heading 1 is the principal page Heading, and should not be used for anything else.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The internal structure of the text should be subdivided using headings 2 to 6, without skipping levels. You should also avoid adding any additional functionalities to headings, such as links. Conversely, you shouldn\u2018t be using headings purely for aesthetic purposes. That\u2019s what font size and style are for. A good heading structure will not simply help users with screen readers \u2013 it will also mean a better SEO score.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Links<\/h3>\n<p>[\/vc_column_text][vc_column_text]When creating links, you should <strong>make sure that it is clear from the context what is and isn\u2018t a link<\/strong>. If a link is surrounded with other text, best practices mean it should be underlined and in a different colour.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding Alt Attributes to Images<\/h3>\n<p>[\/vc_column_text][vc_column_text]<strong>Adding alt attributes to images makes them \u201creadable\u201d for screen reader software<\/strong>, and it is very easy to do. All you need to do is access any image in your media library.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"509\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Media-Library.jpg\" class=\"attachment-full size-full\" alt=\"Media Library\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Media-Library.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Media-Library-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Media-Library-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Media-Library-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the right-hand side menu, you will find the Alt text box. Simply put in a meaningful description of the image, which in our case is a landscape photograph meant for a purely decorative purpose, and requires nothing more than a simple description.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Image-Alt-Text.jpg\" class=\"attachment-full size-full\" alt=\"Image Alt Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Image-Alt-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Image-Alt-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Image-Alt-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Image-Alt-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A person using a website reader will now have the textual description of the picture. This function of your media files is something you shouldn\u2019t overlook \u2013 it can affect your SEO score. If you want to know more, we have a whole <a href=\"https:\/\/qodeinteractive.com\/magazine\/image-titles-and-alt-text-in-wordpress\/\">in-depth guide to alt text<\/a> and image titles.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"colour-palettes\"><\/a>Colour Palettes<\/h2>\n<p>[\/vc_column_text][vc_column_text]Some colour palettes can cause trouble for users suffering from poor eyesight, colour blindness, and similar conditions. Generally speaking, <strong>the more contrast, the better,<\/strong> although <strong>too much contrast can cause issues for people with sensitive eyes.<\/strong> This not only applies to text and background, but also to elements (such as buttons, icons, menus and other) and hover effects. For more on <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-change-text-color\/\">changing text colours in WordPress<\/a>, check out our in-depth guide.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The recommended background:foreground luminosity contrast ratio is 4.5:1 for normal text, or 3:1 for large. There is a large number of tools you can use in order to check your contrast ratios, such as the <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">WebAIM contrast checker<\/a>. <a href=\"https:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noopener\">WAVE<\/a>, being a comprehensive tool, will highlight contrast issues in your website design, too.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"design-accessible-forms\"><\/a>How to Design Accessible Forms<\/h2>\n<p>[\/vc_column_text][vc_column_text]Forms are an important part of web interaction. There are a couple of things you can do to make them more accessible.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, <strong>good labeling is important<\/strong>. Label all your fields correctly and clearly. Secondly, <strong>use placeholder text<\/strong> \u2013 examples of text your visitors need to input into forms. For instance, if you are expecting an URL, use something like <em>www.yourwebsite.com<\/em> for a placeholder. Finally, <strong>a complete set of instructions on how to fill out a form<\/strong> could be a great help to the visually impaired.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"improve-accessibility-using-plugin\"><\/a>How to Improve the Accessibility of Your WordPress Website Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]It is no surprise that there is a number of tools you can use to help fix some of the common problems WordPress websites have with accessibility. The plugin which we found potentially the most useful is <a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\" target=\"_blank\" rel=\"noopener\">WP Accessibility<\/a>. We will guide you to some of its important features.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you install and activate the plugin, you need to configure it. Navigate to <strong>Accessibility Settings<\/strong> from the <strong>Installed Plugins<\/strong> screen on your dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Accessibility Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to make your website more accessible for website readers, you can add <strong>skiplinks<\/strong>. Skiplinks make the readers focus on the content, rather than having to read through all the menus and header data first. Configuring skiplinks takes a little code knowledge, so we won\u2019t go into details here. It does provide your users with a button they can use to skip the unnecessary content and go straight to the heart of the matter. You just need to assign an ID attribute to where you want the link to take your visitor.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Skip-Linkup.jpg\" class=\"attachment-full size-full\" alt=\"Skip Linkup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Skip-Linkup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Skip-Linkup-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Skip-Linkup-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Skip-Linkup-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, there are the <strong>Accessibility Toolbar Settings<\/strong>. If you check <em>Add Accessibility toolbar with fontsize adjustment and contrast toggle<\/em>, your user will see a toolbar on the side of their screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Toolbar.jpg\" class=\"attachment-full size-full\" alt=\"Accessibility Toolbar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Toolbar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Toolbar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Toolbar-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Accessibility-Toolbar-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This they can use to view a high-contrast version of your website\u2026<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"489\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/High-Contrast.jpg\" class=\"attachment-full size-full\" alt=\"High Contrast\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/High-Contrast.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/High-Contrast-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/High-Contrast-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/High-Contrast-620x313.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]&#8230;or to enlarge the main font.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"489\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Font-Size.jpg\" class=\"attachment-full size-full\" alt=\"Font Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Font-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Font-Size-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Font-Size-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Font-Size-620x313.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We won\u2019t go into the nitty-gritty of the toolbar settings, but there are several options you may want to test before enabling them for your visitors.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, you have the <strong>Miscellaneous Settings<\/strong> section.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"547\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Misc-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Misc Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Misc-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Misc-Settings-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Misc-Settings-768x434.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Misc-Settings-620x350.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You may cycle through each of these individually, and see which ones work best for your website. For instance, your website may be using a RTL (right-to-left) text language \u2013 the plugin and the website reader need to know that. You may want your images to have longer descriptions, and there is an option for that, too.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Three of these checkboxes are checked by default: links carry no target attribute, the website returns a search error when the search field does not contain a string, and tabindex is removed from focusable elements.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, you have the <strong>Remove Title Attributes<\/strong> section. This serves to tell the website reader that some items in the layout are not titles. We suggest you go through this and remove the title attribute from whatever that doesn\u2019t need it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You also have a handy contrast-checking tool. Simply pick the colours you are using or paste their hex codes into the appropriate fields, and check whether your contrast ratios are what you need them to be.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Color-Contrast.jpg\" class=\"attachment-full size-full\" alt=\"Color Contrast\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Color-Contrast.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Color-Contrast-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Color-Contrast-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/01\/Color-Contrast-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we have shown, there are plenty of things you can do to make your website more accessible. Avoid the pitfall of thinking about accessible design as merely accommodating a minority \u2013 in fact, all you are doing is appealing to a broader range of visitors, investing only a little more time and effort into potentially great returns. Not to mention that some of these techniques might significantly improve your SEO score. Why wouldn\u2019t you want to take advantage of that?<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn more on how to make your WordPress website more accessible for the differently abled and create a better user experience.<\/p>\n","protected":false},"author":16990,"featured_media":18648,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,39,13],"class_list":["post-18588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-tools","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/18588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=18588"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/18588\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/18648"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=18588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=18588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=18588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}