WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Mobile Native apps - buttons that use colours and text without any borders.

for

From: Steve Green
Date: Jan 23, 2020 7:40AM

I agree that SC 1.4.11 states that button borders are not needed to identify controls, but I believe this conflicts with another SC. Unfortunately, I can't recall which it is - perhaps 1.3.1 or 1.4.1. Anyway, that one says something to the effect that link text needs some form of affordance, such as an underline, if the context does not make it obvious that it is a link. Links in menus do not require such affordances because the grouping together of the words makes it obvious that they are links (according to the SC). Technique G182 talks about this.

Although links and buttons are different things, my view is that the same reasoning applies. A single button without a border does not have enough context for users to know it is a button, so some other affordance, such as an underline is required. That may not be necessary for groups of buttons though.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Jonathan Avila
Sent: 23 January 2020 14:19
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Mobile Native apps - buttons that use colours and text without any borders.

Hi Sean, WCAG 2.1 SC 1.4.11 indicates that button borders are not needed to identify controls. It leans on the idea that the text alone is enough to communicate the item is actionable. I personally have concerns with this notion because that assumes a certain level of cognition and also ability to scan and read all text in order to understand a role. Borders, backgrounds, and other indicators and other affordances help people with low vision and cognitive disabilities with cues so they don't have to read through each piece of text trying to figure out if it is actionable or not and doesn't require them to try and mouse over everything or tab to it to find out. While it is possible to apply custom CSS to buttons to in a browser to make all buttons appear actionable this is not always an option such as in mobile browsers and many users won't even know this is an option.

Jonathan

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Murphy, Sean
Sent: Thursday, January 23, 2020 12:54 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Mobile Native apps - buttons that use colours and text without any borders.

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


All,

From iOS 7 and onward Apple introduce buttons without any borders. The button only has a colour background with text. There is an accessibility feature when turned on provides a underline for the button to help a low vision user to know the it is a button if they cannot determine the colour. Android now apparently is also using this design style. Below is a graphic showing an example on what I am referring too:

[cid:image001.jpg@01D5D20D.A597BB50]


Does anyone know how the above impacts users with colour blindness or low vision? Is there any stats indicating what type of impact the above has to users? As we are trying to identify if any extra accessibility consideration is required.

Note, We are aware the above could fail "Using only colour" SC but all the OS's are now using it, indicating either really bad practice or relying on assistive tech within the OS.

Sean