Say we have a link on a website in the header navigation called “About”, that opens a dropdown. If this is coded without accessibility in mind, it could read as “About Link”. I hear it's a link and it's called about that tells me that when I double tap it, I'll be redirected to a new page called about, however I will not know that it’s a dropdown. A better way to do this would have it say, “about collapsed”. It will get that word “collapsed” from something called ARIA dash expanded, which is an html attribute that is set to true or false using some JavaScript, and that is just exposed to the screen reader without the need to add extra text. There are also html attributes that allow you to specify that something is the current page, for instance, if you have a series of pagination links, you can use something called ARIA dash current to mark the currently active page, which is useful when looking through pages of search results. Say I have “123 next” as the page numbers and next page link, and I hear “2 link current”, then I know I'm on the second page and next I'll go to page three. Before thinking about when to put more text consider the other contextual information that you can give through ARIA or through landmarks.
Another way to ease navigation is to place links in a banner landmark, which tells me that they're part of the header. ARIA-Current is a good place to represent my location in a series of steps like that tells me which step is the current step. Say there's a page called “Business Hours” and it's under “About” which is under “Home”. The list of those links with greater than symbols between them is good enough for me as a screen reader user to know “Okay, these are breadcrumbs because I can see the last item here is “Business Hours”, and I can also see that “Business Hours” is the title of the page.
Comments
0 comments
Article is closed for comments.