accessibility | 易学教程

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

阅读更多关于 Multi-level dropdown menu that is keyboard accessible for WCAG ada compliance

问题 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

How can I get onKeyPress to give me the last key input with a Braille Display on iOS?

阅读更多关于 How can I get onKeyPress to give me the last key input with a Braille Display on iOS?

问题 I deleted the previous version of this question because it was all over the place. Sorry about that. I am using React Native. The issue I am having is that when using a Braille Display (Orbit Reader 20) to input letters into a TextInput field on iOS I get a concatenated string of all the character and not the last one I entered. I have tried this on Android as well, but on Android, it works the way I want it to. iOS will behave like Android, but only if I have focus on the onscreen keyboard

How to dynamically size an image in SwiftUI for accessibility?

阅读更多关于 How to dynamically size an image in SwiftUI for accessibility?

问题 I have an image that I'm hard coding the size, but realized it's not scaling for larger size categories. How can I set a preferred size and let it scale up to different sizes automatically? This is what my code looks like: HStack(alignment: .top, spacing: 4) { Text("Some text") Button(action: { showAlert = true }) { Image(systemName: "questionmark.circle.fill") .resizable() .frame(width: 12, height: 12) .foregroundColor(.secondary) } } I also have other scenario where it's not using a SF

How do I change the fixed size of a Lazy Grid GridItem in response to Dynamic Text size changes?

阅读更多关于 How do I change the fixed size of a Lazy Grid GridItem in response to Dynamic Text size changes?

问题 The code below is using a LazyVGrid to implement layout of my controls such that everything lines up like this: Particularly, the sliders' ends all align and the symbols are centre-aligned to each other. I have worked out how to size the GridItems for the symbol and the numeric readout such that they are the 'right size' for their contents — something neither flexible nor adaptive GridItems will do — while accounting for Dynamic Type . In testing, this works really well so long as the user

Multiple images of same product, accessibility requirements

阅读更多关于 Multiple images of same product, accessibility requirements

问题 For a webpage with multiple images of a single product, such as with different angles. Is there a requirement for alt tags for each image? Viewing examples on Amazon it seems they only have an alt tag on the first product image, but after which there is no alt tag or aria related tags. The first example here says that the stars have empty alt tags. My question is, to follow proper standards, is it required to have an empty alt tag after the first image? To completely hide the extra non

Default UIAccessibilityElement after screen change

阅读更多关于 Default UIAccessibilityElement after screen change

问题 Any way to decide which element gets focus first? I tried use the second parameter in the UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, element); but with no success. 回答1: Using the UIAccessibilityPostNotification method is the proper way to get your purpose. There are several types of change notifications but the two most commonly used are : UIAccessibilityLayoutChangedNotification : notifies that a part of the page has changed with 2 possible incoming parameters

What is better practice use <a> or <a role=“button”> for accessibility?

阅读更多关于 What is better practice use or for accessibility?

问题 I have a download link, and I can't find any good accessible solutions for how I should handle this situation. I have a common rule of thumb I'm following: "Buttons Do Things, Links Go Places" My scenario is that I have a button which triggers a document download (same page) I believe that this should be an anchor with a role of a button because its explicitly not triggering a redirect or navigation: <a role="button" href="download.docx" download>Download File</a> However, its strongly

iOS VoiceOver “Heading not found”

阅读更多关于 iOS VoiceOver “Heading not found”

问题 I have a UITableView where each UITableViewCell has 2 UILabels: 1 header and 1 content. The AccessibilityTrait of the header is set to "header". I'm able to see the trait set correctly when inspecting the simulator screen with Accessibility Inspector. But on the actual device, when I switch the rotor to "Headings", it only finds the navigation bar header, but does not find the headers in the UITableViewCells. 回答1: To get the accessibility elements with the header trait in your table view

iOS VoiceOver “Heading not found”

阅读更多关于 iOS VoiceOver “Heading not found”

If colours are accessible, will a gradient between those colours be accessible?

阅读更多关于 If colours are accessible, will a gradient between those colours be accessible?

问题 I work on websites where accessibility is an absolute must have, we aim for at least AA standard. Typically we use resources such as https://contrast-ratio.com and https://contrastchecker.com to test a background colour against black or white text. In this instance let's take white (#fff) text at a size of 18px. Colour one: #546FAF has a ratio of 4.92 Colour two: #B349B1 has a ratio of 4.66 If I made a linear gradient between those two colours as a background, would #fff text at 18px be safe