{"id":135618,"date":"2015-01-01T08:00:00","date_gmt":"2015-01-01T13:00:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=135618"},"modified":"2015-01-27T22:29:26","modified_gmt":"2015-01-28T03:29:26","slug":"make-your-wordpress-site-accessible","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/make-your-wordpress-site-accessible\/","title":{"rendered":"Make Your WordPress Site Accessible With These Themes and Plugins"},"content":{"rendered":"<p>I think we can all agree that technology has made our lives a lot easier, but what about people\u00a0who are visually or hearing impaired and those who are color blind?<\/p>\n<p>We spend a lot of time\u00a0improving our websites, optimizing them for speed and creating quality content, but not enough attention is placed on site accessibility. Have you ever wondered how easy it is for people with disabilities to access your site and then navigate around it?<\/p>\n<p>The importance of creating accessible websites is <a title=\"WordPress Accessibility Team Is Mobilizing to Make Accessibility Required for WordPress.org Themes\" href=\"http:\/\/wptavern.com\/wordpress-accessibility-team-is-mobilizing-to-make-accessibility-required-for-wordpress-org-themes\" rel=\"noopener\" target=\"_blank\">gaining much-needed traction in the WordPress community<\/a> thanks to the WordPress Accessibility team. The team has been working with the Theme Review team on the possibility of requiring the accessibility-ready tag for themes hosted on WordPress.org. The Accessibility team hope to announced new guidelines for theme developers in April 2015, which would then be required as of November 2015.<\/p>\n<p>So what does it take to create an accessible website? In this post I&#8217;ll go over some of the requirements in the WordPress Codex for meeting accessibility guidelines, as well as themes and plugins for improving your site&#8217;s accessibility.<\/p>\n<h2>Is Your Site Accessible?<\/h2>\n<p>To ensure your website is accessible, there are a number of required and\/or recommended criteria\u00a0you need to meet. All themes and theme updates that use the tag &#8220;accessibility-ready&#8221; undergo an accessibility audit\u00a0against a number of guidelines, which you&#8217;ll find in the\u00a0<a title=\"for accessibility information\" href=\"https:\/\/make.wordpress.org\/themes\/handbook\/guidelines\/accessibility\/\" rel=\"noopener\" target=\"_blank\">Theme Review Handbook<\/a>. There are also more details about accessibility in the\u00a0<a title=\"accessibility section\" href=\"http:\/\/codex.wordpress.org\/Accessibility\" rel=\"noopener\" target=\"_blank\">WordPress Codex<\/a>.<\/p>\n<p>For now, let&#8217;s go over the most important points you need to know now in order to score your site for its accessibility:<\/p>\n<ul>\n<li>Headings should be used to define a page&#8217;s sub-sections and not simply for visual appeal<\/li>\n<li>you should only have one <em>h1 tag<\/em> per page<\/li>\n<li>Links should be descriptive and should make sense out of context (use &#8220;Continue Reading [Title of Post]&#8221; instead of &#8220;Read More&#8221;)<\/li>\n<li>Buttons and (drop-down) menus should be selectable and highlight-able with a keyboard well as a mouse<\/li>\n<li>Your page&#8217;s text color must be in high contrast when compared\u00a0to the background color of the content area<\/li>\n<li>The text should not refer to interactive elements such as links or buttons by color only<\/li>\n<li>Your website should include skipping links at the very top of each page to allow users direct navigation to content with only a keyboard<\/li>\n<li>The <em>title attribute<\/em> for links should only be used if the corresponding text\u00a0would not be redundant when they are viewed side by side<\/li>\n<li>Forms must be sufficiently labeled outside the form field and all confirmations and warnings should be easily recognizable<\/li>\n<li>Images and icons should supplement text and content and should <strong>not<\/strong> stand alone without <em>alt tags<\/em> and very descriptive captions or titles<\/li>\n<li>Media such as video, audio, sliders or carousels should <strong>not<\/strong> start or change action without user interaction by default<\/li>\n<li>New browser windows or tabs should <strong>not<\/strong> be opened automatically, without user interaction<\/li>\n<\/ul>\n<h2>Plugins for Accessibility<\/h2>\n<p>There are a couple of websites that can help you test for some of these issues such as the <a title=\"accessibility test tool\" href=\"https:\/\/www.joedolson.com\/tools\/color-contrast.php\" rel=\"noopener\" target=\"_blank\">Color Contrast Comparison<\/a> and <a title=\"accessibility test tool\" href=\"http:\/\/contrast-finder.tanaguru.com\/\" rel=\"noopener\" target=\"_blank\">Tanaguru Contrast Finder<\/a>\u00a0sites. These are great, but there are many plugins to help you test your site and also help you achieve accessibility.<\/p>\n<p>Let&#8217;s take a look at the most reliable ones.<\/p>\n<h3 class=\"wpdui-tutorial-list__item__title\">WP Accessibility<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209533\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/WP-Accessibility-plugin-600x165-1.png\" alt=\"wp accessibility header\" width=\"600\" height=\"165\" \/><\/div>\n<\/div>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\" target=\"_blank\">WP Accessibility<\/a> is a fantastic plugin because it adds many accessibility options in a single package. You can disable as many or as few options as you like if your current theme already has the same options included.<\/p>\n<p>You can add skip links, a toolbar to toggle between high contrast, large print and grayscale views of your site, add long descriptions to images, add post titles to the standard \u201cread more\u201d links, and a lot more. While this won\u2019t replace a solid theme that\u2019s built for accessibility, it will certainly help a great deal making this a very valuable plugin.<\/p>\n<h3 class=\"wpdui-tutorial-list__item__title\">Alt Checker<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209536\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/Alt-Checker-plugin-600x165-1.png\" alt=\"alt checker header\" width=\"600\" height=\"165\" \/><\/div>\n<\/div>\n<p>If the first plugin doesn\u2019t fit well with your workflow or you\u2019re otherwise not a big fan, you can try this one. <a href=\"https:\/\/wordpress.org\/plugins\/altchecker\/\" target=\"_blank\">Alt Checker<\/a> is a plugin that also checks to make sure you have added alt text to your uploaded images. It\u2019s super easy to install as well. The only major difference between this plugin and the Inaccessibility Checker is that the latter also checks for captions.<\/p>\n<h3>One Click Accessibility<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209542\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/one-click-accessibility.png\" alt=\"one click accessibility\" width=\"600\" height=\"214\" \/><\/div>\n<\/div>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/pojo-accessibility\/\" target=\"_blank\">One Click Accessibility<\/a> is a free accessibility plugin. It features the ability for users to skip to content, add an outline, include landmark roles, and more.<\/p>\n<p>All of these features can make your site more accessible and SEO-friendly.<\/p>\n<h3>WP Accessibility Helper (WAH)<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209549\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/WAH.png\" alt=\"WAH header.\" width=\"600\" height=\"204\" \/><\/div>\n<\/div>\n<p>The <a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility-helper\/\" target=\"_blank\">WAH<\/a> plugin helps tackle accessibility issues; including contrast, font size, images, and more. You can toggle accessibility features directly from the WordPress dashboard.<\/p>\n<h3>Web Accessibility by accessiBe<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209550\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/web-accessibility.png\" alt=\"web accessibility\" width=\"600\" height=\"183\" \/><\/div>\n<\/div>\n<p>The Web Accessibilty plugin by <a href=\"https:\/\/wordpress.org\/plugins\/accessibe\/\" target=\"_blank\">accessiBe<\/a>\u00a0is an AI-powered service that was created to enhance accessibility. It helps any user with a disability by including AI scans and analyzing websites to learn what elements and functionality they include, and adjusting them.<\/p>\n<h3>Accessibility by UserWay<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209551\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/accessibility-1.png\" alt=\"accessibility header\" width=\"600\" height=\"183\" \/><\/div>\n<\/div>\n<p>Trusted by millions, UserWays AI-Powered <a href=\"https:\/\/wordpress.org\/plugins\/userway-accessibility-widget\/\" target=\"_blank\">Accessibility<\/a> Widget was developed to provide business owners comprehensive accessibility solutions. Some of their automatic recommendations include generated alt text, color contrast correction, undefined &amp; broken link remediation, and more.<\/p>\n<h3>WP ADA Compliance Check Basic<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209555\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/ada.png\" alt=\"ada header\" width=\"600\" height=\"162\" \/><\/div>\n<\/div>\n<p>The <a href=\"https:\/\/wordpress.org\/plugins\/wp-ada-compliance-check-basic\/\" target=\"_blank\">WP ADA Compiance Check Basic<\/a> plugin was created to comply with Section 508 and WCAG 2.1 Level A\/AA Web Accessibility Standards. It includes 76 individual error checks, and it evaluates content for web accessibility issues anywhere on your WordPress site.<\/p>\n<h3>Accessibility Widget<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209561\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/accessibility-widget.png\" alt=\"accessibility widget header\" width=\"600\" height=\"201\" \/><\/div>\n<\/div>\n<p>The <a href=\"https:\/\/wordpress.org\/plugins\/accessibility-widget\/\" target=\"_blank\">Accessibilty Widget<\/a> allows you to quickly put an accessibility panel on your WordPress site &#8212; for free. It will function on desktop and mobile. Plus, you can choose your text sizes and which page elements are affected by the widget.<\/p>\n<h3>WP Accessibility Tools &amp; Missing Alt Text Finder<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209562\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/web-accessibility-plugin.png\" alt=\"web accessibility header\" width=\"600\" height=\"181\" \/><\/div>\n<\/div>\n<p>With the <a href=\"https:\/\/wordpress.org\/plugins\/tool-for-ada-section-508-and-seo\/\" target=\"_blank\">WP Accessibility Tools &amp; Missing Alt Text Finder<\/a> plugin, you&#8217;re able to locate missing alt text, and check the contrast ratio, and it also includes a WCAG 2.1. compliance checklist.\u00a0 Plus, there are a ton of resource links for additional information on web accessibility.<\/p>\n<h2>Accessibility-Ready Themes<\/h2>\n<p>Creating an accessible site from scratch can be difficult, but it doesn&#8217;t have to be with these fantastic\u00a0themes.<\/p>\n<p>All of the themes in this list have\u00a0passed the Theme Review Team&#8217;s access<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209555\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/ada.png\" alt=\"ada header\" width=\"600\" height=\"162\" \/><\/div>\n<\/div>\n<p>ibility audit with flying colors. This means\u00a0they have at least the minimum requirements to be considered accessible by the visually impaired. If you are a theme developer, WordPress does encourage you\u00a0to go above and beyond the minimum standards.<\/p>\n<p>Don&#8217;t worry, though \u2013 even if one of these themes doesn&#8217;t\u00a0surpass the standard, you can pair\u00a0it with one or more of the plugins above to help you achieve a greater level of accessibility.<\/p>\n<h3 class=\"wpdui-tutorial-list__item__title\">Simone<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209537\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/Simone-theme-600x300-1.png\" alt=\"Simone header.\" width=\"600\" height=\"300\" \/><\/div>\n<\/div>\n<p><a href=\"https:\/\/wordpress.org\/themes\/simone\/\" target=\"_blank\">Simone<\/a> looks as though it has a narrow content area, but it\u2019s actually very roomy. It has large, clean fonts for an easy reading experience and its menus are fully accessible by keyboard. If you don\u2019t like the sidebar, you can opt for a full-width page template instead. You can change the color scheme, background, and all that good stuff. It also has all the major post formats, sticky posts, and threaded comments.<\/p>\n<h3 class=\"wpdui-tutorial-list__item__title\">Universal<\/h3>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-209539\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/01\/Universal-theme-600x300-1.png\" alt=\"universal header.\" width=\"600\" height=\"300\" \/><\/div>\n<\/div>\n<section class=\"wpdui-tutorial-list__item__content\">The<a href=\"https:\/\/wordpress.org\/themes\/universal\/\" target=\"_blank\"> Universal<\/a> theme has a rather unique feature to it which makes it shine among other themes. It has extensive in-line documentation on its accessibility features. This can act as a resource in and of itself to help you further understand how to make your site accessible. It has a good number of theme options to help you tweak the style to your liking along with the sticky post feature.<\/section>\n<h2>Final Thoughts<\/h2>\n<p>Ensuring your WordPress site is accessible may seem like a lot of work, but the benefits are worth it. Not only will you make your content more available to those with disabilities, but you will be opening up your site to a larger audience.<\/p>\n<p>The plugins and themes in this list provide a great start to get you thinking about how to improve your site&#8217;s accessibility.<\/p>\n<p>The Theme Review Team&#8217;s accessibility guidelines provide a neat overview of the requirements websites should meet. If your site doesn&#8217;t already meet these guidelines, it&#8217;s worth thinking about how to put them in place \u2013 the accessibility movement in WordPress is gaining traction and you don&#8217;t want to be left behind or discriminate against\u00a0potential readers of customers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We spend a lot of time improving our websites, optimizing them for speed and creating quality content, but not enough attention is placed on site accessibility. Have you ever wondered how easy it is for people with disabilities to access your site and then navigate around it?<\/p>\n","protected":false},"author":54213,"featured_media":136070,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[1117,4,34],"tags":[3150,10029,641],"tutorials_categories":[],"class_list":["post-135618","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-multisite","category-plugins","category-themes","tag-accessibility","tag-free-plugins","tag-free-themes"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/135618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/54213"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=135618"}],"version-history":[{"count":7,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/135618\/revisions"}],"predecessor-version":[{"id":209532,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/135618\/revisions\/209532"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/136070"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=135618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=135618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=135618"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=135618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}