Twitter | Search | |
Dan Tonon
Author of the CSS Grid in IE series on CSS Tricks. Multi award winning front end web developer. Avid contributor to open source. Accessibility expert.
1,357
Tweets
53
Following
165
Followers
Tweets
Dan Tonon 7h
If you are saying that it is better to use aria-label on an icon-only button rather than title then the only users that benefit are screen-reader users. At least with the title attribute you get both screen-reader AND desktop users with decent eye sight.
Reply Retweet Like
Dan Tonon 8h
Even Sara acknowledges here that there are many people who benefit from the tooltip that the title attribute provides. You are arguing that it is far better to not provide any help for anyone over at least some help for some users.
Reply Retweet Like
Dan Tonon 8h
Replying to @getify
If it isn't some sort of JS framework powered app, that isn't so simple to do. You don't want to be doing server requests for HTML when a user switches from a mobile like view to a desktop like view.
Reply Retweet Like
Dan Tonon 8h
I don't think mismanaged expectations is true. People know not to expect a tooltip on mobile and tablet but if people see a weird icon button they don't understand on desktop, hovering over it is the first thing they do.
Reply Retweet Like
Dan Tonon 9h
Replying to @getify
Have you ever had to duplicate content so you could have one design on mobile and another on desktop? It's ugly but adding a hidden attribute to one of the copies makes this more semantically correct.
Reply Retweet Like
Dan Tonon 9h
Just please answer me this. Why is it so immensely better to provide NO text to ANYONE rather at least SOME text to SOME people? This conversation is in relation to icon only buttons and for whatever reason, adding a visible label is not an option.
Reply Retweet Like
Dan Tonon 16h
This is that situation where you have been given a design that has been signed off and it's not allowed to change and it has icon only buttons in it. I don't understand why you would prefer to not give anyone any text over at least some people getting some text. 😕
Reply Retweet Like
Dan Tonon 16h
And yes I have read his article. It doesn't really sway my opinion. The title attribute enhances the experience for those that have access to it like how using a modern browser often gives an enhanced experience compared to people using old browsers.
Reply Retweet Like
Dan Tonon 16h
This is in that situation where the designer has used an icon-only button and for whatever reason you aren't allowed to add text to the button. The goal is to create the best experience that you can on each platform. Mobile and tablet can't be helped but desktop can so why not?
Reply Retweet Like
Dan Tonon 16h
Only talking about non-js icon only buttons. All of the icon only examples you gave do not provide text for desktop or mobile users so they have to guess what the button does. Using this title attribute technique, at least the sr AND desktop users get the button text.
Reply Retweet Like
Dan Tonon 16h
#1 simple method for labelling ICON ONLY BUTTONS in my opinion. I left off the "icon only" bit in a reply to an article about icon only buttons and then get told off for ranking it above providing a visible label. 😤 That's not what I meant. 🙄
Reply Retweet Like
Dan Tonon 16h
Replying to @JCurt
It's done just waiting for it to be published. I don't have a publish date yet though. I need to chase up.
Reply Retweet Like
Dan Tonon 16h
#1 simple solution in terms of icon only buttons. It's a better experience for the desktop users and it makes no difference to the non-desktop users.
Reply Retweet Like
Dan Tonon 16h
I'm only talking about simple methods that don't require lots of custom JS and styles. Which creates a better experience? Providing a tooltip or not providing it? Mobile users don't get the tooltip either way so providing the desktop tooltip doesn't diminish their experience.
Reply Retweet Like
Dan Tonon 17h
I say it's the best method since it also adds the benefit of adding the tooltip for desktop users. Non of the other methods add the tooltip. Of coarse adding a visible label is better but the article is specifically about buttons with just an icon.
Reply Retweet Like
Dan Tonon 17h
Replying to @SaraSoueidan
Note that the title attribute is only used as the button name by screen-readers if there is no other text available. <button title="Example"> Go </button> In this case, "Go" is the button name and "Example" is extra descriptive text that is only read when the button has focus.
Reply Retweet Like
Dan Tonon 17h
Replying to @SaraSoueidan
Sara, you didn't write about the #1 best method for labelling the button. <button title="button label"> <svg aria-hidden="true"></svg> </button> - Desktop users get a tooltip which helps with the UX issue of no label - Screen readers read the title attribute as the button name
Reply Retweet Like
Dan Tonon retweeted
Claudia Romano May 21
💡Accessibility tip: when using blocks of text in different languages, make sure to include the 'lang' attribute. This way, Screen Readers will know how to pronounce that text 👇
Reply Retweet Like
Dan Tonon May 21
It's never coming. CSS3 split the spec up into modules that level seperately. The earth will be consumed by the sun before CSS5 comes out.
Reply Retweet Like
Dan Tonon retweeted
Matt Thomas May 21
Hi, sorry to bother you, we're a couple of UX Design students seeking insights from people learning frontend dev skills - would you mind looking at our short survey and maybe sharing it, please? Many thanks 😊
Reply Retweet Like