accessibility

Customising accessibility in recyclerview using onPopulateAccessibilityEvent and AccessibilityDelegate

不羁岁月 提交于 2021-02-07 10:38:19
问题 I'm trying to customise the talkback output for items in a RecyclerView. I have modified the onBindViewHolder method to include the following code itemView?.setAccessibilityDelegate(object: View.AccessibilityDelegate() { override fun onPopulateAccessibilityEvent(host: View?, event: AccessibilityEvent?) { super.onPopulateAccessibilityEvent(host, event) event?.let {event -> if (event.eventType == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED) { event.text.add("Hello world!") } } } })

Accessibility: sr-only or aria-label

雨燕双飞 提交于 2021-02-06 14:53:31
问题 From MDN: In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies. <button aria-label="Close" onclick="myDialog.close()">X</button> According to the Bootstrap Documentation: Hide an element to all devices except screen readers with .sr-only So I guess I could also write:

CSS' user-select and accessibility

大憨熊 提交于 2021-02-06 10:12:34
问题 If I use the following: -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; I can disable text selection of certain elements on my web page. Works well for buttons and links which don't give as nice a UX if selected (obviously opinion). Am I free to use this wherever I feel necessary? Or are there accessibility implications? i.e. do screen readers and other tools rely on text selection? Note: I'm

How do it disable message “double on tap” in view using talkback accessibility android?

百般思念 提交于 2021-02-05 07:35:44
问题 When a view has event click and enable talkback. I need to disable the audio "double to tap" in the view. I am using accessibility in android development. How can I do this, please? 回答1: If you check google talkback source code at this line and here, string resource ("double tap") has been used here and here So, you should remove AccessibilityActionCompat.ACTION_CLICK action and set isClickable to false in node info. ViewCompat.setAccessibilityDelegate(view, object :

Accessible CSS-only tab view

会有一股神秘感。 提交于 2021-02-04 06:32:46
问题 I'm working on a site that needs to (a) work without JavaScript and (b) be keyboard-accessible. I have used the label target trick to build a tab view (https://css-tricks.com/functional-css-tabs-revisited/), but I've noticed that it relies on the label being clicked. I can't figure out how to make it work with the keyboard. Is this possible? .tabs { background-color: #eee; min-height: 400px; } .tabs__list { border-bottom: 1px solid black; display: flex; flex-direction: row; list-style: none;

Accessible CSS-only tab view

旧城冷巷雨未停 提交于 2021-02-04 06:31:47
问题 I'm working on a site that needs to (a) work without JavaScript and (b) be keyboard-accessible. I have used the label target trick to build a tab view (https://css-tricks.com/functional-css-tabs-revisited/), but I've noticed that it relies on the label being clicked. I can't figure out how to make it work with the keyboard. Is this possible? .tabs { background-color: #eee; min-height: 400px; } .tabs__list { border-bottom: 1px solid black; display: flex; flex-direction: row; list-style: none;

Fixing the keyboard navigation order of radio buttons reversed by flex-direction

情到浓时终转凉″ 提交于 2021-01-29 09:34:31
问题 Context: We have some cards that are radio buttons in a radio group, that we want to display in a different order for small and large breakpoints. I want to know if there is a way to do this nicely that doesn't involve duplicating the html for the different breakpoints, and doesn't break accessibility. Desired large breakpoint: |Large|Medium|Small| Desired small breakpoint: |Small| |Medium| |Large| Desired accessibility behaviour: With a radio group, you'd normally expect to hit tab to get to

How to find cursor position of a currently focused text editable element on Mac OS X?

喜夏-厌秋 提交于 2021-01-29 08:03:48
问题 I need to perform the following task on Mac OS X: Find an application window that user is currently working in Find a currently focused element within it If the element is text editable, find current cursor position I'd like to use ATOMac, but I cannot figure out how to do this, i.e. what are correct attributes etc. Any ideas? 回答1: from atomac import getFrontMostApp def GetInsertionPoint (): try: app = getFrontmostApp() except: return -1 for element in app.textFieldsR()+app.textAreasR(): if

Modal placed on the 2nd level cannot be focused

╄→гoц情女王★ 提交于 2021-01-29 05:43:06
问题 I am working on accessibility fixes for an Angular project at work. I am facing an issue accessing a modal. I have a main component which opens another component on top of it covering half the screen. That component opens a modal on button click. This modal is not accessible by tab. And even weirder, the tabindex=0 that you see assigned in the code below automatically gets assigned tabindex=-1 when the modal appears on screen. Even the buttons, which don't even have a tabindex attribute

Multi-level dropdown menu that is keyboard accessible for WCAG ada compliance

纵饮孤独 提交于 2021-01-28 23:24:55
问题 I'm trying to create a dropdown menu that can be navigated by using the keyboard. I can get the first level to work by using the tab key, but have been unable to access the second level. Example can be found here https://codepen.io/jjfash/pen/oNgqEjx The html: <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn