WebAIM - Web Accessibility In Mind

E-mail List Archives

Web accessibility questions

for

From: Michelle DeYoung
Date: Mar 9, 2019 10:16AM

Hello!
I am not sure where or how to post my questions to the forum. Could you help?
Here are my questions:
Links in text should not rely on color alone to help identify them as link.  How does this apply to links that are designed to look like buttons?The way things are designed anymore does no allow for links to always look like links and buttons to always look like buttons.Note: Buttons contain action text where links do not always do the same. Sometimes designers make "Buy Now" or "Learn more" appear as buttons when they are links to another page in the site.

An example would be a Submit button that looks like a button, and next to it is a Cancel button that looks like a link. The Cancel button is made to look like a link for a better UX so it is less likely to get accidentally selected or mistaken for a Submit button.  If the Cancel looks like a button too, usually the designer will downplay the color, thus making the button look inactive or of the like.

In the example image below, the text "button" is surrounded with a border defining it as a button. Next to it is button text that is not surrounded by a border and does not provide a another means to differentiate the text as something that is possible selectable. 


Understanding Success Criterion 1.4.11: Non-text Contrast

|
|
|
|
|
|

|

|
|
|
|
Understanding Success Criterion 1.4.11: Non-text Contrast
|

|

|





Another example would be when designers have two links right next to each other, but one needs to be set off as being more important than the other.  Designers sometimes choose to make one of them look like a button.

And what about Badges (Ii.e."Success", "New", "Warning").   Badges tend to look just like buttons, but are not always selectable, and do not always display action text. Badges can also be links that look like buttons. What is the recommendation for elements like linked Badges that look like buttons? How should they be set off to appear different from Badges that are not selectable?

See example Badges on the Bootstrap page.
https://getbootstrap.com/docs/4.0/components/badge/
Ideally links should look like links and buttons should look like buttons as this will help everyone. 
In the case of Badges that look like buttons, but can also be links, what is the recommendation?
Many times a slight or strong hover color can be applied for button elements or links, but there is no requirement for on-hover color or strength.

Why should links in content need to be set off (i.e. bold, underlined) so they are identifiable as links, but not buttons, or buttons that look like links, or linked badges?  Does this only apply to links that are in a sentence or paragraph?----------------------------------

Different question: Zooming in on a page to 200% with [CTRL] [+]
Ex:I have a text on a page that is larger than other text on the page, like a Blockquote. I commence zooming in on the page to 200% with [CTRL] [+].
As I zoom the Blockquote text increases in size along with the rest of the page.
But, when I get to 200%, suddenly the Blockquote text is smaller; say like it was at 150% and not larger like it was at 170%. 

Does having mobile breakpoints set impact how a page is displayed or content is sized when zooming in on page content from a Desktop display?

If the the designer and developer decided the Blockquote is fine at 200% on desktop, but is way too large on a mobile display, how should that be handled?  

Does zooming in on a desktop viewport engage the media media queries set for Mobile or are they or can they be handled independently of each other?
If they cannot be handled independently, how does this impact the following success criterion?
Success Criterion 1.4.4 Resize text (Level AA): Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
Understanding Success Criterion 1.4.4: Resize text

|
|
|
|
Understanding Success Criterion 1.4.4: Resize text
|

|

|


Success Criterion 1.4.10 Reflow (Level AA): Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
Understanding Success Criterion 1.4.10: Reflow

|
|
|
|
|
|

|

|
|
|
|
Understanding Success Criterion 1.4.10: Reflow
|

|

|



Thanks,Michelle DeYoung