@vanzasetia
Posted
Hi there! π
You've got a lot of feedback from some people. So, I'm just going to give one or two pieces of feedback on this solution.
- Firstly, I suggest using
rem
forfont-size
. It's important to make sure that it scales properly when the users change their default font size setting. - Secondly, I agree with @FluffyKas that only use
aria-label
if there's no visible text like icon buttons (e.g. Twitter "love" button, etc).
Anyway, I decided to create a page where there's visible link text and aria-label
. I tested it with Narrator in the Chrome browser, and here's the result.
- Once the page is loaded, Narrator reads the visible text and ignores the
aria-label
. - After I tab (focus) to the link, Narrator reads the
aria-label
and ignores the visible text. - By the way, here's the HTML markup that I tested.
<a href="/" aria-label="screen reader please read me">I just read the visible text</a>
I suggest you to read this article by Josh Comeau about pixels and rems units. It's an amazing article that will tell you when to use px
and when to use rem
.
So, that's it! Hope it's useful and sorry for the late reply. π
Marked as helpful
@Sdann26
Posted
@vanzasetia Vanza God!!