{"id":25287,"date":"2019-05-15T07:00:24","date_gmt":"2019-05-15T07:00:24","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=25287"},"modified":"2025-11-11T10:13:44","modified_gmt":"2025-11-11T08:13:44","slug":"wordpress-accessibility-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/","title":{"rendered":"How to Make Your Website Accessible With Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"25287\" class=\"elementor elementor-25287\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-db7a2df elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"db7a2df\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d911cdf\" data-id=\"d911cdf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4df96c9 elementor-widget elementor-widget-text-editor\" data-id=\"4df96c9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The importance of website accessibility has been discussed for many years, but the information needed to make a site accessible was often difficult to understand, or difficult to implement. That is changing somewhat, although there is still a fair amount of confusion, and quite a few impediments to implementing code changes into many sites, scripts, and plugins.<\/p><p>Luckily, people are leading the way in helping us understand the importance, and giving us the information we need to make changes to our own sites.<\/p><p>Elementor can help you make your site more accessible. In this tutorial, we&#8217;ll show you a few examples of how easy this can be.<\/p><p>We&#8217;ll start by creating a couple of design elements on a page, including a hero block and a sign-up form.<\/p><p>Using the advice given on \u201c\u00a0<a href=\"https:\/\/elementor.com\/blog\/wordpress-accessibility\/\">Improving Accessibility of Your WordPress Website<\/a>\u201d, we&#8217;ll fine-tune our page using Elementor and Elementor Pro.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-039ccbc elementor-align-center elementor-widget elementor-widget-button\" data-id=\"039ccbc\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/web-accessibility-design-guide\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Principles of Web Design Accessibility<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-cea2999 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"cea2999\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-326fe6b\" data-id=\"326fe6b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-293780f elementor-widget elementor-widget-heading\" data-id=\"293780f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Font Size and Font Family<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-693e478 elementor-widget elementor-widget-text-editor\" data-id=\"693e478\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Our Hero Block is the part we&#8217;ll begin with. This is what it looks like before we begin our accessibility changes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff01d8d elementor-widget elementor-widget-image\" data-id=\"ff01d8d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"417\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768,h=417\/blog\/wp-content\/uploads\/2019\/05\/access1-768x417.jpg\" class=\"attachment-medium_large size-medium_large wp-image-25295\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/access1-768x417.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/access1-300x163.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/access1-1024x555.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1287\/blog\/wp-content\/uploads\/2019\/05\/access1.jpg 1287w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34cc7db elementor-widget elementor-widget-text-editor\" data-id=\"34cc7db\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We&#8217;ll begin by focusing on font family and font size, ensuring the text is always readable. Of course, using your theme&#8217;s options via the WordPress customizer is a great first step. Set your default font family and sizes for body text, Hx tags, etc. there, and you&#8217;ll have less to worry about once you start designing your pages. But if you need to change the <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"typography\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"16956\">typography<\/a> on any Elementor-designed page, of course, it is simple to do so.<\/p><p>Our default font size in the customizer is set at a comfortable, easy-to-read 16px, which corresponds to the default size that most browsers use. For the TRAVEL tag, the font size is set to 12px, which can be difficult for many users to read.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9649e95 elementor-widget elementor-widget-image\" data-id=\"9649e95\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"278\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300,h=278\/blog\/wp-content\/uploads\/2019\/05\/access2-300x278.jpg\" class=\"attachment-medium size-medium wp-image-25298\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/access2-300x278.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=577\/blog\/wp-content\/uploads\/2019\/05\/access2.jpg 577w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b365b8 elementor-widget elementor-widget-text-editor\" data-id=\"5b365b8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s change it to .9 REM so that it is slightly smaller than default, but still very readable. Elementor makes it easy to change the size. Simply go to the widget&#8217;s <em>Style &gt; Typography<\/em> settings, click on <strong>REM<\/strong>, and either use the slider or enter <strong>.9<\/strong>.<\/p><p><strong>Why use REMs instead of Pixels for font size?<\/strong> Accessibility is the key reason here. As we&#8217;ve mentioned, most browsers use 16px as the default text size, but a user can, and often do, change their default browser text size to be something different. If a user sets the default size at 20px, all text should scale upwards accordingly. If we design sites using pixels, we take away the ability for that user to have control over the size of the text, making our sites less accessible. Instead of setting your heading at 32px, set it to 2REM instead. This means the heading will be 2x larger than the base font size (16px normally, or in the case of our user who changed her default size to 20px, our heading would now be the equivalent of 40px). While we might wish for it to be exactly the size we want, it is the user&#8217;s right to see our text at a size that is readable to her. Let&#8217;s not take that choice away from her.<\/p><p><strong>Tip<\/strong>: There are a number of online calculators to help convert PX to REM. My favorite is <a href=\"https:\/\/offroadcode.com\/rem-calculator\/\">OffRoadCode&#8217;s REM Calculator<\/a>. Simply input your base font size in PX (for our example, that&#8217;s the 16px we set in Customizer as the default size). Then enter a list of sizes in PX that you&#8217;d like to convert to REM, separated by commas (eg, 16,18,20,22,24,27,33,36,65). Click the Calculate button and a list will be generated showing the REM size that is comparable to each of the PX sizes you&#8217;ve requested.<\/p><p><span style=\"font-weight: 400\">Next, change any other fonts to corresponding REM sizes throughout the page, as needed.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-69e0712 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"69e0712\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-66e5b1d\" data-id=\"66e5b1d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-70d364f elementor-widget elementor-widget-heading\" data-id=\"70d364f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Proper Color Contrast<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b13c3f elementor-widget elementor-widget-text-editor\" data-id=\"9b13c3f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now we\u2019ll focus on making sure there is sufficient contrast between background and foreground colors. The text within our hero\u2019s description is currently very difficult to read because there is not enough contrast between the text color and the background image colors.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e7de8e elementor-widget elementor-widget-image\" data-id=\"8e7de8e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"70\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=70\/blog\/wp-content\/uploads\/2019\/05\/access3-1024x89.jpg\" class=\"attachment-large size-large wp-image-25304\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/access3-1024x89.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/access3-300x26.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/access3-768x66.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1226\/blog\/wp-content\/uploads\/2019\/05\/access3.jpg 1226w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd8a95e elementor-widget elementor-widget-text-editor\" data-id=\"bd8a95e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is primarily because our text was not at full opacity. Merely increasing the opacity to 1 instead of 0.49 brings the contrast level to a PASS grade in accordance with the AA specs.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16bb703 elementor-widget elementor-widget-image\" data-id=\"16bb703\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"289\" height=\"300\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/ezgif.com-optimize-289x300.gif\" class=\"attachment-medium size-medium wp-image-25360\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=289\/blog\/wp-content\/uploads\/2019\/05\/ezgif.com-optimize-289x300.gif 289w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/ezgif.com-optimize-768x797.gif 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=986\/blog\/wp-content\/uploads\/2019\/05\/ezgif.com-optimize-986x1024.gif 986w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44605d2 elementor-widget elementor-widget-text-editor\" data-id=\"44605d2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We can also pass the AAA specs by darkening the background filter slightly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e973dec elementor-widget elementor-widget-image\" data-id=\"e973dec\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"421\" height=\"615\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=421,h=615\/blog\/wp-content\/uploads\/2019\/05\/access12.jpg\" class=\"attachment-large size-large wp-image-25326\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=421\/blog\/wp-content\/uploads\/2019\/05\/access12.jpg 421w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=205\/blog\/wp-content\/uploads\/2019\/05\/access12-205x300.jpg 205w\" sizes=\"(max-width: 421px) 100vw, 421px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c73cbe3 elementor-widget elementor-widget-text-editor\" data-id=\"c73cbe3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The final result is now very readable:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-05c54e3 elementor-widget elementor-widget-image\" data-id=\"05c54e3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"430\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=430\/blog\/wp-content\/uploads\/2019\/05\/access6-1024x550.jpg\" class=\"attachment-large size-large wp-image-25309\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/05\/access6-1024x550.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/access6-300x161.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/access6-768x412.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1335\/blog\/wp-content\/uploads\/2019\/05\/access6.jpg 1335w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dbc3c54 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dbc3c54\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ef5b461\" data-id=\"ef5b461\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-549440c elementor-widget elementor-widget-heading\" data-id=\"549440c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Image ALT Attributes<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9864630 elementor-widget elementor-widget-text-editor\" data-id=\"9864630\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>But what about that background image? We need to make sure it has an image ALT attribute, so screen readers can describe the image accurately to our visually impaired readers. Our image didn\u2019t originally have an ALT attribute defined in the media library.<\/p><p>To solve this, simply click the image in the section\u2019s <em>Style<\/em> tab, and add an <strong>ALT attribute<\/strong> in the media window for the image.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd3e55b elementor-widget elementor-widget-image\" data-id=\"cd3e55b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"241\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/unnamed.gif\" class=\"attachment-large size-large wp-image-25327\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2c46fef elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2c46fef\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-67a7c7c\" data-id=\"67a7c7c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e6097d5 elementor-widget elementor-widget-heading\" data-id=\"e6097d5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">ARIA-Labels<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1ce43cd elementor-widget elementor-widget-text-editor\" data-id=\"1ce43cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Our hero section has a Read More button. Let\u2019s enable our visually impaired users the opportunity to have some context added to that button, by providing an ARIA Label to the link. With <a href=\"\/help\/custom-attributes-pro\/\">Elementor Pro&#8217;s Custom Attributes<\/a> feature, this is easy to do.<\/p><p>Edit the Button\u2019s <em>Advanced &gt; Attributes<\/em>, and enter something like:<\/p><p>aria-label|Read more about 17 travel inventions we need right now<\/p><p>Notice that we\u2019ve entered our data using the format <em>key|value<\/em>. The key, in this case, is \u201caria-label\u201d and the value of that key is \u201cRead more about 17 travel inventions we need right now\u201d.<\/p><p>The result is code that is added to the HTML, like this:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bfac6eb elementor-widget elementor-widget-image\" data-id=\"bfac6eb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"684\" height=\"65\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=684,h=65\/blog\/wp-content\/uploads\/2019\/05\/access7.jpg\" class=\"attachment-large size-large wp-image-25314\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=684\/blog\/wp-content\/uploads\/2019\/05\/access7.jpg 684w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/access7-300x29.jpg 300w\" sizes=\"(max-width: 684px) 100vw, 684px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-97724d7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"97724d7\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bc9cb15\" data-id=\"bc9cb15\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ed6dd38 elementor-widget elementor-widget-heading\" data-id=\"ed6dd38\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Accessible Forms<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74ad9fa elementor-widget elementor-widget-text-editor\" data-id=\"74ad9fa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Our subscription form needs similar treatment as our Hero block. We\u2019ve adjusted all the text to ensure it has readable fonts, using REM sizes, with proper color contrast.<\/p><p>Forms need to handle TAB Order appropriately. Luckily, <a href=\"\/help\/form-widget-pro\/\">Elementor Pro&#8217;s Form Widget<\/a> takes care of this by default. Each successive press of the TAB key brings us to the next field automatically, and then to the Submit button last. Pressing SHIFT-TAB through the fields works backwards as expected as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3ab9aa3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3ab9aa3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-02306f0\" data-id=\"02306f0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e9fed5a elementor-widget elementor-widget-heading\" data-id=\"e9fed5a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">HTML5 Semantic Elements<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-320b9fa elementor-widget elementor-widget-text-editor\" data-id=\"320b9fa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor also makes it very easy to use HTML5 semantic elements such as &lt;header&gt;, &lt;footer&gt;, &lt;article&gt;, &lt;aside&gt;, &lt;nav&gt;, &lt;main&gt;, and &lt;section&gt; in place of &lt;div&gt;. Just look for the<em> HTML Tag<\/em> option in either the <em>Section &gt; Layout<\/em> or <em>Column &gt; Layout<\/em>, and choose whichever you need.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71a4ef5 elementor-widget elementor-widget-image\" data-id=\"71a4ef5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"297\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=320,h=297\/blog\/wp-content\/uploads\/2019\/05\/unnamed.jpg\" class=\"attachment-large size-large wp-image-25328\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=320\/blog\/wp-content\/uploads\/2019\/05\/unnamed.jpg 320w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/unnamed-300x278.jpg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-04a9633 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"04a9633\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d1e3bd4\" data-id=\"d1e3bd4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7b72cf5 elementor-widget elementor-widget-heading\" data-id=\"7b72cf5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Making \u201cAll The Things\u201d Accessible<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a894c0b elementor-widget elementor-widget-text-editor\" data-id=\"a894c0b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Of course, we\u2019ve only shown a small portion of one web page. There are many other elements to consider when making a website accessible, as mentioned in the <a href=\"https:\/\/elementor.com\/blog\/wordpress-accessibility\/\">Improving Accessibility of Your WordPress Website<\/a> article. Each website is different, so the approach taken to make them accessible may differ. But by implementing a well-thought-out process, making strategic use of your theme\u2019s options, and utilizing Elementor\u2019s ability to have fine-grain control over page elements, you\u2019ll go a long way towards making your site accessible to all users.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e4e0423 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e4e0423\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9510edb\" data-id=\"9510edb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cdd0e97 elementor-widget elementor-widget-heading\" data-id=\"cdd0e97\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Want To Give Users Even More Options?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81e0a96 elementor-widget elementor-widget-text-editor\" data-id=\"81e0a96\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor has you covered there as well. The Elementor \/ Pojo team created the popular (and free) <a href=\"https:\/\/wordpress.org\/plugins\/pojo-accessibility\/\">One Click Accessibility<\/a> plugin.<\/p><p>One Click Accessibility plugin adds a number of helpful accessibility features with the minimum amount of setup and without the need for expert knowledge.<\/p><p><strong>Accessibility Toolbar<\/strong>:<\/p><p>A small icon on the left or right side of a page allows a user to click it and open a toolbar that allows the user to:<\/p><ul><li>Resize fonts (increase\/decrease)<\/li><li>Change page to Grayscale<\/li><li>Show page with Negative Contrast<\/li><li>Show page with High Contrast<\/li><li>Show page with a Light Background<\/li><li>Change Links to have Underline<\/li><li>Change font to a Readable Font<\/li><li>Link to Sitemap \/ Feedback \/ Help pages<\/li><\/ul><p><strong>Accessibility Features<\/strong>:<\/p><ul><li>Enable Skip to Content<\/li><li>Add outline focus for focusable elements<\/li><li>Remove the target attribute from links<\/li><li>Add landmark roles to all links<\/li><li>Customizer for style adjustment<\/li><\/ul><p>You can enable or disable each of the options and make appropriate setting changes for each. This plugin can be used whether or not you\u2019ve already made changes to your site to make it more accessible.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9694c08 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9694c08\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3dd7820\" data-id=\"3dd7820\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-af75e60 elementor-widget elementor-widget-heading\" data-id=\"af75e60\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">General Settings<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b66ded9 elementor-widget elementor-widget-text-editor\" data-id=\"b66ded9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This panel controls the plugin&#8217;s main functionalities. For example, the Add Outline Focus, which adds a visible border around an area that is currently in focus.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a91a3eb elementor-widget elementor-widget-image\" data-id=\"a91a3eb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"673\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=673\/blog\/wp-content\/uploads\/2019\/05\/access8.jpg\" class=\"attachment-large size-large wp-image-25319\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=948\/blog\/wp-content\/uploads\/2019\/05\/access8.jpg 948w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/05\/access8-300x253.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/05\/access8-768x646.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a53b66a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a53b66a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9a8d26a\" data-id=\"9a8d26a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ebabefa elementor-widget elementor-widget-heading\" data-id=\"ebabefa\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Toolbar Settings<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f48acb elementor-widget elementor-widget-text-editor\" data-id=\"5f48acb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This set of controls determines which settings will appear in the toolbar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd146b8 elementor-widget elementor-widget-image\" data-id=\"cd146b8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"752\" height=\"826\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=752,h=826\/blog\/wp-content\/uploads\/2019\/05\/access9.jpg\" class=\"attachment-medium_large size-medium_large wp-image-25320\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=752\/blog\/wp-content\/uploads\/2019\/05\/access9.jpg 752w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=273\/blog\/wp-content\/uploads\/2019\/05\/access9-273x300.jpg 273w\" sizes=\"(max-width: 752px) 100vw, 752px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8b33928 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8b33928\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-01dd79a\" data-id=\"01dd79a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4986458 elementor-widget elementor-widget-heading\" data-id=\"4986458\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Customize<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32169db elementor-widget elementor-widget-text-editor\" data-id=\"32169db\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This panel sets the position and visibility of the toolbar, as it is seen by the user.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-baffde4 elementor-widget elementor-widget-image\" data-id=\"baffde4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"219\" height=\"512\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=219,h=512\/blog\/wp-content\/uploads\/2019\/05\/access10.jpg\" class=\"attachment-large size-large wp-image-25321\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=219\/blog\/wp-content\/uploads\/2019\/05\/access10.jpg 219w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=128\/blog\/wp-content\/uploads\/2019\/05\/access10-128x300.jpg 128w\" sizes=\"(max-width: 219px) 100vw, 219px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-72228fc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"72228fc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-07f7c33\" data-id=\"07f7c33\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b059e78 elementor-widget elementor-widget-heading\" data-id=\"b059e78\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What Does The User See?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88ffefb elementor-widget elementor-widget-image\" data-id=\"88ffefb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"476\" height=\"771\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=476,h=771\/blog\/wp-content\/uploads\/2019\/05\/access11.jpg\" class=\"attachment-large size-large wp-image-25322\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=476\/blog\/wp-content\/uploads\/2019\/05\/access11.jpg 476w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=185\/blog\/wp-content\/uploads\/2019\/05\/access11-185x300.jpg 185w\" sizes=\"(max-width: 476px) 100vw, 476px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17af907 elementor-widget elementor-widget-text-editor\" data-id=\"17af907\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As you can see, just by adding the plugin and adjusting a few settings, the user has many accessible options at their fingertips, all with only one click of the Accessibility Toolbar Icon.<\/p><p>Web Accessibility is a complex subject. No short tutorial can cover everything you need to know to make your site accessible, but we hope these instructions help you take the first steps in doing so.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Elementor can help you make your site more accessible to people with visual impairments. In this tutorial, we\u2019ll show you a few examples of how easy this can be done.<\/p>\n","protected":false},"author":4549,"featured_media":25337,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[523,45],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-25287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","category-development","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Make Your Website Accessible With Elementor<\/title>\n<meta name=\"description\" content=\"Elementor can help you make your site more accessible to people with visual impairments. Learn how using this tutorial\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make Your Website Accessible With Elementor\" \/>\n<meta property=\"og:description\" content=\"Elementor can help you make your site more accessible to people with visual impairments. Learn how using this tutorial\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-15T07:00:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-11T08:13:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Donna Cavalier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Donna Cavalier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/\"},\"author\":{\"name\":\"Donna Cavalier\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/27274038d2f122be886171f4b8d5a6ba\"},\"headline\":\"How to Make Your Website Accessible With Elementor\",\"datePublished\":\"2019-05-15T07:00:24+00:00\",\"dateModified\":\"2025-11-11T08:13:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/\"},\"wordCount\":1491,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Accessibility\",\"Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/\",\"url\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/\",\"name\":\"How to Make Your Website Accessible With Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png\",\"datePublished\":\"2019-05-15T07:00:24+00:00\",\"dateModified\":\"2025-11-11T08:13:44+00:00\",\"description\":\"Elementor can help you make your site more accessible to people with visual impairments. Learn how using this tutorial\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Development\",\"item\":\"https:\/\/elementor.com\/blog\/category\/development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Make Your Website Accessible With Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/27274038d2f122be886171f4b8d5a6ba\",\"name\":\"Donna Cavalier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3e97e4dd17b013d89747303608e8b1a6ae73847e8c057b8864f3e144c5de4e7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3e97e4dd17b013d89747303608e8b1a6ae73847e8c057b8864f3e144c5de4e7?s=96&d=mm&r=g\",\"caption\":\"Donna Cavalier\"},\"description\":\"Donna Cavalier is a novelist and WordPress specialist, who has been in the website design and online marketing industries since 2003.\",\"sameAs\":[\"https:\/\/www.donnafontenot.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/donnacavalier\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make Your Website Accessible With Elementor","description":"Elementor can help you make your site more accessible to people with visual impairments. Learn how using this tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Your Website Accessible With Elementor","og_description":"Elementor can help you make your site more accessible to people with visual impairments. Learn how using this tutorial","og_url":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-05-15T07:00:24+00:00","article_modified_time":"2025-11-11T08:13:44+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png","type":"image\/png"}],"author":"Donna Cavalier","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Donna Cavalier","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/"},"author":{"name":"Donna Cavalier","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/27274038d2f122be886171f4b8d5a6ba"},"headline":"How to Make Your Website Accessible With Elementor","datePublished":"2019-05-15T07:00:24+00:00","dateModified":"2025-11-11T08:13:44+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/"},"wordCount":1491,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png","keywords":["Build"],"articleSection":["Accessibility","Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/","url":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/","name":"How to Make Your Website Accessible With Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png","datePublished":"2019-05-15T07:00:24+00:00","dateModified":"2025-11-11T08:13:44+00:00","description":"Elementor can help you make your site more accessible to people with visual impairments. Learn how using this tutorial","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/05\/Cover-2019.05.12-2019.05.15-Website-Accessibility.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/wordpress-accessibility-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Development","item":"https:\/\/elementor.com\/blog\/category\/development\/"},{"@type":"ListItem","position":3,"name":"How to Make Your Website Accessible With Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/27274038d2f122be886171f4b8d5a6ba","name":"Donna Cavalier","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3e97e4dd17b013d89747303608e8b1a6ae73847e8c057b8864f3e144c5de4e7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3e97e4dd17b013d89747303608e8b1a6ae73847e8c057b8864f3e144c5de4e7?s=96&d=mm&r=g","caption":"Donna Cavalier"},"description":"Donna Cavalier is a novelist and WordPress specialist, who has been in the website design and online marketing industries since 2003.","sameAs":["https:\/\/www.donnafontenot.com"],"url":"https:\/\/elementor.com\/blog\/author\/donnacavalier\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/25287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/4549"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=25287"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/25287\/revisions"}],"predecessor-version":[{"id":142524,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/25287\/revisions\/142524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/25337"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=25287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=25287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=25287"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=25287"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=25287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}