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. The good news is, many of the most common accessibility issues can be found and fixed by content editors.
Content Editor Testing Template
[TEMPLATE] Manual Testing for Content Editors - example.berkeley.edu
Note: To access the templates, you must be logged into CalNet (Berkeley staff/students); you will automatically be prompted to create your own copy.
Content Editor Testing Tools
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 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 issues
- 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 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 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 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: https://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 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 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.