What does it mean to make your website accessible? Is that the same as being ADA compliant? Here are 8 accessibility requirements for websites.
The American Disabilities Act (ADA) was intentionally designed it to evolve. Places of public accommodation previously only meant physical spaces. Since the widespread use of the internet and websites, that meaning of “places” now includes websites and apps.
Is it important for your website to be ADA compliant? Websites and mobile apps are now essential places for retail, education, communication, and connecting with others, and protected by the ADA.
What are the actual requirements for website ADA compliance? Read below to learn about the areas where you’ll need to update.
The following accessibility requirements for websites will help your organization or company website maintain ADA compliance.
What Types of Websites are Mandatory?
First, let’s list the categories in which accessibility is mandatory for websites that affect interstate commerce:
A) Hospitality: inn, hotel, motel, or other places of lodging, except for an establishment located within a building that contains not more than five rooms for rent or hire and that is actually occupied by the proprietor of such establishment as the residence of such proprietor.
B) Food Services: a restaurant, bar, or other establishment serving food or drink;
C) Cultural Centers: a motion picture house, theater, concert hall, stadium, or other places of exhibition entertainment; an auditorium, convention center, lecture hall, or other places of public gathering;
E) Commerce & Retail: a bakery, grocery store, clothing store, hardware store, shopping center, or other sales or rental establishment;
F) Personal and Professional Services: a laundromat, dry-cleaner, bank, barbershop, beauty shop, travel service, shoe repair service, funeral parlor, gas station, office of an accountant or lawyer, pharmacy, insurance office, professional office of a health care provider, hospital, or other service establishments;
G) Public Transportation: a terminal, depot, or other station used for specified public transportation;
H) Public Display: a museum, library, gallery, or other places of public display or collection;
I) Recreational: a park, zoo, amusement park, or other places of recreation;
J) Education: a nursery, elementary, secondary, undergraduate, or postgraduate private school, or other places of education;
K) Social Services: a daycare center, senior citizen center, homeless shelter, food bank, adoption agency, or other social service center establishment; and
L) Exercise or Recreation: a gymnasium, health spa, bowling alley, golf course, or other places of exercise or recreation.
If your business falls under any of these categories, let’s get to work. Fill out the form below so we can get started. I will provide a FREE evaluation to start and a quote on the costs if you don’t choose to do these changes yourself. Now, onto all of that work that you’ll need to make your site ADA Compliant:
Warning on new tab or window
This is to let the site visitor know they are opening a new page on a different website. This is also known as targeting a blank window or tab and is a very standard procedure.
“ALT” attribute
This is a simple and easy-to-implement, It’s also a good SEO standard of practice. This is the text seen when an image is not loaded, and for accessibility, it can be used as a description of the image, such as the person’s name when presenting a bio.
Form field “label”
This actually has a few benefits including accessibility. The label is that bit of text to tell you if this is “First Name” or “Full Name”. The designer in me wants this to not be a requirement as labels often add more empty space and take up more of the page on longer forms.
Descriptive Text with Purpose in Links
When adding links to images, icons, menu items, or paragraph text, it’s important to include what is implied. For example, you might have a contextual button to sign up for a service that just says “Read More”. In this case, you want to include what this implies… “link to read more about accessibility on the ADA website”.
To include this, you’ll need to add an “attribute” to your link inside the a-tag along with the link url… such as… aria-label=”link to read more about accessibility on the ADA website”
Avoid link text like “Click Here,” “More,” and “Read More.” These kinds of links can be confusing when a screen reader reads them out of context.
As you can see, updating your website to include descriptive text will take a lot of time and labor.
H1 Header
Your page title is generally always your first “header” and uses the h1-tag. When writing your website copy, be sure to use the text app’s header style to apply H1 to your page title. This carries over when you copy-paste your text from Word or Google Docs. Unfortunately, Apple’s Pages app has not caught up for HTML compliance.
“Lang” attribute
This is fairly self-explanatory. Be sure to “assign” the language of your website.
Where Does HREFLANG Tag Go?
Google Support tells us that the tag can be implemented in one of three ways (you only need to choose one).
- As a link in the HTML head of the page
- In the HTTP header (for non-HTML files like PDFs)
- On the XML sitemap
This link includes more information on what code to use for the HTML lang Attribute
Frame “title” attribute
Again, this is straightforward and fairly self-explanatory. Just add an attribute to your frames and iframes such as title=’YouTube Video of Cute Puppies and Kittens’
Include “Skip link”
Skipping links in a page sounds counter-intuitive… but this is activated when using the TAB key as it cycles through the page’s links. The “skip link” option is usually at the top, above the menu, which, when activated, jumps to the main page content. When you need it, it’s very useful and decreases the times one needs to hit the TAB key to get through drop-down menu lists and lengthy menus. Try it out here: https://developer.mozilla.org/en-US/ – And unfortunately, Apple’s Safari browser does not work for this in my tests. This might be directly connected to how my system is set up but does not help with development.
How do I know if my website has any violations?
Here’s a very easy way to get a list of all the violations of your website. This will help you target what you need to do and how to prioritize making those changes. Simply follow this link and enter the website URL to get a list.
WAVE Web Accessibility Evaluation Tool
Why wasn’t my website coded this way before?
The internet is an always evolving and changing thing. Next year we will learn that we have to make more adjustments, more settings, improvements, etc. your current website isn’t incorrectly coded. It is just now considered incompletely coded. Let’s fix this! Fill out the form below so we can get started and do an evaluation to provide you with a quote.
What does it mean to make your website accessible? Is that the same as being ADA compliant? Here are 8 accessibility requirements for websites.
The American Disabilities Act (ADA) was intentionally designed it to evolve. Places of public accommodation previously only meant physical spaces. Since the widespread use of the internet and websites, that meaning of “places” now includes websites and apps.
Is it important for your website to be ADA compliant? Websites and mobile apps are now essential places for retail, education, communication, and connecting with others, and protected by the ADA.
What are the actual requirements for website ADA compliance? Read below to learn about the areas where you’ll need to update.
The following accessibility requirements for websites will help your organization or company website maintain ADA compliance.
What Types of Websites are Mandatory?
First, let’s list the categories in which accessibility is mandatory for websites that affect interstate commerce:
A) Hospitality: inn, hotel, motel, or other places of lodging, except for an establishment located within a building that contains not more than five rooms for rent or hire and that is actually occupied by the proprietor of such establishment as the residence of such proprietor.
B) Food Services: a restaurant, bar, or other establishment serving food or drink;
C) Cultural Centers: a motion picture house, theater, concert hall, stadium, or other places of exhibition entertainment; an auditorium, convention center, lecture hall, or other places of public gathering;
E) Commerce & Retail: a bakery, grocery store, clothing store, hardware store, shopping center, or other sales or rental establishment;
F) Personal and Professional Services: a laundromat, dry-cleaner, bank, barbershop, beauty shop, travel service, shoe repair service, funeral parlor, gas station, office of an accountant or lawyer, pharmacy, insurance office, professional office of a health care provider, hospital, or other service establishments;
G) Public Transportation: a terminal, depot, or other station used for specified public transportation;
H) Public Display: a museum, library, gallery, or other places of public display or collection;
I) Recreational: a park, zoo, amusement park, or other places of recreation;
J) Education: a nursery, elementary, secondary, undergraduate, or postgraduate private school, or other places of education;
K) Social Services: a daycare center, senior citizen center, homeless shelter, food bank, adoption agency, or other social service center establishment; and
L) Exercise or Recreation: a gymnasium, health spa, bowling alley, golf course, or other places of exercise or recreation.
If your business falls under any of these categories, let’s get to work. Fill out the form below so we can get started. I will provide a FREE evaluation to start and a quote on the costs if you don’t choose to do these changes yourself. Now, onto all of that work that you’ll need to make your site ADA Compliant:
Warning on new tab or window
This is to let the site visitor know they are opening a new page on a different website. This is also known as targeting a blank window or tab and is a very standard procedure.
“ALT” attribute
This is a simple and easy-to-implement, It’s also a good SEO standard of practice. This is the text seen when an image is not loaded, and for accessibility, it can be used as a description of the image, such as the person’s name when presenting a bio.
Form field “label”
This actually has a few benefits including accessibility. The label is that bit of text to tell you if this is “First Name” or “Full Name”. The designer in me wants this to not be a requirement as labels often add more empty space and take up more of the page on longer forms.
Descriptive Text with Purpose in Links
When adding links to images, icons, menu items, or paragraph text, it’s important to include what is implied. For example, you might have a contextual button to sign up for a service that just says “Read More”. In this case, you want to include what this implies… “link to read more about accessibility on the ADA website”.
To include this, you’ll need to add an “attribute” to your link inside the a-tag along with the link url… such as… aria-label=”link to read more about accessibility on the ADA website”
Avoid link text like “Click Here,” “More,” and “Read More.” These kinds of links can be confusing when a screen reader reads them out of context.
As you can see, updating your website to include descriptive text will take a lot of time and labor.
H1 Header
Your page title is generally always your first “header” and uses the h1-tag. When writing your website copy, be sure to use the text app’s header style to apply H1 to your page title. This carries over when you copy-paste your text from Word or Google Docs. Unfortunately, Apple’s Pages app has not caught up for HTML compliance.
“Lang” attribute
This is fairly self-explanatory. Be sure to “assign” the language of your website.
Where Does HREFLANG Tag Go?
Google Support tells us that the tag can be implemented in one of three ways (you only need to choose one).
This link includes more information on what code to use for the HTML lang Attribute
Frame “title” attribute
Again, this is straightforward and fairly self-explanatory. Just add an attribute to your frames and iframes such as title=’YouTube Video of Cute Puppies and Kittens’
Include “Skip link”
Skipping links in a page sounds counter-intuitive… but this is activated when using the TAB key as it cycles through the page’s links. The “skip link” option is usually at the top, above the menu, which, when activated, jumps to the main page content. When you need it, it’s very useful and decreases the times one needs to hit the TAB key to get through drop-down menu lists and lengthy menus. Try it out here: https://developer.mozilla.org/en-US/ – And unfortunately, Apple’s Safari browser does not work for this in my tests. This might be directly connected to how my system is set up but does not help with development.
How do I know if my website has any violations?
Here’s a very easy way to get a list of all the violations of your website. This will help you target what you need to do and how to prioritize making those changes. Simply follow this link and enter the website URL to get a list.
WAVE Web Accessibility Evaluation Tool
Why wasn’t my website coded this way before?
The internet is an always evolving and changing thing. Next year we will learn that we have to make more adjustments, more settings, improvements, etc. your current website isn’t incorrectly coded. It is just now considered incompletely coded. Let’s fix this! Fill out the form below so we can get started and do an evaluation to provide you with a quote.