Success criterion 2.4.1 of WCAG 2.X requires web authors to provide "a mechanism to bypass blocks of content that are repeated on multiple Web pages" (e.g. navigation sidebars, headers).
One of the proposed techniques to accomplish this is a hidden "skip to main content" link that a screenreader-assisted user may use to jump to the main content.
My question is, isn't the "skip to main content" link redundant, would it be acceptable to automatically auto-focus on the main content (or main heading element of the main content) when the page is navigated to? Intuitively this would feel more usable to me since the focus is automatically in the correct place a soon as the page is first loaded/navigated to.
I have implemented "skip to main navigation" links on my site. However, these links add technical complexity and maintenance; moveover the link feels like an extra step compared to the auto-focus solution.
Autofocus is not listed in the Sufficient techniques to Bypass Blocks for some good reasons.
It would work exactly once, while skip links can be reused while working with the site. Just as a site’s home page is often the least visited page, users do not read the site once from top to down and are done with it. Their navigation needs differ, they need to quickly find stuff again, that’s why bypassing big blocks of repeating content is important.
If the whole page is loaded (in contrast to a single page application) you should avoid autofocus except for some rare valid use cases, as it’s disorienting not only for screen reader users.
From Accessibility Considerations for autofocus on MDN:
Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing […] can cause the page to scroll on load. […] the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.
That means that all users risk to miss the page header with the main menu, which causes confusion for everyone.
For a single page application, on the other hand, I believe it to be best practice to focus the main content’s headline after navigation.
Related
I'm creating a website that allows users to create their own subchannels. Sorts of like subreddits (if you're familiar with reddit).
And I want to make it so that subchannel administrators are allowed to upload their own CSS files (with a max filesize) that would override the default styles for their subchannels. (Users would also be able to opt out of custom styles.)
I've only heard of a few websites doing this so it's kind of hard to get info on the risks involved. Would there be any potential security risks?
I would be doing this with Laravel, for reference.
Javascript can be executed in CSS, you have to make sure that you are using some filtering.
I have also seen incidents where someone has covered the entire page on a microsoft controlled site with a transparent pixel, linking to a malicious site. Clicking anywhere triggered the attackers site to appear.
This could however be safe if the user only sees his or her own CSS, and they would have no way of someone else viewing what they have done. Otherwise some sort of whitelist or markdown would work.
There is also the potential that the user CSS could break your site, for example making the navigation menu 0x0 pixels or moving it offscreen to -1000, -1000. Or the CSS itself could reference images from other sites, which you can't guarantee will continue to stay up.
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.
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...
I would like to know at which stage is it okay to start manipulating HTML elements/content using Javascript so as not to impair SEO?
I have read somewhere that HTML content that is hidden using the CSS property display:none is often penalized by Google crawlers, with good reason from what I'm led to believe...I ask this as I intend to have some div panels that are initially hidden, but shown once the user clicks on an appropriate link. My intention is therefore not to hide content from users entirely - just intially to give them a better user experience - I'm afraid Google may not see it that way!
My reason for doing this is to prevent the split second (or in some cases, a full 2 seconds) of ghastly unstyled html elements (positioning), before my Javascript comes in to position, hide and neaten everything up. So adding the display:none at the forefront, and then using Javascript to toggle visibility would have been ideal, but is apparently a no-no with Google Search Engine bot.
Do you experts have any advice? Thank you!
google can now crawl AJAX sites using a simple URL substitution trick; you might be able to take advantage of this to let googlebot see a plain html version of the page for indexing instead of your load-optimized page; see http://code.google.com/web/ajaxcrawling/docs/getting-started.html
If the content in question exists on the page in the html, and is accessible to the user by the time the page finishes loading initially, then you are okay. You want to make sure google can lead a user to your page and see the content in question without requiring further interaction. Adding new content to the html after the initial load (i.e. content from the server), can be problematic for SEO. However if all content is in the html by the end of the page load, then you shouldn't get docked. Keep in mind, good SEO strategy dictates using standard methods of usability so the web crawler can access your content.
Also, each page should follow a content theme. Example: Don't abuse users by hiding five different unrelated blocks of content "medical devices, kazoos, best diners, motorcycles, toxic waste" on one page. Theoretically you could take all of your site's content and lay it out on one page using javascript and 'display:none' waiting for an 'onClick', but that smells like spam.
EDIT, additional info as pertaining to the original question:
The search engine friendly way to display content dynamically is to load it, then hide it from the user.
Is it good for user experience to duplicate browser/keyboard functionality?
For example: to provide these links on a web-page.
"Back to top" link
"Print this page" link
"Add to Favorite" link
"Back" button/link
"Text zoom" button alt text http://shup.com/Shup/344995/110421205515-My-Desktop.png
Are they really create Site's usability and accessibility?
How screen reader will behave these links, will these confuse to screen reader users?
Many people haven't gotten into the habit of using the Home and End keys to go to the top and bottom of the page, so I don't find Back to Top links highly objectionable.
Print this page links can present a printer-friendly page, instead of the main page which is generally littered with banners and other stuff.
Add to favorites - Not a big fan.
Back button - Can be useful in workflow scenarios, but it better do exactly the same thing that the back button in my browser does. Generally the more common pattern is to provide a link, with describing text, such as "Return to Main Page."
Text Zoom Button - Love it. It allows me to tweak one site, while retaining the settings in my browser for other sites.
As a screen reader user I don't really care one way or the other. Listening to a couple extra links doesn't make a difference to me. Screen reader users are generally going to be a very small minority of the visitors to a site. If adding links such as top of page or add to favorites makes the site more usable to non screen reader users I would say add the links since it is something that's very easy for screen reader users to ignore. If you are writing a site specifically targeted at screen reader users then you may not want to add the links since they would be the majority of your users.
Adding such links should be motivated by a scenario. If users normally would print the page at a certain stage of the workflow when visiting your page, then it will be much more convenient for most of the users if the specific command option is directly visible and can be executed with a single-click.
Scenario: A user wants to buy an online ticket. They will select the event, choose a category, enter their personal details and billing information the finally will print the ticket. Instead of leaving the user alone at this last step and make him search the browser menus simply offer the print option inline in the body of the page.
I would say it was generally a very bad idea; the screen reader would definitely include ways of accessing the browser's implementation of that functionality, and duplicating that just wastes their time.
I would say that boilerplate-text is almost always bad for screen reader users.