Why your website needs to be ADA compliant<\/h2>\n\n\n\n\n\nThe Americans with Disabilities Act (ADA)<\/a> is a law regarding discrimination against people with disabilities. It includes protections that prohibit businesses from denying housing or jobs based on a person’s abilities and require fair access to education, transportation, public spaces, and more.<\/p>\n<\/div>\n\n\n\n\n\t\t<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\tIs your #WordPress site ADA complaint? 4 tips for better #a11y \u2139\ufe0f<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\nThese protections extend to all electronic and information technology as well. ADA compliance impacts almost all websites, and it\u2019s always worth ensuring that your site is accessible<\/a> to as many people as possible.<\/p>\n\n\n\nHowever, the ADA specifically states that you must adhere to accessibility policies if you\u2019re a private employer with 15 or more staff members or if your business operates for the benefit of the public. State and local government agency websites (including school sites) must also be ADA compliant.<\/p>\n\n\n\n
A few of the accessibility standards for websites include:<\/p>\n\n\n\n
\n- Enabling visually impaired visitors to perceive your site’s content through the use of screen readers<\/li>\n\n\n\n
- Providing subtitles or transcriptions of audio content for deaf users<\/li>\n\n\n\n
- Supporting keyboard navigation so users who can’t use a traditional computer mouse can move around your site<\/li>\n\n\n\n
- Implementing accessible design to accommodate color-blind users and users with photosensitivity<\/li>\n<\/ul>\n\n\n\n
However, this list is by no means comprehensive. We’ll further discuss these requirements later in this post.<\/p>\n\n\n\n
If your site doesn\u2019t meet these standards, then you may find yourself in legal hot water. Even if you didn\u2019t intentionally exclude people with disabilities from being able to easily access and use your site, there may still be grounds for a lawsuit against you. This isn’t just theoretical – there have been some high-profile lawsuits over ADA website compliance, such as a Domino’s pizza lawsuit<\/a> that went all the way to the US Supreme Court.<\/p>\n\n\n\nCreating a more accessible website isn\u2019t just the right thing to do, it can also benefit your business. According to the World Health Organization (WHO), over one billion people have some type of disability. This equates to around 15% of the global population [1]<\/sup> \u2013 that\u2019s lots of potential new customers<\/a>!<\/p>\n\n\n<\/div>\n\n\n\nHow to create a WordPress ADA compliant site (four key tips)<\/h2>\n\n\n\n
Now that you know what the ADA is and why it\u2019s important, let\u2019s look at how you can make your WordPress website ADA-compliant. Here are four tips for creating a more accessible website.<\/p>\n\n\n\n
1. Understand what a WordPress ADA compliant website looks like<\/h3>\n\n\n\n
The U.S. Department of Justice has yet to release any official ADA compliance guidelines, but it has provided some recommendations. In particular, the ADA encourages organizations to follow the Web Content Accessibility Guidelines (WCAG)<\/a> 2.0 level AA.<\/p>\n\n\n\nThese guidelines state that visitors must be able to perceive all the information that appears across your website. This often means providing alternatives to your site’s media. For example, many popular sites \u2013 including YouTube \u2013 supply subtitles for their audio and video content:<\/p>\n\n\n
\n![\"A](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/05\/youtube-video-captions-2.png\")
<\/figure><\/div>\n\n\nVisitors should also be able to understand your content. To address this concern, it may help to provide additional guidance on how to interact with certain parts of your website. For example, you might use suggested input prompts to clarify the information that visitors should enter into your contact form<\/a>:<\/p>\n\n\n\n![\"A](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/05\/themeisle-contact-us.png\")
<\/figure><\/div>\n\n\nAdditionally, if a user enters incorrect information, then try to provide recommendations for fixing these input errors. This is far more helpful than simply displaying a generic error message.<\/p>\n\n\n\n
Some visitors may interact with your site via screen readers. For these people, descriptive alt text<\/a> can be vital for helping them understand your website\u2019s images:<\/p>\n\n\n\n![\"Creating](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/05\/wordpress-alt-text-1.png\")
<\/figure><\/div>\n\n\nPeople with visual or manual dexterity issues may find it easier to interact with your site using navigational controls such as a keyboard or keypad. For these users, it\u2019s important to have a clear and consistent navigational structure<\/a>.<\/p>\n\n\n\nYou may also want to provide a visual indication of the element that\u2019s currently ‘in focus’. This is the element that will be activated the next time the visitor performs an action, for example pressing the Enter<\/em> key on their keyboard.<\/p>\n\n\n<\/div>\n\n\n\n2. Review your website to see how compliant it currently is<\/h3>\n\n\n\n
Accessibility is a huge topic and there are many elements that go into creating a more user-friendly website. If you overlook just one factor related to accessibility, then it could prevent a potential customer from having a positive experience with your site.<\/p>\n\n\n\n
A web accessibility evaluation tool can often be invaluable for identifying the wide range of issues that can impact your site\u2019s usability. Website Accessibility Evaluation (WAVE)<\/a> is a suite of tools that can scan your site and list any potential problems:<\/p>\n\n\n\n![\"Test](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/05\/website-accessibility-evaluation-.png\")
<\/figure><\/div>\n\n\nYou can click the accompanying i<\/em> icon to view more information about each detected error. WAVE will even suggest resources that can provide deeper insight into each usability issue:<\/p>\n\n\n\n![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/05\/wave-accessibility-errors-.png\")
<\/figure><\/div>\n\n\nWAVE is limited to scanning a single page at a time. To accelerate this process, you may want to install the WAVE for Chrome<\/a> or WAVE for Firefox<\/a> extensions, which enable you to run WAVE on the webpage you’re currently viewing. <\/p>\n\n\n<\/div>\n\n\n\n3. Follow proven best practices for creating accessible websites<\/h3>\n\n\n\n
Once you’ve tested your site’s accessibility and compiled your results, then you can start addressing each concern you’ve identified. To start, it\u2019s important to take stock of your website\u2019s content and consider whether you can provide alternative outputs for all your media. <\/p>\n\n\n\n
Wherever possible, we recommend providing professionally transcribed subtitles for your audio and video content. However, there\u2019s also software that can auto-generate captions for you:<\/p>\n\n\n
\n![\"Auto-generating](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/05\/youtube-auto-generate.png\")
<\/figure><\/div>\n\n\nYou should also provide a text alternative to all your website\u2019s visuals. This can be invaluable for anyone who\u2019s experiencing your site via an accessibility tool such as a screen reader. In WordPress, then you can add alt text via the Media Library:<\/p>\n\n\n
\n![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/05\/wordpress-media-gallery.png\")
<\/figure><\/div>\n\n\nIt\u2019s also a good idea to avoid including text in your images. Large amounts of in-image text can make it difficult to describe your graphics using alt text alone. Instead, consider whether you can create a similar effect using code. For example, you might add the information you’re trying to convey as plain text and then style it using CSS<\/a>.<\/p>\n\n\n\nTo help support visitors with visual impairments, we recommend maintaining a contrast ratio of at least 4.5:1 for all your text. Your text should also be resizable by up to 200%. The trick here is to provide this flexibility without impacting your site\u2019s functionality, which will likely require thorough usability testing.<\/p>\n\n\n\n
If you want to learn more about the issues impacting your site, we recommend running your content through the WAVE tool and taking the time to read all of its suggested resources.<\/p>\n\n\n\n
The WCAG guidelines are widely accepted as the industry standard for accessibility. You might also want to refer to WebAIM\u2019s accessibility checklist<\/a>, which aims to condense the official WCAG 2.1 specifications<\/a>.<\/p>\n\n\n<\/div>\n\n\n\n4. Consider installing plugins to improve your site\u2019s compliance<\/h3>\n\n\n\n
As you might expect, there\u2019s no shortage of WordPress tools and plugins<\/a> that promise to help you achieve ADA compliance. You can scan your entire site for accessibility issues using WP ADA Compliance Check Basic<\/a>:<\/p>\n\n\n\n![\"A](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/05\/wp-ada-compliance-.png\")
<\/figure><\/div>\n\n\nThis plugin will suggest resources that provide more information about each detected issue. You\u2019ll also get a direct link to the affected code, which can be useful for resolving more complex accessibility problems.<\/p>\n\n\n\n
Another option is the Accessibility Checker<\/a> plugin, which aims to be a WordPress-specific WAVE alternative and lets you scan your entire site from inside your WordPress dashboard.<\/p>\n\n\n\nAs a website owner, there are lots of ways to make your site more accessible. However, your choice of WordPress theme<\/a> can undermine all of your efforts. Although there are many professionally-developed themes, even experienced WordPress designers may sometimes overlook important accessibility principles.<\/p>\n\n\n\nThe WP Accessibility<\/a> plugin can help you resolve issues that commonly occur with WordPress themes. After activating this plugin, navigate to Settings > WP Accessibility<\/em> in your WordPress dashboard:<\/p>\n\n\n\n![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2021\/05\/wp-accessibility-plugin-.png\")
<\/figure><\/div>\n\n\nHere, you\u2019ll find various accessibility-focused settings that you can turn on or off, depending on how your theme is set up. This includes adding an outline to the link :focus<\/code> state for better keyboard navigation, and using longdesc<\/code> to provide more information about an image\u2019s content.<\/p>\n\n\n\nIt’s important to note that there are no “plug and play” solutions for creating a 100% accessible website, despite what some plugins might claim. Plugins can be great for scanning your site for issues and making some tweaks, like those in WP Accessibility (here’s the plugin’s developer sharing his thoughts<\/a><\/em>). But be wary of any plugin that uses an “overlay” approach<\/a> and claims to offer 100% ADA compliance just by activating a plugin.<\/p>\n\n\nGo to top<\/a><\/div>\n\n\n\nCreate a WordPress ADA compliant website today<\/h2>\n\n\n\n\n\nMaking your website accessible to everyone isn’t just the right thing to do. It can also protect you against legal ramifications. By ensuring your site is Americans with Disabilities Act (ADA) compliant, you can also grow your potential customer base.<\/p>\n<\/div>\n\n\n\n
\n\t\t<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\t4 #a11y tips for creating an ADA compliant #WordPress site \u2139\ufe0f<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\nLet\u2019s quickly recap four tips for creating a WordPress ADA compliant website:<\/p>\n\n\n\n
\n- Understand what an ADA-compliant website looks like.<\/li>\n\n\n\n
- Review your website to see how compliant it currently is using a tool such as Website Accessibility Evaluation (WAVE).<\/li>\n\n\n\n
- Follow proven best practices for creating accessible websites.<\/li>\n\n\n\n
- Consider installing plugins such as WP ADA Compliance Check Basic<\/a> and WP Accessibility<\/a> to improve your site\u2019s compliance.<\/li>\n<\/ol>\n\n\n\n
For some other useful posts, you can read our guide on how to improve WordPress accessibility<\/a> as well as our collection of eight useful accessibility testing tools<\/a>.<\/p>\n\n\n\nDo you have questions about creating a WordPress ADA compliant website? Let us know in the comments section below!<\/em><\/strong><\/p>\n\n\n
The Americans with Disabilities Act (ADA)<\/a> is a law regarding discrimination against people with disabilities. It includes protections that prohibit businesses from denying housing or jobs based on a person’s abilities and require fair access to education, transportation, public spaces, and more.<\/p>\n<\/div>\n\n\n\n These protections extend to all electronic and information technology as well. ADA compliance impacts almost all websites, and it\u2019s always worth ensuring that your site is accessible<\/a> to as many people as possible.<\/p>\n\n\n\n However, the ADA specifically states that you must adhere to accessibility policies if you\u2019re a private employer with 15 or more staff members or if your business operates for the benefit of the public. State and local government agency websites (including school sites) must also be ADA compliant.<\/p>\n\n\n\n A few of the accessibility standards for websites include:<\/p>\n\n\n\n However, this list is by no means comprehensive. We’ll further discuss these requirements later in this post.<\/p>\n\n\n\n If your site doesn\u2019t meet these standards, then you may find yourself in legal hot water. Even if you didn\u2019t intentionally exclude people with disabilities from being able to easily access and use your site, there may still be grounds for a lawsuit against you. This isn’t just theoretical – there have been some high-profile lawsuits over ADA website compliance, such as a Domino’s pizza lawsuit<\/a> that went all the way to the US Supreme Court.<\/p>\n\n\n\n Creating a more accessible website isn\u2019t just the right thing to do, it can also benefit your business. According to the World Health Organization (WHO), over one billion people have some type of disability. This equates to around 15% of the global population [1]<\/sup> \u2013 that\u2019s lots of potential new customers<\/a>!<\/p>\n\n\n Now that you know what the ADA is and why it\u2019s important, let\u2019s look at how you can make your WordPress website ADA-compliant. Here are four tips for creating a more accessible website.<\/p>\n\n\n\n The U.S. Department of Justice has yet to release any official ADA compliance guidelines, but it has provided some recommendations. In particular, the ADA encourages organizations to follow the Web Content Accessibility Guidelines (WCAG)<\/a> 2.0 level AA.<\/p>\n\n\n\n These guidelines state that visitors must be able to perceive all the information that appears across your website. This often means providing alternatives to your site’s media. For example, many popular sites \u2013 including YouTube \u2013 supply subtitles for their audio and video content:<\/p>\n\n\n Visitors should also be able to understand your content. To address this concern, it may help to provide additional guidance on how to interact with certain parts of your website. For example, you might use suggested input prompts to clarify the information that visitors should enter into your contact form<\/a>:<\/p>\n\n\n Additionally, if a user enters incorrect information, then try to provide recommendations for fixing these input errors. This is far more helpful than simply displaying a generic error message.<\/p>\n\n\n\n Some visitors may interact with your site via screen readers. For these people, descriptive alt text<\/a> can be vital for helping them understand your website\u2019s images:<\/p>\n\n\n People with visual or manual dexterity issues may find it easier to interact with your site using navigational controls such as a keyboard or keypad. For these users, it\u2019s important to have a clear and consistent navigational structure<\/a>.<\/p>\n\n\n\n You may also want to provide a visual indication of the element that\u2019s currently ‘in focus’. This is the element that will be activated the next time the visitor performs an action, for example pressing the Enter<\/em> key on their keyboard.<\/p>\n\n\n Accessibility is a huge topic and there are many elements that go into creating a more user-friendly website. If you overlook just one factor related to accessibility, then it could prevent a potential customer from having a positive experience with your site.<\/p>\n\n\n\n A web accessibility evaluation tool can often be invaluable for identifying the wide range of issues that can impact your site\u2019s usability. Website Accessibility Evaluation (WAVE)<\/a> is a suite of tools that can scan your site and list any potential problems:<\/p>\n\n\n You can click the accompanying i<\/em> icon to view more information about each detected error. WAVE will even suggest resources that can provide deeper insight into each usability issue:<\/p>\n\n\n WAVE is limited to scanning a single page at a time. To accelerate this process, you may want to install the WAVE for Chrome<\/a> or WAVE for Firefox<\/a> extensions, which enable you to run WAVE on the webpage you’re currently viewing. <\/p>\n\n\n Once you’ve tested your site’s accessibility and compiled your results, then you can start addressing each concern you’ve identified. To start, it\u2019s important to take stock of your website\u2019s content and consider whether you can provide alternative outputs for all your media. <\/p>\n\n\n\n Wherever possible, we recommend providing professionally transcribed subtitles for your audio and video content. However, there\u2019s also software that can auto-generate captions for you:<\/p>\n\n\n You should also provide a text alternative to all your website\u2019s visuals. This can be invaluable for anyone who\u2019s experiencing your site via an accessibility tool such as a screen reader. In WordPress, then you can add alt text via the Media Library:<\/p>\n\n\n It\u2019s also a good idea to avoid including text in your images. Large amounts of in-image text can make it difficult to describe your graphics using alt text alone. Instead, consider whether you can create a similar effect using code. For example, you might add the information you’re trying to convey as plain text and then style it using CSS<\/a>.<\/p>\n\n\n\n To help support visitors with visual impairments, we recommend maintaining a contrast ratio of at least 4.5:1 for all your text. Your text should also be resizable by up to 200%. The trick here is to provide this flexibility without impacting your site\u2019s functionality, which will likely require thorough usability testing.<\/p>\n\n\n\n If you want to learn more about the issues impacting your site, we recommend running your content through the WAVE tool and taking the time to read all of its suggested resources.<\/p>\n\n\n\n The WCAG guidelines are widely accepted as the industry standard for accessibility. You might also want to refer to WebAIM\u2019s accessibility checklist<\/a>, which aims to condense the official WCAG 2.1 specifications<\/a>.<\/p>\n\n\n As you might expect, there\u2019s no shortage of WordPress tools and plugins<\/a> that promise to help you achieve ADA compliance. You can scan your entire site for accessibility issues using WP ADA Compliance Check Basic<\/a>:<\/p>\n\n\n This plugin will suggest resources that provide more information about each detected issue. You\u2019ll also get a direct link to the affected code, which can be useful for resolving more complex accessibility problems.<\/p>\n\n\n\n Another option is the Accessibility Checker<\/a> plugin, which aims to be a WordPress-specific WAVE alternative and lets you scan your entire site from inside your WordPress dashboard.<\/p>\n\n\n\n As a website owner, there are lots of ways to make your site more accessible. However, your choice of WordPress theme<\/a> can undermine all of your efforts. Although there are many professionally-developed themes, even experienced WordPress designers may sometimes overlook important accessibility principles.<\/p>\n\n\n\n The WP Accessibility<\/a> plugin can help you resolve issues that commonly occur with WordPress themes. After activating this plugin, navigate to Settings > WP Accessibility<\/em> in your WordPress dashboard:<\/p>\n\n\n Here, you\u2019ll find various accessibility-focused settings that you can turn on or off, depending on how your theme is set up. This includes adding an outline to the link It’s important to note that there are no “plug and play” solutions for creating a 100% accessible website, despite what some plugins might claim. Plugins can be great for scanning your site for issues and making some tweaks, like those in WP Accessibility (here’s the plugin’s developer sharing his thoughts<\/a><\/em>). But be wary of any plugin that uses an “overlay” approach<\/a> and claims to offer 100% ADA compliance just by activating a plugin.<\/p>\n\n\n Making your website accessible to everyone isn’t just the right thing to do. It can also protect you against legal ramifications. By ensuring your site is Americans with Disabilities Act (ADA) compliant, you can also grow your potential customer base.<\/p>\n<\/div>\n\n\n\n Let\u2019s quickly recap four tips for creating a WordPress ADA compliant website:<\/p>\n\n\n\n For some other useful posts, you can read our guide on how to improve WordPress accessibility<\/a> as well as our collection of eight useful accessibility testing tools<\/a>.<\/p>\n\n\n\n Do you have questions about creating a WordPress ADA compliant website? Let us know in the comments section below!<\/em><\/strong><\/p>\n\n\n\n
How to create a WordPress ADA compliant site (four key tips)<\/h2>\n\n\n\n
1. Understand what a WordPress ADA compliant website looks like<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n<\/figure><\/div>\n\n\n<\/figure><\/div>\n\n\n2. Review your website to see how compliant it currently is<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n<\/figure><\/div>\n\n\n3. Follow proven best practices for creating accessible websites<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n<\/figure><\/div>\n\n\n4. Consider installing plugins to improve your site\u2019s compliance<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n<\/figure><\/div>\n\n\n:focus<\/code> state for better keyboard navigation, and using longdesc<\/code> to provide more information about an image\u2019s content.<\/p>\n\n\n\nCreate a WordPress ADA compliant website today<\/h2>\n\n\n\n
\n