No automatic accessibility scanner can find all accessibility issues on your website. This means that manual accessibility testing is required to make sure your website is compliant.
Website Developer Testing Tools
Test your keyboard navigation.
Learn more about keyboard accessibility.
How to test
- Open (or refresh) the webpage you are testing.
- Navigate through your entire page with only your keyboard. Use the Tab, Shift + Tab, Enter, Space, Escape, and arrow keys to move through your page content.
- Confirm that you can interact with all of the content on your page with only your keyboard.
- Confirm that you can move through all of your content in a logical reading order.
For example, can you access all of your header and footer content and your search bar? Can you open and close all of your dropdowns and navigation panes? Are you able to navigate into and out of any pop-up windows and forms?
Most common issues
- Unable to access all content. There are some things on your page that you can't get to with just your keyboard, making it completely inaccessible to folks who don't use a mouse.
- Keyboard traps. Sometimes your keyboard focus gets "trapped" on parts of your site and there is no way to get out of it without navigating entirely out of the page browser. Pay particular attention to this with pop-up items.
- Illogical tab order. If you can reach all of your content with a keyboard, does the order of your page content make sense?
Easiest way to fix it
- Check your tabindex, make sure you are using symantic HTML, and confirm that any ARIA roles or attributes are correct.
Tools and Resources
Test your skip link.
Learn more about keyboard accessibility.
What is a skip link?
A "skip link" is a link at the start of your webpage that lets users jump passed your repetitive content to your main webpage information.
Repetitive content can include navigation menus, search bars, side navigation panes, breadcrumb trails, and anything else you might have at the top of each of your webpages.
How to test
- Open (or refresh) the webpage you are testing.
- Press the Tab key on your keyboard.
- Confirm that a link appears and receives keyboard focus. This link should say "Skip to main content" (or something similar).
- Press the Enter key on your keyboard.
- Confirm that the link takes your keyboard focus to the main webpage content.
Most common issues
- No skip link is available. A webpage might not have a skip link to quickly move users past your repeated content.
- A skip link is available, but doesn't work right. Your page might have a skip link, but the skip link "target" might not be the main webpage content.
Easiest way to fix it
- Add a skip link to move users passed your navigation elements and repetitive content. Make sure they can get to your main webpage content easily.
- Check your landmarks and skip link target to make sure your skip link is taking users to the main webpage content.
- Learn more about creating "Skip Navigation" links.
Tools and Resources
Test your landmarks.
How to test
- Run the WAVE Evaluation Tool or the Landmark Extension. Both will identify all of the landmark regions on your webpage.
- Confirm that all of your page content is in a landmark.
- Confirm that your page only has ONE header, footer, and main landmark.
- Confirm that all of your landmarks have unique names.
Most common issues
- No landmarks are available. Be sure you include landmarks on your webpage. This improves navigation and helps people find what they are looking for.
- Landmarks have the same name. Landmarks with the same name can be confusing and make it more difficult to navigate your website.
- Multiple header, footer, or main landmarks. Each page should have ONE header, footer, and main landmark.
Easiest way to fix it
- Add unique names to your landmarks. Each landmark name should be unique.
- Use nav, aside, or section landmarks for added page structure. Learn more about different HTML and ARIA landmarks.
Tools and Resources
Test your forms.
How to test
- Review your webpage for any input or login forms.
- Confirm that all forms have provided instructions. These can be as simple as specifying what the form is for or what form fields are required.
- Keyboard test your form to make sure all input fields, dropdown menus, radio buttons, and submission buttons are keyboard accessible.
- Confirm that input labels are clear and provide an input example when a specific format is required.
- Submit a test form and review all error messages.
- Confirm that error messages are clear and not color dependent.
Most common issues
- Color alone is used to show input error. Typically, red is used when this happens, but color alone should never be used to provide meaning.
- Error message is provided, but it is vague. Just telling us that there is a form error isn't helpful. Let us know specifically what is wrong.
- Form labels are unclear or incomplete. Users can't give you the information you need if your labels are incomplete.
- If a form needs a specific input, an example is not provided. This is mostly an issue with email addresses, phone numbers, and zip codes.
Easiest way to fix it
- Add clear text labels to forms and form input errors, in addition to using color. Make it crystal clear to your end user what the issue is and how to fix it.
- Provide examples of how you need information submitted in your form. For example, an email input form might have an example for how an email address should be structured: example@berkeley.edu.
Tools and Resources
Test for moving content.
How to test
- Review your webpage. Is there anything that is moving, blinking, scrolling, or updating on its own?
- If yes, confirm that you can pause, stop, or hide the moving content.
Moving content could include animations, countdown timers, scrolling content, background videos, or anything else that moves automatically on your site.
Most common issues
- Carousels commonly scroll through content automatically.
- Background videos are frequently added to websites, particularly homepages.
Easiest way to fix it
Be sure to confirm that anything that moves automatically has an easy-to-find mechanism to pause, stop, or hide the moving content. Make sure this mechanism is keyboard accessible and has good color contrast.
Tools and Resources
Test your page size.
How to test
- In your browser, set your viewport to 1366 x 768px. If you are using Chrome, this can be completed in DevTools.
- Set your zoom to 200%. Review your webpage and page function.
- Check your webpage and all page content with both your mouse and keyboard.
- Confirm that all content can be reached, all text is legible, nothing is missing, and nothing is overlapping.
Most common issues
- Overlapping content. When a page is resized, content elements might overlap one another. Check to make sure everything is structured propertly and nothing is hidden behind other content elements.
- Loss of functionality. Sometimes when a page is resized, things don't work like they should. Check any dropdown menus, radio buttons, and form fields.
- Loss of page content. It is not uncommon for items to disappear when a page is resized.Be sure to review your navigation elements, dropdown menus, and footer content.
Easiest way to fix it
- Avoid fixed container sizes.
- Make sure your layout can be support text resizing.
- Use em units, percent, or named font sizes
Tools and Resources
Test your videos and podcasts.
Learn more about captions and transcripts.
How to test
- Review any videos or podcasts linked or embedded on your site.
- Confirm that your videos have accurate captions or your podcasts have a transcript available on the same page.
Most common issues
- Videos without accurate captions. Auto-captions aren't enough - all videos are required to have accurate, human edited captions.
- Podcasts without direct access to a transcript. Make sure your links are descriptive.
Easiest way to fix it
The easiest way to fix captions is to either:
- Edit the captions yourself or,
- Hire a 3rd party vendor to make a caption file for your video.
The easiest way to fix a podcast issue is to:
- Make sure you have an accurate transcript available and,
- Make sure that the transcript is available on all platforms that the podcast is.
Tools and Resources
Test your color contrast.
Learn more about accessible colors and Berkeley branding.
How to test
- Run the WAVE evaluation tool. WAVE will identify potential color contrast concerns, but it might not find all of your contrast issues.
- Use the WebAIM Color Contrast Checker to find the hex code of your text color and your background color. The eyedropper tool is great for this.
- See if your color combinations PASS or FAIL. If your colors pass or fail is dependent on the size of your text.
Most common issue
- Red text on a white background
- Yellow or gold text on a white background.
These color combinations are notoriously difficult to meet color contrast requirements.
Easiest way to fix it
Adjust your text color or background color until they meet color contrast requirements. Be sure to check out the Berkeley Color Pairings tool to find accessible color combinations.
Color contrast requirements for WCAG 2.1 AA
- Large text must meet a 3:1 contrast ratio. This will typically be your header text, or other navigation elements.
- Small text must meet a 4.5:1 contrast ratio. This will typically be your paragraph text.
Tools and Resources
Test your color use.
Learn more about colors in charts and graphs.
How to test
- Review your website for places where color is used to convey meaning. This might look like using "green" for success or "red" for failure. Pay particular attention to graphs and charts, links, and required form fields.
- Confirm that the information presented in color is also available in a text alternative.
Most common issues
- Charts and graphs that use color to show data.
- Links that only use color to set them apart from paragraph text.
- Red text to show that information is urgent.
Easiest way to fix it
- Add patterns, texture, or labels to your chart information. Or all three! Just make sure there is additional distinciton between your data.
- Underline your links. This is the easiest way to make sure folks know where your links are.
- Add astricks or icons to your content to show that the information is important.
Tools and Resources
Test your headings.
Learn more about headings.
How to test
-
Run the WAVE evaluation tool. WAVE will identify all heading levels on your page.
-
Confirm that your headings are present, in order, and provide structure to your page content.
Most common issues
- Heading levels are skipped or used out of order. Make sure your heading levels are in hierarchical order.
- Empty heading levels. This means that your heading level doesn't have any content.
Easiest way to fix it
Restructure your heading levels to make sure they are in hierarchical order and delete empty heading levels.
Tools and Resources
Test your alt text.
Learn more about images and alt text.
All important images are required to have accurate alt text. As a reminder, automatic testers can only tell if an image has alt text or not, but can’t tell if the alt text is correct. This requires a human review.
How to test
- Run the WAVE Evaluation tool or the Image Alt Text Viewer extension to find all images with alt text. Both tools will alert you if there is an image without alt text, or an image with alt text that might be an accessibility issue.
- Confirm that all images have correct alt text.
Most common issues
- Alt text is too long. Aim for about 120 characters. If you need more room to describe your image, add this information directly to your webpage. This is a common practice for charts and graphs.
- Alt text is missing. All important images should have descriptive alt text.
- Alt text is a file name. This sometimes happens if alt text was never added to an image.
- Linked images describe image content, and not link destination. If you have an image that is also a link, the alt text should describe the destination of the link, not the image itself.
Easiest way to fix it
Update the alt text for your images to make sure they are both accurate, and follow alt text best practices.
Tools and Resources
Test your links.
Learn more about accessible links.
How to test
- Run the WAVE evaluation tool. WAVE will identify any "suspicious link text".
- Visually review your site for links that are not descriptive.
- Confirm that you can tell where all links take you out of context.
Most common issues
- Using full URLs. Don't add a link that is a full URL. This makes it more difficult for all users to find what they need.
- Using link text like "click here", "more", or "article". Your link text needs to make it clear where the link takes your user, even if it is out of context.
Easiest way to fix it
Update the link text for non-descriptive links. Make sure it is clear to users where a hyperlink takes them.
Example
Wrong: To help save birds, learn about Portland Audubon’s Lights Out program: http://audubonportland.org/our-work/protect/habitat-and-wildlife/urban/reducing-wildlife-hazards/bird-safe-building/lights-out/
Wrong: To help save birds, click here to learn about Portland Audubon’s Lights Out program.
Correct: To help save birds, learn about Portland Audubon’s Lights Out program.
Tools and Resources
Test your lists.
Learn more about accessible lists.
How to test
- Run the WAVE evaluation tool. WAVE will identify both ordered and unordered list tags, and can point out where a list might be missing a list tag.
- Review your page to make sure that all lists have been found by WAVE.
- Confirm that all lists are tagged.
Most common issues
-
Lists missing a list tag. This can look like using dashes (-) as a list “bullet” instead of a proper list tag or listing numbers without using a list tag.
- Lists are "broken" into multiple lists. It is easy to accidentally "break" one list into two and separate your list items. This makes it visually look like a list, but harder to navigate with assistive technology.
Easiest way to fix it
- Retag your list so it is also a programmatic list. Use "unordered" list tags for bullet points and "ordered" list tags for numbered lists.
- Remove empty spaces between your "broken" list items.
Tools and Resources
Test your tables.
Learn more about accessible tables.
How to test
-
Run the WAVE evaluation tool. WAVE will identify any table elements and flag potential issues.
-
Confirm that your table has row and column headers, and does not have empty or merged cells.
Most common issues
- Tables are used for page layout. Tables should be reserved for presenting tabular data, not structuring page content.
- Tables have empty or merged cells. Having empty or merged data tables cells can make it a lot harder for folks to navigate through your content.
Easiest way to fix it
- Restructure your page content without using a table. Headings and lists are a great way to build your page structure.
- Unmerge cells, and add data to empty cells. Even adding content like "N/A" or "None" will improve the structure of your table.