Request Information
Ready to find out what MSU Denver can do for you? We’ve got you covered.
Introduction to Evaluating a Websites Accessibility Using Browser Inspect Window
When building or assessing web content, it can be easier to check accessibility by examining the code used to build the webpage. This process for assessing web content does require an intermediate skill level for web browser navigation as well as some basic/intermediate understanding of HTML. If you are not comfortable with these, consider using one of the many assessment tools.
The resources on this page consist of a video and text instructions for assessing web content in the Google Chrome Inspect Window, but the principles can be applied to other browsers.
Assessing web content in the Google Chrome Inspect Window
Steps to Use Browser Inspect Window to Evaluate Web Accessibility
- To assess online content in any browser, you will need to open the Inspect Window of web page. Make sure you are on the specific page you want to inspect.
- For Windows: Press ‘F12’ or “Control+Shift+C)
- For Mac: ‘Command+Option+C’
- Note: some browsers like Safari require you to add the developer tools in order to access the inspect window.
- 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 the 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.
- Note: 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?
- Do you see ‘<head>’ on the left side and near the top of your Inspect Window?
- Note: 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>”?
- Note: Accessible web pages should have a body where the content exists.
- Do you see ‘<head>’ on the left side and near the top of your Inspect Window?
- Is the web page divided into logical fields?
- When you open the body, do you see “<div>” along the left of your screen?
- Note: 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?
- Note: 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 he 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?
