Accessibility testing : Highly visible keyboard focus styles

Provide keyboard focus styles that are highly visible, and make sure that a visible element has focus at all times when using a keyboard. Do not rely on browser default focus styles.

Language: Java

Framework: Selenium 4

copy
1/​/​Assuming the application is a web application using HTML and CSS for UI2/​/​Assuming the keyboard focus style is defined as an outline on the focused element3/​/​Assuming the test is running on a local machine45public class AccessibilityTest {67 @Test8 public void testHighVisibilityKeyboardFocusStyle() {9 /​/​ Setup driver with desired capabilities for remote client, if required10 /​/​ DesiredCapabilities capabilities = DesiredCapabilities.chrome();11 /​/​ RemoteWebDriver driver = new RemoteWebDriver(new URL("http:/​/​localhost:4444/​wd/​hub"), capabilities);12 WebDriver driver = new ChromeDriver();13 14 /​/​ Navigate to the page for testing15 driver.get("https:/​/​example.com/​accessibility-test");16 17 /​/​ Define highly visible keyboard focus style using CSS18 String focusStyle = "outline: 3px solid #FF00FF;";1920 /​/​ Disable default browser focus styles21 JavascriptExecutor js = (JavascriptExecutor) driver;22 js.executeScript("html, button, input, select, td, textarea, *[tabindex]:focus {\n outline: none !important;\n}");2324 /​/​ Check focus on every keyboard event25 WebElement focusedElement = null;26 Actions builder = new Actions(driver);27 builder.sendKeys(Keys.TAB).perform();28 focusedElement = driver.switchTo().activeElement();29 Assert.assertTrue(focusedElement.getCssValue("outline").equals(focusStyle));30 31 /​/​ Other keyboard events can be added for testing32 /​/​ builder.sendKeys(Keys.TAB).perform();33 /​/​ builder.sendKeys(Keys.SHIFT, Keys.TAB).perform();34 35 /​/​ Close the browser36 driver.quit();37 }3839}

Language: Python

Framework: Selenium 4

copy
1# Assumptions:2# - Web application is loaded on Chrome browser3# - Element that should be focused on keyboard input has 'data-focusable' attribute4# - CSS class 'focused' will be added to the element with focus56# import necessary modules7from selenium import webdriver8from selenium.webdriver.common.keys import Keys910# set up the Chrome driver11driver = webdriver.Chrome()1213# navigate to the web application14driver.get("https:/​/​www.example.com")1516# set the desired capabilities for a remote client17# desired_cap = {18# 'browserName': 'chrome',19# 'version': '91.0',20# 'platform': 'WIN10',21# 'javascriptEnabled': True22# }23# driver = webdriver.Remote(24# command_executor='http:/​/​127.0.0.1:4444/​wd/​hub',25# desired_capabilities=desired_cap26# )2728# locate the focused element based on 'data-focusable' attribute29focused_element = driver.find_element_by_css_selector('[data-focusable]')3031# add CSS class 'focused' to the focused element32driver.execute_script("arguments[0].classList.add('focused')", focused_element)3334# ensure keyboard focus styles are highly visible35css = """36.focused {37 outline: 2px solid #00ff00;38}39"""40driver.execute_script(f"var style = document.createElement('style'); "41 f"style.innerHTML = '{css}'; "42 f"document.head.appendChild(style);") 4344# close the browser45driver.quit()

Disclaimer: Following code snippets and related information have been sourced from GitHub and/or generated using AI code generation tools. LambdaTest takes no responsibility in the accuracy of the code and is not liable for any damages.

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Power Your Software Testing with AI and cloud

Test Intelligently and ship faster. Deliver unparalleled digital experiences for real world enterprises.

Start Free Testing