Request Information
Ready to find out what MSU Denver can do for you? We’ve got you covered.
The resources on this page are to assist you in evaluating web content for accessibility. For the best accessibility practices regarding the creation of new web content, please contact the Instructional Accessibility Group, [email protected], to schedule a web content manager training.
To Learn more Join us for a Web and Social Media Accessibility Workshop. Our schedule can be found on our Events & Workshops area.
Web Accessibility Guides
- Go to the Chrome web store, https://chrome.google.com/webstore. Search and add ‘Accessibility Developer Tools’ from Google Accessibility to your browser.
- Navigate to the website you are trying to evaluate.
- Click the ‘F11’ key, or ‘Ctrl + Shift + I’, to open Chrome’s ‘Developer Tools’ tab on the right side of the screen.
- Click the arrows on the top right of the tab to open a dropdown. Select the ‘Audits’ option from the list. This will open the audits menu.
- Check the ‘Accessibility’ box in the ‘Audits’
- Be sure to uncheck any other boxes and differentiate between mobile and desktop sites. This will provide the best results.
- Click the ‘Run audits’ button and let the audit complete.
- Once the process is complete, there will be an accessibility report displayed in the sidebar. This report provides a score with recommendations for correction.
- Review the report and, if possible, provide remediation to the problems.
The following steps for assessing web content requires an intermediate skill level for web browser navigation as well as some basic/intermediate understanding of web design or HTML. If you are not comfortable with these, skip to Questions 5 and 6 for less extensive checks/processes.
To assess online content in any browser, you will need open the Inspect Window of web page by pressing F12 or CTRL + Shift + C (Windows) or Command (⌘) + Option + C (Mac) while one the page you want to inspect. Look at the window to the right/bottom to answer the following questions:
Note: the elements are presented in an expandable list; click any right facing arrow to expand that section of the Inspect Window.
- Are they in HTML format?
- Scroll to the top of the inspect window: Do you see “<!doctype html>” in the top left.
- HTML can be read by screen readers while other formats cannot.
- Scroll to the top of the inspect window: Do you see “<!doctype html>” in the top left.
- Are there headings and bodies that create organization and identify the website/page?
-
- Visible headings should be labeled with <h#>
- Headings should maintain a logical hierarchy.
- Headings are just as important on a web page as they are on a document. They provide quick information about the content on the page.
- Do you see “<body…” under “<head>”?
- Accessible web pages should have a body where the content exists.
- Is the web-page divided into logical fields?
- When you open the body, do you see “<div>” along the left of your screen?
- Each <div> tag along the left should have a corresponding tag at the bottom of the section.
- When you hover over any “<div>” does it highlight a logical section of the screen?
- Is the page divided into reasons that make sense? Some regions may have multiple divisions.
- Are those sections listed in the Inspect Window in a logical way?
- The page should be divided in a way that makes sense. The sections on top and to the left should appear first.
- When you open the body, do you see “<div>” along the left of your screen?
-
- Do all images have alternative text?
- Click the Inspect Window then hover over an image; does the highlighted portion starting with “<img class=” have an accessible description after “alt=”?
- Can you press Tab to cycle through links?
- Can you press Shift + Tab to go back through the links?
- Can you navigate any multimedia with your keyboard?
- Can you use arrows to skip ahead or back on videos?
- Can you use the space bar to stop and start?
Checking the accessibility of websites and linked content is integral to ensuring full course accessibility for our students and the community. There are many ways to determine the accessibility of webpages; a good tool is the Wave Evaluation Tool, which can be added to Google’s Chrome browser. Wave provides a platform to view and verify website accessibility and provides information and strategies for areas of concern.
- Go to the Chrome Web Store, https://chrome.google.com/webstore.
- Search and add Wave Evaluation Tool to your Chrome.
- Once it has been added, an icon will appear in the top right corner of the browser.
- Go to the website whose accessibility you are trying to determine.
- Click the icon to open the Wave Tool and run the accessibility check.
- Wave Icon:
- A window will pop-up on the left side of the screen with a summary of the accessibility review.
- The summary will be shown in a prioritized
list with errors, alerts, errors, and structural - Summary Panel:
- The summary will be shown in a prioritized
- Click the Details icon on the left side and view the full report. This report provides a list of issues with documentation explaining the need for correction.
- Review this report and, if possible, remediate the problems.
You now know how to use the Wave Evaluation Tool to determine website accessibility
To completely assess online content for accessibility, you need to consider color contrasts of text and background colors. There should also be clear contrasts between different sections of a website. This guide will explain how to download and use the Colour Contrast Checker extension for Google Chrome.
Download:
- Go to the Google Store
- Search for ‘Colour Contrast Checker’
- Note: be sure to use the British spelling to download the correct extension.
- Click Add to Chrome (blue button to the right of the screen).
Using the Contrast Checker:
- Click the yellow button in the upper right-hand corner of your browser; this will open a half window where you can complete the following steps.
- Click the Eyedropper Icon under ‘Background Colour’; a circle will appear on the screen.
- Position the red square over a pixel containing the background color.
- Click to select the color.
- Repeat Step 3 using the text/foreground color.
Understanding the Results:
- On the left-hand side of the extension window there will be a number; this represents the contrast ratio to 1.
- Black on white is 21:1; white on white is 1:1.
- The ratio does not change if the colors are inversed.
- Below the number are four boxes; these represent the different standards and if the contrast meets those standards.
- AA is the standard used by the ADA; the minimum contrast for this standard is 4.5:1
- AAA is a more rigorous standard used in other parts of the world; the minimum AAA contrast is 7:1
Web Accessibility Guides (PDF)
These documents give you a general understanding of how to evaluate web content with accessibility in mind. These are best used for determining the accessibility of 3rd party resources.