How to Check a Webpage for Accessibility

This article is going to help you understand base level site accessibility, as well as help you determine if your site is accessible, and how to fix the most commonly overlooked errors.

What exactly is Website Accessibility and why do we need it?

Having an accessible website means that with your site’s user interface, all of the content is available for your visitors to consume, no matter what their mode of visitation is. For instance, some users may need to increase their font size or zoom level to read your content. Other users, may require special screen formatting and colors to be able to read your content. And other users may use screen reading technology that will literally verbally read them the content of your website.

As you can imagine, if your website is not set up properly, your site will not properly support those assistive technologies and settings. 

It is important for most site owners to take a look at their base level of accessibility. You want your site to be accessible to as many users as possible, and you also want to avoid any legal trouble with accessibility rules! Fortunately, improvements in technology have it easier to have a relatively accessible site. 

Below are some things to look for on your website and why they are important.


Is your site navigable by keyboard?

Some users do not use a mouse, touch screen, or touchpad. Their assistive technology uses button navigation (such as tab, shift+tab, arrow keys, enter press commands) to access the content and functionality of your website.

How to test keyboard navigation

Load your web page and tab through it. As you tab through, all of the links and actionable elements (buttons, controls, fields, etc) should trigger the same functionality that they would if you clicked or tapped using a mouse, touch screen or track pad. If some content or functionality is not able to be triggered, then you have found an accessibility error. 

finger pressing tab key on keyboard

For users that make use of screen reader assistive technology, links are literally verbally read to the visitor, and often, link reading is a first choice in way of quickly navigating your site. In some cases, visitors would like to skip what could potentially be a very long list of links in your header or main menu. To skip this very long list of links, a “skip to content” or “skip navigation” link is very helpful to have right at the very beginning of the page. This allows the user to jump past that long list and have the content of the page be the next thing to be read.

skip to content

Load your web page and tab one time. The first link that you see should be a link that indicates that when you press enter, you will skip to the content area of the page, bypassing anything in the main menu, including any global navigation. If you do not see a “skip” link appear, or when you press enter and the next tab you press does not bypass the header and global navigation, you have found an accessibility error.


Is the page still readable and functional when you Zoom in to 200%?

One of the most common assistive technologies is the zoom feature built into the browser. Many people need this to help them comfortably use a site, so you want to make sure that your site is still functional when you zoom in on it.

zoom level

How to test at 200% zoom level

Load your web page (preferably in a modern version of Chrome, Safari or Firefox) and press Ctrl and + (or for Mac users, Command and +) several times until you see the notification of zoom level reads 200%. Scroll through your site and look around. If you find that something has has become invisible, obscured, or somehow unusable, then you have found an accessibility error.

(When you are done testing at 200%, to zoom back out, press Ctrl {or Command on Mac} and – sign until you get back to 100%.)


Is your minimum font size at least 16px?

Why: Like the zoom level check, checking for extra small font sizes is important because readability issues is one of the most common problems that visitors encounter. Any text presented at a size smaller than 16px is difficult for many people to read.

HOW TO TEST YOUR FONT SIZES

First, we highly recommend using Chrome so that you can use the Font Ninja Chrome Extension!

Once you have installed Font Ninja, just load the page where there is a font you would like to test, click the Font Ninja icon, then hover over any font in question. The first number under the font name (one closest to the left) will show you the rendered font size. If it is smaller than 16px, you have found an accessibility error.

Watch the video below for an example:


Are your overlapping page elements presented at a contrast ratio of 4.51:1 or greater?

When you have elements that overlap one another, or are presented on top of a background image or color, if the foreground and background colors are not sufficiently contrasting, they are hard for some users to see, or maybe not visible to them at all.

How to test your foreground/background color contrast ratio

Again, we highly recommend using Chrome so that you can take advantage of some great Chrome extensions like ColorZilla! ColorZilla can be used in coordination with WebAim’s Contrast Checker to more easily determine if two colors that overlap are sufficiently contrasting for most visitors to comfortably read.

  • After you have installed ColorZilla, open the page that contains the colors that you want to test.
  • Click on the ColorZilla Icon (looks like an eyedropper), select “Pick color from page” and use the crosshair icon to click and select one of the colors you would like to test.
  • Repeat the above step to select the second color.
  • After that, visit WebAim’s Contrast Checker tool.
  • Click the ColorZilla icon again and this time choose “Picked Color History”
  • Choose one of the colors and look for the box that is marked with an # — the value in the box to the right of the # is the hexadecimal number that identifies that very specific shade of color. Copy that hexadecimal number and paste it into the WebAim Foreground or Background color field. (Be sure to leave the # in the WebAim tool’s value)
  • Do the same steps as above for the second color that you recorded.
  • Once you have both colors in the tool, click outside of the color fields on the WebAim tool so that it will re-run it’s tests with your colors.
  • Scroll down to see the results of your test! To pass the most critical tests, your contrast ratio should be at least 4.51:1.

Watch the video below for an example:


Does any area that uses color to convey information have an alternate (and accessible) way to convey the same information?

Not everyone perceives color in the same way, so presenting information that is only discernible via an element’s color is not a reliable way to make sure that it is understood by all visitors. (For example, someone may have a web page showing a list of restaurants with a note at the top that says “Restaurants listed in red do not offer take-out.” If I can’t identify which are listed in red, that list is not accessible to me. A fix would be to change the approach to “Restaurants listed with a * do not offer take-out.” Another common example is when a filled out form returns an error for an incomplete or incorrect field. Is there an error indicator that does not rely on color to indicate where the error is?)

How to test for areas of information that are conveyed only by color

It can be hard to imagine your page without color, so checking your page to identify where color is the only way that certain information is presented would be just the first step. But, it’s still a first step! Open the page to test and really look hard for anything that conveys information only using color. You’re looking for things like tables that note specific information by color only, or form error notices that simply highlight fields that are affected. Color alone is not enough!

(Here is an article on Envato Tuts that shows how an accessible site can be put together, including examples of how certain elements of a site may be perceived by some people.)

If you want to get a pretty good idea of how your page might look to someone who perceives color differently than you do, you can try an Extension for Chrome called “Let’s Get Color Blind” which will shift the colors on your site to simulate how someone else might see your site.

If you want to see an even more dramatic presentation of your site with all color data removed, you can use the GreyScale Chrome extension. This may help you to visualize your site entirely without color, especially for testing purposes.

Watch the video below for an example:


Why: Descriptive titles and links are useful for any users, but for people that use assistive technologies like screen readers, descriptive titles are important because the readers often take these elements out of context. So for example, if you were being read a page link by link, you might hear the screen reader say “home, contact, about us, products” which would be considered descriptive enough to be useful. However, if your page did not have descriptive links, you might hear something like “more info, click here, click here, click here, download” without really knowing exactly what those links are going to do. That’s not useful at all, and wouldn’t be considered accessible. For page titles, this may be the first thing that is read to a user that helps them understand what exactly is on the page. If your page title is “Here are some great ideas” then that’s not very useful. However, if you changed it to “Here are some great ideas for fixing accessibility issues” then that would be much more useful. 

First, load the page that you want to test. 

To check the title: In the browser window, in the tab itself, hover over the text that you see there in the tab. That is the page title. If that text does not give a representation of content that the page contains, then you have found and accessibility error.

To check the links: Scan through the entire page and read the link text out of context with the rest of the content around it. If you find a link that says “click here” or “more info” or something similar where the link itself is not clear about what will happen when clicked, then you have found an accessibility error.


Does your page use headings properly?

Behind the scenes in the code of your page are some special tags that designate sections and the hierarchical headings of those sections should clearly state what is in the content of those sections. These headings are used by screen readers to help users quickly navigate to different sections of the page and identify if that section has the information they are looking for. If page headings are not properly used, then screen readers can have a hard time delivering people to the proper content, or the user may not recognize that they are in the correct section for the content they’re seeking.

How to test your page headings

Once more, we really recommend Chrome for this one as there’s a really handy Chrome Extension called HeadingsMap, which will help you visualize the hierarchy of your headings as well as quickly see if they do a good job of giving a quick overview of the contents of your page.

  • One you have HeadingsMap installed on your chrome, open the page that you want to test.
  • Click the HeadingsMap icon on the toolbar. The headings inspector will open on the left hand side of the browser window. In that inspector, you will see your title, and all of your headings listed. (If it’s not listed there, then it’s not technically a heading!)
  • The first line that you will see (one without a number to the left of it) will be your page title. This is the text that will show up if someone bookmarks your page and is the main link text that shows up in search results. Check this to make sure it gives a good, but brief, description of what the page content covers.
  • The next part after the title are the different headings on your page. Look for the top level heading (marked with a 1) – it should be at the top of the list and be much like the page title, in that it gives a good but brief description of the content or topic of the page.
  • Look for the second level headings (these will be marked with 2) – they should come after the top level heading, structurally. Each of these headings should be descriptive of the content that comes after them. (For example, look for wording that is more like a tagline or marketing phrase –these should not technically be headings.)
  • Look for third level headings – these should only come directly after second level headings, and be descriptive of the content that comes right after them.
  • Same for all of the other level of headings — they should be hierarchical and accurately and briefly describe content that comes right after them.

If your headings are out of order or if their text does not accurately describe the content of your page, then you have found an accessibility error.

Watch the video below for an example:


Do your foreground images contain alt text, and is it descriptive?

Why test: First off, alt text simply means “alternative text” and is defined on an image tag as the attribute “alt” — this is text that will show if for some reason the image does not load, or for the sake of accessibility, text that will be read to the user if they cannot see the image. This is always important, but it is especially important if you have an image that presents text or information embedded in raster data.

How to test if your images contain alt text and if it is descriptive

How to test if your images contain alt text and if it is descriptive…

Option 1: If your site uses WordPress and a modern theme, you are probably lucky! Most many themes will take the alt text from your image objects in the media gallery and use that content to populate the alt text for every instance on the page. In these cases, the fix is pretty simple! Just visit your media gallery and check each image for the presence of good, descriptive alt text. If you don’t find it, add it… make sure that the text accurately describes what the image presents to the visitor.

Option 2: Your site’s theme doesn’t appear to automatically add the alt text, but you have an SEO plugin like Rank Math installed. The SEO plugin here will probably save you some work! Since alt text is important for SEO as well as accessibility; if you open each page or post in the WordPress standard editor, your SEO plugin should tell you if it finds any images that are missing alt text. You can use that information to edit the images on the page and add that alt text by hand. Again, be sure that when you add that alt text, you’ve accurately described what the image depicts.

Option 3: Maybe you don’t have WordPress, or any other CMS that has an SEO plugin, or you don’t want to use one. Testing will be a little more work, but you can do this by hand, page-by-page in the browser. Here is how to do that:

  1. Open the page to test and scroll until you find an image. Here you are going to use your dev tools again. 
  2. Right click on the image and select “inspect”
  3. In the Elements panel, you will see an <img> tag highlighted. Look for the alt attribute on the tag.

If you do not find an alt attribute, or if the alt attribute is empty, or not descriptive of what the image is of, then you have found an accessibility error.


Are your forms properly formatted?

Forms are complex components and can be very confusing for people who visit your site with screen readers if you don’t have the proper tags in place. There are several things that you need to check on your forms to make sure they’re readable for your visitors.

How to test your forms for accessibility issues

What and how to test: Load the page in question and let’s check some things.

Tab order – Let’s start with the simplest one. Tab order is simply the order in which you tab through a form’s fields. Start by clicking in the first field of the form, or navigating there by tabbing from the top of the page. Tab through the form. If your cursor does not focus on the fields in the order that they are visually presented, then you have found an accessibility error.

Error messages – This is again an issue of displaying information out of context of any visual change to the form. Try submitting the form without all of the fields filled out properly. In the error messaging that appears, does it explain what field it is that has an issue? If it does not, then you have found and accessibility error.

Field labels – Each text field, text area, or any other kind of field that is present should have a label associated with it. This label is going to be what is read to a screen reader visitor. This must be an actual label, not a placeholder or other text, as that will not necessarily be read to the user. 

  1. To check this, right click on each field’s visible label and “inspect”
  2. You should see a <label> tag. It can be used in two ways. First, the label can wrap the text that is the visible label, or second, it can wrap just the text, and the label tag can include the “for” attribute which should match the ID of the field that it goes along with. 
  3. If you don’t see the label tag, or if the label tag is not wrapping the input or not referring to the id of the input in its “for” attribute value, then you have found an accessibility error.

Radio button, checkbox groups or other input group (or fieldset) legend – in addition to the labels that we talked about above, if a group of input elements are clustered together to help gather data from visitors, then a fieldset and a legend will need to be present. To check this, look for any groups of inputs, inspect, and make sure that the fieldset and legend tags are present. 

This can get a little complex, so for an example of proper formatting of field groups, you should check out the Grouping Controls article on w3.org .


Go slow, think it through, and make some notes

The important thing about accessibility testing is to make sure you’ve thought about how users with different abilities might experience your site. It’s not always clear cut, and there is not a single tool that will run all of the tests for you and give your site a certification of accessibility. Not even what we’ve given you here in this article is an exhaustive list. It’s possible that you can use this (or any other) guide and still miss some important issues. 

If you would like help with accessibility testing on your site, just reach out to us!