ADA stands for Americans Disabilities Act is the Disability Act in the United States, which aims to help people with disabilities have job opportunities, can buy and sell goods and services like normal people. The ADA standards are gradually added to the website to make it easier for people with disabilities to use, and are also in line with the WCAG (Web Content Accessibility Guidelines) level A, AA and AAA standards which are a set of standards in website development. , launched by the W3C to determine how to make Web content more accessible to people with disabilities.
I have worked as a tester for many years, but when I met ADA, I liked it more than usual, I researched and spent a lot of time on it, there was a whole month for most of the day's work. My work revolved around it without getting bored (I lied because that time I was divided into ADA-only projects :)). Here I would like to share the most basic knowledge for ADA testing that I have learned:
- A site with ADA is able to use the keyboard (specifically, Tab, Shift+Tab, Enter, Space, Up/Down/Left/Right arrows…) for elements with actions such as menu, h1, link, button, form, dropdown…means it replaces mouse action.
- Sites with ADA when using the keyboard will go from left to right, top to bottom, without missing an element with any action.
- There are many ways to check ADA, the most common way is manual keyboard, using tool (reader tool and extension check for errors), view source code.
A. ADA manual:
1. Border focus:
- Is the state that your mouse pointer is standing at that position of the website, it is a border around the element.
- Sometimes its default border is thin and hard to see, but the developer can adjust the color to be light and reasonable with the layout of the site.
- When using the keyboard, the border will jump in the correct order of all your actions: for example, tab will jump to the right, shift+tab will jump to the left.
2. Keyboard:
- Tab/Shift+Tab: use tab to go to an element from left to right and shift+tab to return to the previous action.
- Enter/Space: action goes to the destination, space = enter in the following cases:
- Open and close menus
- Open/close popup image/video.
- Play/pause video/gift image.
- Button slide <>, slide dot.
- Tabbed content.
- Arrow expand/collage.
- Arrow up/down left/right: left-right arrow = tab/shift+tab, up/down arrow to shorten travel time (for example, a menu with 8 submenu divided by 3 rows 3/3/2 words position number 2 first row down to number 2 of row 2 if using tabs, it will go all the way to row 2, but using the up and down arrows will move faster).
- Home key: focus the first item of the main menu of the same level.
- End key: focus the last item of the main menu of the same level.
- ESC = close action (turn off popup, turn off submenu…)
3. Skip to content
- A site must have Skip to content.
- Use enter/space to skip to content.
- When entering/space must skip through the menu and focus on the next element (usually H1).
- For banners with video, check to see if after Skip to content is passed through Play/Pauser video (because the tab position of play/pause video is before H1).
4. Menu header
- Tab to auto-open menu (depending on request, site requires auto-opening, site does not).
- For the self-opening submenu, if the parent menu has a link, then actively add a submenu overview for it, otherwise, no (required).
- Submenu must enter/space= open/collape menu, when opening one menu, another must close.
- Use the up/down arrow keys to move the parent menu with the submenu.
- Use the left/right arrow keys to move between menus.
- After the tab ends with the menu to the next element, the submenu must close.
5. Logo Header/Footer
- The logo must have alt.
- Order of reading: priority to read title -> no title, then read alt.
6. Search
- Enter/space opens the box.
- Focus the mouse on the box.
- Shift+tab focus selects all keywords.
7. Image
Image must have alt (except background and image icons that have no meaning/function).
Alt must be meaningful and related to image/content.
Alt is correct (there are cases where alt image is entered, but it is displayed as the image file name). B. ADA Tool test
Some basic tools such as: Screen Reader extension, NVDA tool (installed software), Mac Voice over (default available on Mac), Ax extension, Wave extension …
The operation is the same as the test manual, but turn on the tool (Window: (Screen Reader / NVDA), Mac: Voice over), note that each time you should open a tool to avoid sound conflicts. C. Check ADA on browser
Same operation but check on:
Manual on Firefox
NVDA on Firefox
Manual on Mac: Chrome/Safari/Firefox
Mac over on Chrome/Safari/Firefox D. ADA attribute (view element)
1. Zoom in and out feature
- Remove user-scalable="no" from the attribute of to enable zooming and make sure the maximum-scale parameter is not less than 2. (search in code, if there is this attribute in iframe is passed because it cannot be interfered with).
- Zoom in/out the screen to see if the layout is broken (relatively), zoom to 150%.
2. External links
- arial-label="title+open new tab/window".
- That is, the External link then reads open new tab/window.
- Except for the case of external links in the content, there is no need to care.
3. The lang="language" attribute
- Make sure that the HTML has a lang or xml:lang attribute, and that the attribute's value is a valid value. (just check if lang ="language" only)
4. Menu Navigation
- role="menubar" wrap role="menuitem"
- aria-expanded="false" without opening the sub-menu,
- aria-expanded="true" when opening sub-menu
- role="button" because the parent menu is not linked
- aria-controls="idnguyensub_menu"
5. Image popup
Popups are not enabled yet
aria-label="open image popup"
aria-haspopup="dialog" 6. Popup
role="dialog"
aria-label="text content on popup"
- Aria-hidden="false" Note: when the popup tab is on, it must still be in the control area, which means the tab cannot go down to the content area below the popup.
7. sr-only: If sr-only matches aria-label, sr-only 
8. Blog Post/Related
- Wrap the
in an tag.
9. Tab
- role="tablist" for list tab
- role="tab" for each tab
- aria-selected="true" when selecting tab
- aria-selected="false" for unselected tab
- aria-hidden="false" for visible tab
- aria-hidden="true" for hidden tabs
- id="tab-0" (1,2,3,4)
- aria-controls="content-1" (content of that tab)
10. Iframe: iframe must have title
11. Tabindex
- Form, button, : default already has tabindex so we don't need to add it.
