Questions tagged [accessibility]
A general term used to describe the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility is often used to focus on people with disabilities or special needs and their right of access to entities.
851
questions
0
votes
2
answers
96
views
What's the threshold when you should focus on accessibility? Is there any?
I was wondering what is the threshold for the online product / platform / website to take accessibility into account? (Except obvious "always because you never know").
To be precised I am ...
- 76
1
vote
0
answers
49
views
Cart Accessibility - Ecommerce Shop
i have a question regarding defining the accessibility for prices and the cart summary for an ecommerce shopping-cart.
As a visual impaired user i can navigate through the cart page with the TAB key ...
- 63
1
vote
1
answer
76
views
What would be the recommended level for "complementary" headers?
I am currently working on the accessibility of the open source software XWiki. I want to update the way we handle the headers on our page but I lack facts and information to back up this change.
Our ...
0
votes
1
answer
20
views
Is a data download a viable text-alternative to a visual chart?
I have a dashboard with various different at-a-glance charts. For some of them (such as pie charts) it's simple to offer a toggle / alternative view to change from chart to table view, but for more ...
JonW♦
- 37.2k
0
votes
1
answer
64
views
Yellow in high contrast modes
We're implementing different color themes across our apps.
All our basic themes are WCAG level AA compliant, but now it's high contrast theme's turn. It's going to be a theme that features maximum ...
- 2,278
0
votes
1
answer
107
views
What is a good aria-label for a button that opens a modal to pick a region and/or language for the webpage?
I have a <button> element that opens a modal to change the webpage region and/or language.
The <button> element needs an aria-label that gives the user information about what the modal ...
2
votes
2
answers
83
views
Keeping the text handle visible at all times when in text editing mode on mobile devices, any accessibility issues?
There is a very interesting article on the 'invisible' problem of editing text on mobile that highlights the lack of novel and tailored UI design patterns for text editing.
One of the really ...
- 26.7k
0
votes
1
answer
51
views
Is `h` a valid heading tag in PDFs? [closed]
I'm configuring a document in InDesign for basic accessibility. The documents I'm working on have unfortunately used h1-h6 tags incorrectly for page hierarchy (basically heading style option 1, style ...
- 103
0
votes
1
answer
30
views
Non Modal Persistent element - Best practices for tab sequence and general accessibility
We're working on a compare widget that appears when products are selected for comparison. This tray continues to persist as long as the products are in this widget. Even if users move to other pages.
...
- 598
0
votes
1
answer
54
views
How to ensure accessibility for a variable-length collection of name fields in a form
My company supports a legacy application which uses a data form containing a Recipient section and a Sender section. Each section, upon first load, contains three text inputs (horizontally aligned) ...
1
vote
1
answer
101
views
WCAG' Non-text contrast requirements, what exactly are the guidelines with hover?
WCAG does a weird job of explaining their non-text contrast requirements with hover states.
Within their "Understanding non-text contrast" documentation, they have this bizarre example:
As ...
- 5,435
0
votes
1
answer
67
views
Designing an elevator with smartphone to elevator button pressing and smartphone vibration and notification upon arrival
Elevators make us reason about mathematics (for instance, vectors... when an elevator goes from one floor to another, you can visualize the vector pointing from one floor, with a number, to another ...
1
vote
1
answer
47
views
How can a diagramming application be accessible via screen reader for content creator
We have an application that uses diagrams and have made it accessible with full keyboard navigation and screen reader providing situational awareness for readers.
But I can't find anywhere how someone ...
- 111
1
vote
1
answer
55
views
Alert message component variants
I work in an e-commerce platform and we recently had a lively discussion about the variations of our alert message.
Would you agree that it is useful to have different versions of an alert or would ...
- 63
0
votes
1
answer
28
views
Device for people with advanced tremors and speech difficulties to type using feet and hand
Some older people are often full of tremors, including in their voice, and in their hands, but can still use their feet.
They can often also spell.
I was wondering whether anyone has designed a double ...
0
votes
2
answers
109
views
Do different opacities of hover / click / active states need considering from an accessibility perspective?
I found this sidebar on Dribbble:
And I'm wondering if it's fully accessible? It looks like when a menu item is active, it's given a semi-transparent background. And when you hover over another menu ...
- 103
1
vote
3
answers
2k
views
In a multilingual app, can we use only English for titles, alt etc
In a multilingual app, regarding accessibility usages, can we use english for titles, alt etc., or should we adapt accordingly to the language selected?
Example: always use title="Back to the ...
- 23
3
votes
2
answers
171
views
Tab order of floating buttons
We have a live support chat on our website, accessible via a button that always floats in the bottom right of the page, above other content. This chat widget inserts itself as the first child of the ...
- 673
0
votes
1
answer
247
views
Are arrow keys necessary to meet WCAG A and AA standards for keyboard navigation or is Tab key sufficient?
If there is a website navigation with subMenus and some subMenu themselves have their own subMenus. It is possible to fully navigate the navigation with the keyboard through Tab, Enter, and Space keys....
- 115
1
vote
1
answer
125
views
Struggling to make an accessible data table with clickable rows!
We're currently working on making our data table accessible. Our main concern is the whole clickable row that triggers a side sheet. The entire row is clickable, and a part of its content may be ...
0
votes
1
answer
95
views
Should I include ... at the end of input placeholders?
I've noticed designers using "..." at the end of inputs or search bars placeholders ("Enter your email address" vs "Enter your email address...") seemingly at random. Is ...
- 143
8
votes
1
answer
1k
views
Is there an accessibility standard for using icons vs text in menus?
I'm asking as a user here (I work in QA, fwiw) - is there a standard for accessibility in terms of using text labels vs icons only in menus? I searched and found a lot of conversations about including ...
- 83
1
vote
2
answers
164
views
Sidebars: Icons & Label or Icon & Hover Tooltip
I got curious today: From a learnability, accessibility, and usability perspective, it is recommendable to not hide behind an interaction (hover) the label of something and not force the user "...
- 143
1
vote
2
answers
219
views
Why is focus state interaction is different for Checkbox and radio field
Today I noticed that radio buttons and checkboxes have different interaction for focus state.
If you look at the example webaim of a radio button you notice that you can not select the next radio ...
- 1,060
0
votes
1
answer
113
views
Color contrast and hover state [a11y]
When multiple pieces of information of different importance are presented within a same piece of UI (e.g., table row, list item), some designers prefer to have the "secondary" or "less ...
- 3
1
vote
1
answer
119
views
Accessibility reading order VS DOM order in a list of events
I'm trying to fix a CSS/DOM order problem on a website so it can pass an accessibility audit.
The problem is that the website is very visual, and the fixes must not change the appearance (as much as ...
- 113
10
votes
3
answers
2k
views
Is tabbing the best/only accessibility solution on a data heavy map UI?
We are building a digital library search tool for which we need to implement accessibility standards.
The map is VERY data dense (you can experience it here and I have included a screen capture below)....
- 203
0
votes
1
answer
53
views
Accessibility text of the "- Any -" option on HTML <select> element - do i need dashes/marker around the "any" option?
For the HTML element - Do I need dashes/markers around the "any" option to satisfy accessibility? If no markers, does the text have to be a sentence ? What types of text is accessible?
For ...
- 103
0
votes
1
answer
45
views
Text Contrast Issue: How to enhance a hero image section?
I'm using a hero image as a landing page for a ecommerce site. Here's what it looks like so far:
I'm having issues with the text's contrast over the background image. Any ideas on how I can make the ...
- 1
3
votes
1
answer
113
views
(WCAG) Should I use HTML tables for displaying singular data sets?
I'd like to display tabular data (an order summary) in a vertical table (headings in the left column, values to the right). In my use case, there is only ever one data set to display, so I'm unsure ...
- 153
1
vote
2
answers
235
views
Why does NNG recommend skeleton screens for full page but not for individual components
I need to decide between using a skeleton screen or a loading animation for the contents of a modal.
The modal itself contains an image, title, paragraph, couple of CTAs and a carousel at the bottom ...
- 598
4
votes
2
answers
119
views
Using label and tabindex for non-selectable elements that give context about the page
My work is developing a page to display a filterable list of mortgage products. As you can imagine mortgages are really complex, so there's a lot of extra information that a sighted user can simply ...
4
votes
1
answer
108
views
How do unicode block characters affect accessiblity?
I'm formatting an online poem that uses blackout text for erasures. My plan is to use an XML block character ( █ █) or █) to replace the appropriate characters. Does this have any ...
- 41
0
votes
2
answers
83
views
How can i demonstrate that a file has been uploaded from the selected element on a table in a dashboard
So, I have the following table on a dashboard that i'm trying to design in order certain process for the place where i work.
On it, I have a few fields (promoter's full name, legal terms, number, ...
- 103
1
vote
3
answers
214
views
What are some cases, if any, where a button element should act as a link?
Common practice is for links to use the a element, and buttons to use the button element. But are there any cases (even if their edge cases) where a button, via Javascript, should behave like a link?
0
votes
1
answer
227
views
How to check contrast of a transparent button with a border?
Simple question but I can't find the correct way to test.
I have a normal button, that is transparent but has a border colour with some opacity. I'm not convinced that the contrast ration is high ...
- 23
18
votes
8
answers
4k
views
Is colour alone enough to convey warning?
I'm designing page that has an alerts panel in relation to healthcare. I'm using a pale red to convey that action needs to be taken immediately, orange to show that something is due soon and green to ...
3
votes
2
answers
239
views
Are contrast checkers really accurate?
Is WCAG AA level truly necessary? I'm having difficulty making optimal contrast choices, and honestly, bold text, even at 16px, appears much more readable than regular text. Additionally, I often ...
- 95
1
vote
2
answers
493
views
What's the right UI of a dropdown when it's disabled?
There are several settings that users need to go through, one of them is selecting a model. By default, a model is pre-selected in the dropdown field. However, if the user expands the advanced options ...
- 11
9
votes
5
answers
3k
views
How to indicate that a button is locked?
I am designing a service, where certain features would be available only for registered (and paid plan) users.
On the front page, there are two options: "Quick scan", that selects the ...
- 198
3
votes
2
answers
369
views
Accessibility of Button States
I've seen some discourse online that best practice is to design the 'focused' and 'hover' states of buttons differently.
I was wondering if there is any practical reason or accessibility requirements ...
- 31
2
votes
1
answer
93
views
How to Address Keyboard Limitations for Users without a Numeric Keypad?
I'm currently working on a web application where users can use their keyboard number pads (mainly the following keys 2,4,5,6,8) to change perspectives from which the user is watching a 3D scene. For ...
- 21
3
votes
1
answer
416
views
Do accessibility standards (WCAG AA) require a screen reader to announce an HTML element upon mouse hover?
We are using the screen reader NVDA. We have a website that we are trying to make WCAG AA compliant. If you use only a keyboard (no mouse), and use the Tab key to navigate around the page, whenever an ...
- 133
0
votes
1
answer
140
views
Minimum touch target for apps
It is stated in human interface guidelines and material design that the touch target should be 44x44 & 48x48 respectively. Many top apps don't follow; isn't this an accessibility issue?
0
votes
1
answer
281
views
Do small icons have to pass at least 3:1 for contrast accessibility?
Can anyone clarify if icons (UI elements) 20x20 etc have to be 3:1 and is that a recommendation?
Thanks
- 27
2
votes
4
answers
456
views
What are the best practices to decide the length of label characters on the buttons?
I have come across lot of designs on internet where buttons are labelled with two or three words. While I did my research on various design systems i found the guidelines talking about meaningful ...
- 1,114
1
vote
1
answer
710
views
Does an input type text with its css display property set to none need a label?
We've got a few inputs in various places, which are of type text but their display property is set to none. Something like this:
<input type="text" style="display:none" value=&...
- 13
1
vote
3
answers
293
views
Accessibility question. Company has secondary brand color (orange) that doesn't pass any requirements. Only option change color?
The company I work for uses dark blue as the main primary color and orange as the secondary color. They have used it for years. It doesn't pass any accessibility requirements. We can't go darker since ...
- 27
0
votes
1
answer
50
views
What is the UX guideline or ruleset for making accessible while we have conditional formatting colors applied to each rows?
While we have color palette to handle conditional formatting of table rows we want to create accessible color palette. How is this handled addressing accessibility for colour blind like greyscale?
Any ...
- 1,114
2
votes
3
answers
149
views
How to indicate disabled list items in a list with alternating backgrounds?
I have a table of search results that have alternating grey and white backgrounds that, on it's own, look quite pleasant in my opinion:
Now, the user also has the option to unselect items by clicking ...
- 23