508 Testing Examples
A page automatically provides scores in a hockey game. There are no dialog boxes, no changes in focus, and no aria-live regions.
Failing - Change Notification (Auto-Updating)
A web page has a red line at the top which ANDI detects as an image with an output of "border." The image is used to create a visual border. When removed from the page, there would be no content loss.
Failing - Decorative Images
On an online booking site, the "Departing" date form field provides the user with the expected date format and a calendar picker option. Selecting the calendar picker displays a calendar. The Andi Output says "Departing". Tabbing twice brings focus to the revealed content.
Failing - Forms (Change Notification)
A website has two form elements labelled as "Email Address" and "Name". When you try to leave the fields blank, you receive "Error: Required Field"
Failing - Forms (Descriptive Label)
A website requires you to set up a username and password. Entering a password that doesn't meet all the requirements triggers a red outline to appear around the input box.
Failing - Forms (Error Identification)
When you make a selection on an online exam, it automatically submits the answer and you are moved to the next question. When you answer the last question on the exam, it is submitted automatically.
Failing - Forms (Error Prevention)
A webpage requires you to input your name. You attempt to submit "Jane Doe". An error message appears: "Invalid Name".
Failing - Forms (Error Suggestion)
A web page has a registration form. There are four form fields. They each are identified using placeholder text in the field. When focus is placed on each label, the text disappears.
Failing - Forms (Label Provided)
A form field asks for you name. When you input it, the page redirects to a Shakespeare website.
Failing - Forms (On Input)
A form has the correct labels. When you get to the phone input field, the three boxes are all labeled "Phone".
Failing - Forms (Programmatic Label)
Testing a contact page. Andi detects the table as an image. There are no controls to adjust the text in the image.
Failing - Images of Text
A webpage contains a "Favorite Activities in the Local Park" pie chart representing park activities graphically in each section of the chart. Each section receives focus with the mouse. When it hovers over a section, info about the number of people for that section is revealed. Using Andi: Focusable Elements, you see each section has a title that also displays the number of people per section. Using the Tab Key, you can focus on each chart section. You are viewing in Firefox, which does not display title attributes so you don't know how many people per section.
Failing - Keyboard Access
A website opens a new window when a link receives focus and the user is immediately taken to another page without selecting a link.
Failing - Keyboard Focus (Change of Context)
A secure HR form says "You have 10 seconds to log in before the time limit is reached and the page refreshes". You attempt to turn off, adjust, or extend the time limit, but there is nothing else on the page.
Failing - Adjustable Timing
A page has a 5 second audio clip that plays when a user lands on the page. There is a "Stop Audio" button and it works. The text is yellow and the background is light green.
Failing - Audio Control
A quiz has a timer that restricts the time allotted for each question to 20 seconds. A counter counts down. There is a button at the bottom of the page that hides the timer. It is 8 elements from the top and 6 from the timer
Failing - Auto-Updating
A website has the "hide background" button on Andi. When you click it, text saying "Whatever you do, don't click the red button!" disappears. These instructions can't be found elsewhere on the page.
Failing - Background Image
A page has a gif of a flag waving. When focus is on the flag, it stops waving and when focus is off, it begins again.
Failing - Blinking, Moving and Scrolling
Testing a webpage that has a captcha image. The captcha image works and is the only security method to login.
Failing - CAPTCHA Images
A web page contains text about endangered turtles, an animated gif of a turtle slowly crossing the road, and links to other pages.
DNA - Flashing
An agency lists information. With the tab key, you land on an accordion button. The accordion is collapsed and you press enter to open it. When it opens, focus moves to the "Home" section in the breadcrumb menu. Advancing one keystroke (tab or arrow key) moves the focus to another link in the breadcrumb menu.
Failing - Keyboard Focus (Order Return)
A retail website has a form with fields that are keyboard accessible. When you tab through, you start at section 5, then to section 3, etc.
Failing - Keyboard Focus (Order)
A "More Button" reveals a menu displaying additional options.When the button is activated, the menu becomes visible, but focus doesn't move immediately to the menu. One additional keystroke moves focus to the "Search" button, not to the revealed menu.
Failing - Keyboard Focus (Revealed Content)
A product site has several keyboard-accessible and interactive interface components. When the keyboard focuses on each element, there is no visible indication of where focus is.
Failing - Keyboard Focus (Visible)
You are testing a login page. You can tab through Username, Password, and a Remember Username checkbox and everything receives a dotted outline on focus. The tab becomes stuck on the Remember username checkbox. You can't tab away and pressing enter doesn't help.
Failing - Keyboard Trap
A webpage allows users to create a simple web survey. The survey can be created with multiple choice boxes and users can drag and drop questions from the menu to the survey area. Holding the Ctrl + arrow keys to drag the question requires specific timing of the keystroke. That is the only way to get new questions
Failing - Keystroke Timing
A website has a link to the social media accounts. Using ANDI: Links/Button > links > "Inspect next element", you see that the output has an alert: "Link has no accessible name, innerText or Title"
Failing - Link/Button
A user selects the "LOGIN" button after inputting their username and password. The page refreshes and focus is placed on a now-blank password field. New text displays above the password stating "Please reenter your password" Focus is in the password text box.
Failing - Link/Button (Related Changes)
A page has a CAPTCHA image. It is necessary for users to login. ANDI output displays "Image has no accessible name, [alt], or [title]"
Failing - Meaningful Images
A web site shows a movie scene with very bright lightning flashes. The scene is edited so the lightning only flashes 3 times in any 1 second period.
Not Tested - Flashing
A music venue has an online ticket purchasing website with a 2 minute time limit. At the beginning of the session, the webpage has a section with radio buttons allowing users to extend the time limit to 20 minutes.
Passing - Adjustable Timing
A page has an advertising section that auto plays a 15 second ad when someone lands on the page. At very the top of the page are two buttons: "Stop Ad" and "Pause Ad". The buttons work and they are keyboard accessible
Passing - Audio Control
A stock market site auto-updates the prices in real time. It has other content on the page. The third element on the page is a button to Pause the updates. It works and it passes Keyboard Access/Focus, Links/Buttons, Sensory Characteristics, Contrast, and Resize Test.
Passing - Auto-Updating
Testing a website, Andi has the "hide background" button. When you click it, the words "Homeland Security" disappear from the logo. The top of the site says "An official website of the Department of Homeland Security"
Passing - Background Image
A form has a blinking "Submit" button. Underneath the button, text says "To stop blinking, click Ctrl + S". The keystroke works and passes accessibility rules.
Passing - Blinking, Moving and Scrolling
A page that contains a CAPTCHA. When you select the "I'm not a robot" checkbox, a pop-up opens containing a CAPTCHA image. The captcha has an audio button and the graphic has text. Selecting the audio button works and directs you to an alternative audio challenge.
Passing - CAPTCHA Images
A page automatically provides scores in a hockey game. There are no dialog boxes to notify the user of the change. The focus doesn't move to the changed content. The content is in an Aria-Live region.
Passing - Change Notification (Auto-Updating)
A web page has a red line at the top which ANDI identifies as an image with a blank ANDI output. The line appears to be used for styling only. The developer used "null" as the image alt.
Passing - Decorative Images
On an online booking site, the "Departing" date form field provides the user with the expected date format and a calendar picker option. Selecting the calendar picker displays a calendar. The Andi Output says "Departing (opens calendar)". Tabbing again brings focus to the revealed content.
Passing - Forms (Change Notification)
A form allows users to request access to softwares. It has six form elements and instructions at the top that say "All fields required". The form is labelled correctly, the phone number field provides an example of how the input should be formatted, and all required fields are marked with an asterisk.
Passing - Forms (Descriptive Label)
A website requires you to set up a username and password. Entering a password that doesn't meet all the requirements triggers an error message which appears below the input and reads "Password does not meet requirements". The message is emphasized with a red X.
Passing - Forms (Error Identification)
A site allows a user to change their password for their account in the data storage system. When you misspell the password, an error message displays "These passwords do not match." You can then fix the errors or cancel the password change.
Passing - Forms (Error Prevention)
A website requires a user to set up a username and password. Providing an incorrect password triggers an error which reads "Your password must be between 8-15 characters".
Passing - Forms (Error Suggestion)
An application has six form elements and instructions on the top of the page that say "All fields required". All form fields have a text label which remain visible when each field has focus
Passing - Forms (Label Provided)
A form asks several questions. Using the keyboard, you can navigate to each form element, input text, and exit each form field. Changing the values of each form field and exiting does not create an unexpected change.
Passing - Forms (On Input)
A form includes text labels for all the form fields and marks the required fields with an asterisk. You open ANDI and find that all the fields have an output providing the correct instructions. The instructions in Andi don't match the text instructions on the page.
Passing - Forms (Programmatic Label)
Testing a contact page. ANDI detects a table with points of contact info as an image. It's an image of text. The image can be customized by adjusting font, size, background, and font color.
Passing - Images of Text
An online bookstore allows users to read a book excerpt by selecting an arrow and favorite the book by clicking a heart. The elements appear in the correct order when accessed by a keyboard. Andi shows there is one Title Attribute. You are able to navigate and interact with the page using the keyboard. When focus is on the Arrow button, the tooltip appears that appears on hover.
Passing - Keyboard Access
A dropdown menu allows users to navigate a website. If the keyboard navigates to a menu option and activates it, the selected page opens. When the Esc or Tab keys are used to navigate away, focus shifts away and back to the webpage.
Passing - Keyboard Focus (Change of Context)
A website has an expandable/collapsible menu to show/hide different sections of the web page. It is keyboard accessible. When the menu is expanded, new content is revealed and focus moves to the first revealed item in the menu. When the menu is collapsed, focus returns to the General menu that activated the revealed content.
Passing - Keyboard Focus (Order Return)
A company webpage allows users to subscribe to several newsletters published by the company. There is a form with four sections. You can tab through the sections in the correct order.
Passing - Keyboard Focus (Order)
When focus lands on a menu option, the menu expands automatically and focus lands on the first item in the revealed menu.
Passing - Keyboard Focus (Revealed Content)
A login page has 4 keyboard-focusable elements: Username, Password, Remember Password, and Login. On focus, they have a black dotted outline.
Passing - Keyboard Focus (Visible)
A webpage provides a keyboard accessible modal-box for uploading a file. When you tab through an entire page using the tab or arrow keys, focus is shown with a dotted outline. You can navigate and interact with everything that a mouse-user can. When you get to the bottom of the page, pressing Tab brings you to the beginning again.
Passing - Keyboard Trap
A webpage allows users to create a simple web survey. The survey can be created with multiple choice boxes and users can drag and drop questions from the menu to the survey area. Holding the Ctrl + arrow keys to drag the question requires specific timing of the keystroke. If you copy/paste the question, it provides the same functionality.
Passing - Keystroke Timing
The DHS homepage has links to its social media sites. Using ANDI: Links/Button > links > "Inspect next element", the ANDI output for each of the social media icons displays "Follow Homeland security" and describes the icon as "Facebook"
Passing - Link/Button
A user selects the "LOGIN" button after inputting their username and password. The page displays a text that states the user ID and password combo is incorrect. The alert is contained in an Aria Live Region.
Passing - Link/Button (Related Changes)
Testing a page with a CAPTCHA image. You see ANDI: graphics/images detects the image. It provides necessary information for a user to complete the login. ANDI output displays "CAPTCHA: type the letters and numbers in the image"
Passing - Meaningful Images
