How to implement ARIA on a responsive site
We're working to make one of our responsive sites more accessible, but are struggling to find heads around ARIA as it goes against the basic principle of separating design elements from HTML.
For example, if an element is hidden in an aria, you can specify it as aria-hidden = "true". However, the greatest visibility is determined by media queries based on screen size, etc.
In other cases, elements work in completely different ways based on media queries. So at some sizes aria-haspopup = "true" would be appropriate, while at other resolutions the navigation is always visible.
Am I missing something, or are we again in font tags with this standard? Should we add / remove aria tags using javascript if needed?
source to share
Actually Kenneth, your question makes a lot of sense and, yes, the toolkit for responsive sites isn't perfect. I don't have an answer for you, but I have to say too long to be a comment ...
Consider the following example: You have a menu button that opens a side drawer using a short sliding animation. Without any consideration, your task is simple (let's say the box is on the left and is 250px wide):
@media ... (min-width: 1000px)
#drawer {
left: 0;
}
@media ... (max-width: 999px)
#drawer {
left: -250px;
}
#drawer.opened {
left: 0;
}
(Not exact syntax, add your own magic for sliding animation)
To make it available, you need to do one of the following:
option 1
Do not use aria-hidden='true'
. This is usually enough to hide the drawer with visibility:hidden
or display:none
. Of course, now you need to wait for the crawl animation to end in order to hide the box (or you will lose the animation).
option 2
Use aria-hidden='true'
. You will have to catch the window size and add / remove aria-hidden='true'
when switching sizes (you lose the magic of media queries).
To summarize, you are correct. There is definitely room for improvement. This is especially true given the overall shift to move the material away from JS to keep it smooth at 60fps.
source to share
You must use the function window.matchMedia
For example:
var mm = window.matchMedia("(min-width: 600px)");
mm.addListener(updateAriaHidden);
updateAriaHidden(mm);
var updateAriaHidden= function (obj) {
if (obj.matches) {
// set aria-hidden true/false when width >= 600px
}
else {
// set aria-hidden true/false when width < 600px
}
}
For example, using jQuery, you can use a selector :hidden
with a custom CSS class to set the attribute dynamically aria-hidden
:
$(".toggleable:hidden').attr('aria-hidden', true);
$(".toggleable:visible').attr('aria-hidden', false);
Using a custom class makes it easy to map elements that will change based on your media queries
source to share