With the addition of some simple code, you can make your website accessible to ALL users. Your pretty elements mean nothing if they are blank gaps when AT goes through your website. ONE LAST THOUGHT ON ARIA LABELS AND ACCESSIBILITY You can use the built-in VoiceOver screen reader on mac (shortcut: command + F5) or use NVDA for PCs. Most users that are using AT will not see that a new window is opened or that they jumped to a new page or a new website altogether. Be Descriptive! Let the user know exactly what the link will do when it is clicked.It helps assistive technology attach a label, which is otherwise anonymous. Hold up, we want you to love ARIA labels as much as us, but before you go around ‘TY’-tagging every element on your website… HERE ARE TWO QUICK TIPS TO KEEP IN MIND The aria-label attribute specifies a string labelling the current element. label, role heading, status, alert, live, relevant, atomic, hidden. It’s time we make it fully functional for both humans and robots! ARIA attributes provide additional information about the semantics of elements to. We are big (read it: huge) advocates of ARIA labels, because we want to ensure everyone can experience the hard work you put into your website. Now you and Siri will be on the same page (literally!) For example, your ARIA label for that mysterious button may speak “button, your perfect day begins here, redirects you to the contact form”. Imagine Siri reading you a description of a wedding venue, and the last line she says is “your perfect day begins here.” Listening to that sentence you would have no idea that that text is actually overlaid on a button you’re meant to click (like how are you supposed to know there’s a button there!)Īdding an ARIA label will tell Siri how to descriptively read the sentence so you know exactly how to learn more about that wedding venue, even if you can’t physically see the page. The aria-label attribute is intended for interactive elements only. If you give your
0 Comments
Leave a Reply. |