I was just wondering if it is allowed to have links or other interactive elements which performs an action within a live region?? The fact that the links are interactive and live regions are immediately made available to screen readers, is there a Success criteria or recommendation from WCAG that says not to do that?
There's nothing in WCAG that specifically addresses your situation but links and live regions are unrelated topics.
A live region is used when there is dynamic content on the page. For example, if you have a page with search results and there are filters to limit the results, as you select various filters, the number of results change (dynamic) and that change should be announced to assistive technology, typically through a live region.
Another example is a "settings" page. As you change settings, if the changes are automatically saved and a message displays saying the changes were saved, that message is dynamic (it was added to the page) and like the search result changes should be conveyed to assistive technology, again, typically through a live region.
In your situation, you have a link in a live region. Is the text for that link dynamic? Is there something that will cause the link text to change? If so, then it makes sense to have the link in a live region.
Related
We have a project at my work at the moment around ensuring we meet accessibility standards on our website.
Our emails are built using Salesforce Marketing Cloud layouts. Does anyone know how we can see or test how 'accessible' they are?
I can test using ReturnPath to see how they render on various devices and that gives me results for colour blindness, but I'm not sure how to test how well they would or wouldn't work with a screen reader for example
Emails are a tough one from an accessibility perspective. We are still stuck using tables for layout even in 2021!
We can't use WAI-ARIA and CSS is very limited.
As such I have a smaller checklist for emails that covers the important stuff we can control.
The main things I would look at are:
Reading order
Make sure that the email reads left to right and then downwards (assuming the language is a left to right language, otherwise reverse it)
Use headings
Email marketers often just style normal text instead of putting proper headings in. Make sure headings are in fact <h2> to <h6> with a single <h1> explaining the purpose of the email at the start.
Also make sure that the headings do not skip levels (so don't go from <h2> to <h4> for example).
Colour contrast
The exact same rules for websites apply to emails. I would recommend running the colours through the Web Aim colour contrast checker for your text and background around the text, button backgrounds and text etc.
Alt Attributes
Alt attributes on images is the big one you need to check for especially in emails where images might be the only content within a hyperlink. As you can't use aria-label or visually hidden text in an email alt attributes are the only way you can make a link have meaning if it contains an image (plus as email clients block images it means there is meaningful text for everyone else not just screen reader users).
Meaningful Link Text
Along the same lines make sure links do not just say "Read more". Instead make link text meaningful e.g. "Read our article on X Y Z".
Use a descriptive subject line
This one is the only one that is "difficult" as a marketer. You want subject lines to intrigue people to open the email, however for people with cognitive impairments cryptic subject lines can be disturbing / confusing etc.
Getting the balance between "giving the game away" and meaningful subject lines is difficult, if unsure err towards meaningful (it may help your open rate / conversion rate anyway so A / B test it!)
View in Browser
Due to the limitations of email clients the best way to ensure accessibility is to have a custom "view in browser" link in the email (as salesforce etc. are very unlikely to do a good job of the browser versions of their emails).
That way you can use WAI-ARIA, visually hidden text etc. and mark the page up properly, complying with WCAG 2.1 (and very soon WCAG 2.2) requirements.
Obviously I am aware of the amount of work this entails but once you have a template and components built that are accessible it does become much easier.
Testing
Personally I would just test manually, but I am sure somewhere out there an email testing service exists similar to Axe Accessibility Checker.
But given the length of a typical email I would say a manual check will only take 2 minutes once you know what to look for so a service may not be worth it.
You could always copy and paste the email HTML into a file and save it with a .html extension and then open and test it in a browser / accessibility checker. But you might get a load of issues you can't resolve due to the use of tables for layout.
Finally - learning to use a screen reader takes less than an hour, grab NVDA or VoiceOver and test the email yourself, if you can understand it and access all the same information as everyone else then send it!
Does anyone know how I should handle aria-labels on link labels that repeat dozens of time on a page? My website accessibility checker tool keeps flagging these elements as using the same link text for these labels and they require unique aria-labels. Problem is, all of the links go to the same generic pages and am not sure how to make the aria-labels specific enough.
Has anyone dealt with anything like this before and how did you handle it? I imagine I'd need a JS solution to inject aria-labels, but before I invest in a JS resource doing this for me does anyone know how I can make these specific enough to pass the checker but not confuse screen readers?
Screenshot of category labels for each article
In this case, it is correct to hide all duplicate links except for the first element that contains these labels
You force people with disabilities to navigate through all the same links using keyboard navigation, this is also bad for a screen reader
1.) Hide any duplicate labels from your screen reader
aria-hidden="true"
2.) Hide any duplicate labels from keyboard navigation
tabindex="-1"
Note! don't forget to leave one unique link! You can also hide everything and add them to context under elements or above elements. When I say hide, I mean the above methods.
It's easy to check for accessibility, close your eyes and imagine you click on a tab and hear (in a screen reader) a re-link through every two elements! This is annoying isn't it?
There is no need for aria-labels and what you are doing is not an accessibility fail. You have to bear in mind the automated accessibility checkers are dumb (and in this case quite possibly wrong) and are only there to offer guidance on common accessibility fails.
The main reason you are seeing this is that the accessibility checker thinks that this is text like "read more" that is not descriptive of the end-point. It should pick up the fact that the end-point is the same but it obviously does not.
Using the same link text for links that go to the same page is encouraged:
It is a best practice for links with the same destination to have
consistent descriptions (and this is a requirement per Success
Criterion 3.2.4 for pages in a set). It is also a best practice for
links with different purposes and destinations to have different
descriptions.
Source: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html
Also one of the checks for success criterion 3.2.4 - Consistent Identification is:
Check that this associated text is identical for each user interface
component with the same function.
Source: https://www.w3.org/WAI/WCAG21/Techniques/general/G197.html
Assuming your articles are marked-up correctly a screen reader user could skip between headings (<h2>s for example) in order to not hear the same category links. This is one of the primary ways a screen reader user will navigate a page (via headings).
For this reason the categories should be AFTER the heading in the HTML so that they are read out after the heading.
You could place the heading visually after the tags using techniques similar to those in this answer I gave. This would be acceptable for "logical tab order" in my opinion so you wouldn't fail there.
Your only other option would be to use aria-hidden="true" and tabindex="-1" on your category links to hide them from screen reader users and take them out of the tab order. If you did this you would need to ensure a categories list is available at the side of the page.
Personally I would go with the first option as the categories information is useful to screen reader users, the fact the links repeat themselves over and over if I search by links would indicate they are categories to me when using a screen reader anyway.
I am a non-programmer working for a church. We have no tech staff. Our website is based upon a template that doesn't provide a widget for counting clicks. We'd like to add one (or preferably two) jpg image(s) with a counter(s) to track the number of times clicked, and display the cumulative total next to the jpg(s). Church members will go to the page and click each time they participate in one or both of two different church objectives.
Our web host says to do this I must find, write, or purchase 3rd party code written in iframe, to embed into one of our pages.
I googled the issue and am only finding hit counters which track visitors to a page, rather than clicks of an image. We'd prefer two different jpgs to track two different objectives, but if necessary I can change from two jpgs to one, if having two counters on the same page is a problem.
Can anyone point me to where I could get code like this either for free, or for pay, and what it would cost?
There is a lot of good information here. They talk about an issue with iframe receiving the click vs. you recording it. If you keep reading there is a possibility to work it. Hope this helps!
Look here: Detect Click into Iframe using JavaScript
We're building a site for an academic institution. This institution offers many subjects, and we don't want to show all of them at once on the homepage. So we designed a homepage that shows the 2 main categories of studies, and clicking on a category will show a div with the list of subjects in that category.
Our client is worried SEO-wise about those div's being hidden on page-load. Is he correct in his concern?
It depends on how you hide them if you use a z-order or a far left off screen position they will still be read by the Google bot. if you use display none or hidden then it may have an effect on your SEO.
You're right to have concern. Google will count some of or significantly reduce content that isn't displayed on page load. I would recommend letting the text display at load, then setting it to display none via JavaScript. This way the search engine picks it up.
You can do so with a simple jQuery hide snippet like this:
<p class="remove">Text displayed on load.</p>
$j(document).ready(function(){
$('.remove').hide();
});
I read an article by Roger Johansson on this subject, and it seems that the conclusion is that as long as the intent isn't to show that content only to search engines, hiding is fine. I don't see any mention of preferring one method of hiding over the other.
In addition, in that post's comments there was a link to an answer by a Google worker that said:
Merely using display:none will not automatically trigger a penalty. The key is whether or not there is a mechanism - either automatic or one that is invoked by the user - to make the content visible
In my case of course there will be such a mechanism, because we want our users to see that content, just not at page-load...
Will the Googlebot "click" buttons on a Flex 3 site when it indexes it?
I've got a Flex 3 site. When the user clicks one of the buttons on my site, a panel opens and text appears. As the text is not immediately visible, will Google index the content in the panel? (I'm not cloaking or anything weird. It's just the normal functioning of the site).
Are there any Flex 3 developers out there who see Keywords listed in Google Webmaster Tools for text that is visible only after clicking a button?
Thank you.
-Laxmidi
Straight from google itself:
Q: How does Google "see" the contents
of a Flash file? We've developed an
algorithm that explores Flash files in
the same way that a person would, by
clicking buttons, entering input, and
so on. Our algorithm remembers all of
the text that it encounters along the
way, and that content is then
available to be indexed. We can't tell
you all of the proprietary details,
but we can tell you that the
algorithm's effectiveness was improved
by utilizing Adobe's new Searchable
SWF library.
Q: What do I need to do to get Google
to index the text in my Flash files?
Basically, you don't need to do
anything. The improvements that we
have made do not require any special
action on the part of web designers or
webmasters. If you have Flash content
on your website, we will automatically
begin to index it, up to the limits of
our current technical ability (see
next question).
That said, you should be aware that
Google is now able to see the text
that appears to visitors of your
website. If you prefer Google to
ignore your less informative content,
such as a "copyright" or "loading"
message, consider replacing the text
within an image, which will make it
effectively invisible to us.
In short I haven't actually seen this working on my own projects (though I don't target SEO) Adobe acquired Omniture an SEO company recently and the people at Google are smart, so I don't doubt this will be progressing nicely in the near future, more info and experiments can be found here:
http://www.flashnseo.com/
http://www.omniture.com/en/
I don't think there is a clear answer to this one since it's in flux and Google can't disclose exactly how their algorithms will work, but as stated in the other answer here I'd imagine if the information is still represented as text in the swf, they'll find a way to dig it up, in terms of how your site will handle deep linking, that's still on the developers (although I've got my fingers crossed that between Adobe and Google they're able to ease the pain on us).