Computer Science: Web Accessibility Testing Checklist
Testing websites for inclusive design and WCAG basics
Computer Science: Web Accessibility Testing Checklist
Testing websites for inclusive design and WCAG basics
Computer Science - Grade 9-12
- 1
A student is testing a website without using a mouse. They press Tab several times, but they cannot reach the main menu links. What accessibility issue is this, and what should the developer check?
People who cannot use a mouse often navigate with Tab, Shift + Tab, Enter, and Space.
This is a keyboard accessibility issue. The developer should check that all interactive elements, including menu links, can be reached and used with the keyboard in a logical order. - 2
A product page has an image of a backpack with the alt text "image123.jpg." Explain why this alt text is not accessible and write a better example.
The alt text is not accessible because it does not describe the image. A better example is "Blue hiking backpack with front zipper pocket" because it tells a screen reader user what the image shows. - 3
A page uses light gray text on a white background. What test should you perform, and why is it important?
Accessibility testing often checks whether text stands out enough from its background.
You should perform a color contrast test. It is important because low contrast can make text difficult or impossible to read for users with low vision, color blindness, or bright screen conditions. - 4
A form asks for an email address, but the text label disappears when the user starts typing. What accessibility problem could this create?
Placeholder text is not a replacement for a real form label.
This can create a labeling problem because users may forget what the field is asking for after they begin typing. The form should have a visible label connected to the input, not only placeholder text. - 5
A website has a page title of "Untitled Document." Explain why this should be fixed and write a better page title for a school club signup page.
The title should be fixed because page titles help users, browser tabs, bookmarks, and screen readers identify the page. A better title is "School Club Signup Form" because it clearly describes the page purpose. - 6
During testing, you notice a page has headings in this order: H1, H3, H2, H4. What issue might this cause, and what should be checked?
Headings are like an outline for the page.
This might cause confusion for screen reader users because headings should organize the page in a logical structure. The developer should check that headings follow a meaningful outline, such as H1 for the main topic and H2 for major sections. - 7
A button on a checkout page only shows a shopping cart icon with no text label. What should an accessibility tester check?
The tester should check whether the button has an accessible name, such as "View cart" or "Checkout." If it does not, screen reader users may not know what the button does. - 8
A video lesson includes spoken instructions but no captions or transcript. Identify the accessibility problem and suggest a fix.
Media should have alternatives when information is only delivered through sound.
The problem is that users who are deaf, hard of hearing, or unable to play audio may miss the information. The fix is to provide accurate captions and, when helpful, a transcript. - 9
A link says "click here" four different times on the same page. Explain why this can be confusing and rewrite one link to be more accessible.
This can be confusing because the link text does not explain where the link goes, especially when read out of context by a screen reader. A better link is "Download the field trip permission form." - 10
A website shows an error message in red next to a password field, but the message only says the password is invalid by using a red border. What should be improved?
Color can help, but it should not be the only way to communicate information.
The error should not rely only on color. The site should include clear text, such as "Password must be at least 8 characters," and connect the error message to the password field. - 11
A navigation menu opens when the mouse hovers over it, but it does not open when the user tabs to it with the keyboard. What accessibility principle is being tested?
This tests keyboard operability. Interactive menus must work for users who navigate by keyboard, not only for users who use a mouse. - 12
A student runs an automated accessibility scanner and it reports zero errors. Does this prove the website is fully accessible? Explain your answer.
Automated tools are useful, but they cannot understand every design choice or every user's experience.
No, it does not prove the website is fully accessible. Automated tools can find many issues, but humans still need to test keyboard use, content clarity, alt text quality, reading order, and real user experience. - 13
A web page has a form field labeled "Name," but clicking the word "Name" does not move the cursor into the input box. What should the developer check in the HTML?
The developer should check that the label is properly connected to the input, usually by matching the label's for attribute with the input's id attribute. This helps screen readers and also improves usability for mouse users. - 14
A school website has a chart that shows lunch survey results, but the chart is provided only as an image with no explanation. What accessibility improvement should be made?
If important information is in a visual, the same information should be available in text.
The site should provide a text description or data table that explains the chart's key information. This allows screen reader users and others to understand the results without relying only on the image. - 15
Create a short accessibility testing checklist with at least five items a high school web design team should use before publishing a page.
Include tests for navigation, visuals, text structure, forms, links, and media.
A good checklist should include items such as testing the page with only a keyboard, checking color contrast, confirming meaningful alt text, using clear headings, labeling form fields, writing descriptive links, providing captions for videos, and checking that errors are explained in text.