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.

Filter by
Sorted by
Tagged with
0 votes
0 answers
11 views

Recommendations for accessibility tools/plugins on Figma [migrated]

My team is striving to design more accessible solutions and is actively trying to validate our work. We tried the paid version of the Stark Plugin, but we're not huge fans of it as it stands currently....
Mayur L.S's user avatar
1 vote
1 answer
55 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 ...
UXerUIer's user avatar
  • 5,425
0 votes
1 answer
36 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 ...
Joselin Jocklingson's user avatar
1 vote
1 answer
42 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 ...
Alain P's user avatar
  • 111
1 vote
1 answer
45 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 ...
Helge's user avatar
  • 43
0 votes
1 answer
20 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 ...
Joselin Jocklingson's user avatar
0 votes
2 answers
86 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 ...
HappyHands31's user avatar
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 ...
chamou2099's user avatar
3 votes
2 answers
78 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 ...
bigblind's user avatar
  • 673
0 votes
1 answer
94 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....
Dog's user avatar
  • 115
1 vote
1 answer
58 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 ...
Genevieve Morency's user avatar
0 votes
1 answer
69 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 ...
Angel's user avatar
  • 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 ...
aospovat's user avatar
1 vote
2 answers
98 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 "...
Angel's user avatar
  • 143
0 votes
2 answers
91 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 ...
Kevin M.'s user avatar
  • 1,050
0 votes
1 answer
64 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 ...
hayavuk's user avatar
1 vote
1 answer
59 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 ...
Chris's user avatar
  • 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)....
GilShalit's user avatar
  • 203
0 votes
1 answer
33 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 ...
Joshua Graham's user avatar
0 votes
1 answer
44 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 ...
solange's user avatar
3 votes
1 answer
95 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 ...
Patrick Nemenz's user avatar
1 vote
2 answers
151 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 ...
TDsouza's user avatar
  • 596
3 votes
2 answers
67 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 ...
Leonardo Petrucci's user avatar
3 votes
1 answer
73 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 ( █ &block;) or &#9608;) to replace the appropriate characters. Does this have any ...
Sirmontegu's user avatar
0 votes
2 answers
73 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, ...
Miguel V's user avatar
  • 103
1 vote
3 answers
162 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?
Ralph David Abernathy's user avatar
0 votes
1 answer
157 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 ...
Burns's user avatar
  • 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 ...
Beth Medlicott foster's user avatar
3 votes
2 answers
192 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 ...
Gugalcrom123's user avatar
1 vote
2 answers
323 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 ...
Bot's user avatar
  • 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 ...
Claudio's user avatar
  • 198
3 votes
2 answers
206 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 ...
Mark's user avatar
  • 31
2 votes
1 answer
87 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 ...
is qr's user avatar
  • 21
2 votes
1 answer
243 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 ...
John Gilmer's user avatar
0 votes
1 answer
89 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?
Suhas Paunikar's user avatar
0 votes
1 answer
176 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
Keano's user avatar
  • 25
2 votes
4 answers
259 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 ...
Ashwin Kulkarni's user avatar
1 vote
1 answer
355 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=&...
Ultram's user avatar
  • 13
1 vote
3 answers
176 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 ...
Keano's user avatar
  • 25
0 votes
1 answer
48 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 ...
Ashwin Kulkarni's user avatar
2 votes
3 answers
140 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 ...
Pete's user avatar
  • 23
0 votes
3 answers
238 views

How do I make a grid of radio buttons accessible and intuitive?

Bakground I'm designing a form for recruiters where one question pertains what qualifications are required for the job. My employer is very serious about accessibility/WCAG so any designs need to ...
izaqski's user avatar
  • 21
0 votes
0 answers
44 views

Why does macOS default to not allowing tab to focus on buttons?

I know I can turn it on and also use the OptionTab but I was wondering why they would use that as the default in the first place. There was an article about it from 2014 but has been updated over ...
Archimedes Trajano's user avatar
0 votes
2 answers
63 views

Are two buttons with similar appearance and text an accessibility concern?

I'm inspired by this answer: https://meta.stackexchange.com/a/386770/175002 but I've come across this elsewhere as well. The two buttons read: Accept all cookies Accept only necessary I'm straining ...
AncientSwordRage's user avatar
0 votes
2 answers
134 views

Should my headline be conversational, or stick to the numbers?

which of these two options is easier and clearer for the user to understand and consume? Option 1: Option 2:
Emmanuel's user avatar
0 votes
2 answers
302 views

APCA (WCAG 3.0) does not allow for 14px font to be used as a regular base

According to APCA (WCAG 3.0), we are not able to use 14px font as a regular base, but when it comes to SaaS application design, 14px is commonly used as the base font size. Despite my attempt to use ...
Iroshan De Zilva's user avatar
1 vote
1 answer
569 views

What accessibility pattern for filter/sort "dropdown"?

I have a design that displays a list of content that you can filter by different categories. Each filter is displayed in a dropdown menu that lets you choose one or more options, which when activated (...
cuserjuicer's user avatar
0 votes
1 answer
46 views

Section 508 and "applets and plugins"

Before the Section 508 refresh, 508 had the following provision: (m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, ...
Scribblemacher's user avatar
0 votes
2 answers
891 views

Does a hover state background need to pass color contrast for accessibility?

We have some discussion going on between myself (design) and lead engineer. With this key question: Does the background of a hover state have to pass color contrast? Our current system has our ...
Aaron Merritt's user avatar
1 vote
3 answers
183 views

Design system – Different font sizes for small an big viewports

everyone! We are currently working in a project team on a design system that is primarily used to develop web applications. These web applications mainly consist of forms. One requirement here is that ...
s-lauer's user avatar
  • 21

1
2 3 4 5
17