# Background This document is used as aria/accessibility(a11y) reference for future developers. There are a lot of a11y problems in the Fomantic UI library. Files in `web_src/js/modules/fomantic/` are used as a workaround to make the UI more accessible. The aria-related code is designed to avoid touching the official Fomantic UI library, and to be as independent as possible, so it can be easily modified/removed in the future. To test the aria/accessibility with screen readers, developers can use the following steps: * On macOS, you can use VoiceOver. * Press `Command + F5` to turn on VoiceOver. * Try to operate the UI with keyboard-only. * Use Tab/Shift+Tab to switch focus between elements. * Arrow keys (Option+Up/Down) to navigate between menu/combobox items (only aria-active, not really focused). * Press Enter to trigger the aria-active element. * On Android, you can use TalkBack. * Go to Settings -> Accessibility -> TalkBack, turn it on. * Long-press or press+swipe to switch the aria-active element (not really focused). * Double-tap means old single-tap on the aria-active element. * Double-finger swipe means old single-finger swipe. * TODO: on Windows, on Linux, on iOS # Known Problems * Tested with Apple VoiceOver: If a dropdown menu/combobox is opened by mouse click, then arrow keys don't work. But if the dropdown is opened by keyboard Tab, then arrow keys work, and from then on, the keys almost work with mouse click too. The clue: when the dropdown is only opened by mouse click, VoiceOver doesn't send 'keydown' events of arrow keys to the DOM, VoiceOver expects to use arrow keys to navigate between some elements, but it couldn't. Users could use Option+ArrowKeys to navigate between menu/combobox items or selection labels if the menu/combobox is opened by mouse click. # Checkbox ## Accessibility-friendly Checkbox The ideal checkboxes should be: ```html ``` However, the templates still have the Fomantic-style HTML layout: ```html
``` We call `initAriaCheckboxPatch` to link the `input` and `label` which makes clicking the label etc. work. There is still a problem: These checkboxes are not friendly to screen readers, so we add IDs to all the Fomantic UI checkboxes automatically by JS. If the `label` part is empty, then the checkbox needs to get the `aria-label` attribute manually. # Fomantic Dropdown Fomantic Dropdown is designed to be used for many purposes: * Menu (the profile menu in navbar, the language menu in footer) * Popup (the branch/tag panel, the review box) * Simple `
Default
```