This question is about accessibility issue I have on one of my websites, when I use the tab key I get a few errors:
Only some parts of the navigation bar are selected
I cannot see which part is currently selected
Tabs are only going over navigation bar and not continuing to content
How can I address these issues? any good tutorials on this?
Thanks.
Here is a complete list for you to search for the problematic area:
Techniques and Failures for Web Content Accessibility Guidelines (WCAG) 2.0 from W3C
Some pages provide code/resources:
C15: Using CSS to change the presentation of a user interface component when it receives focus
G1: Adding a link at the top of each page that goes directly to the main content area (Skip to content)
Related
I cannot work out how to link a button using the rectangular hot spot tool in Dreamweaver to a specific tab panel or pane on the same page. I have an index page of stories where, for example, I would like to link each number on the index to separate panels on the same page. How can this be done using HTML?
You can see the website here:
https://illustratedfairytales.com/
I have googled the subject, but I haven't been able to find anything which helps.
I'm trying to create my own website using this HTML5 template. In this link when I scroll down or up the tabs change (e.g., from "about" to "Things I Can Do"). Also note that if you click on one of the tabs (e.g., "Things I Can Do") the main website stays the same -- "https://html5up.net/read-only".
I'm extremely new to HTML and trying to figure out which part of the code (I'm not attaching it here because it's long and can be downloaded from the link) controls the scrolling, as I'm having 2 issues after modifying it for my needs:
When I click on one of the tabs the website change from my_website to my_website/#one or my_website/#two, etc.
I can see the part of the code that references that:
<li>About</li>
<li>Things I Can Do</li>
<li><a href="#three">A Few
but I'm not sure how to modify this to still scroll to the correct section (e.g., about) when I click on the about tab, without changing the website to my_website/#one
When I go to my_website and scroll only the last 2 tabs change when I reach their sections. Moreover, if I click on one of the tabs about, which as mentioned above changes the website to my_website/#one, the tabs don't change anymore even if I go to the next section on the page.
Apologies for not sharing my code, it's long and I didn't want to clutter this. I am happy to answer any questions! Again, I never touched HTML5 before so this is all new to me.
If you want that on Clicking one tag then it goes to that section of page then use a attribute in style tag called scroll-behavior: smooth and then when you click on any tab it goes to that part of page.
I am new to accessibility of web pages. I have an application where the content of the body changes based on the header link clicks in an ajax call without page refresh. So the HTML content inside the body gets updated for each link click with different page content (table + button + information text).
My requirement here is the screen reader should announce the information text each time when the page gets loaded. Here the container is body (or an immediate div inside body) for all pages. So I have made it aria-live="polite", but every time page loads it is announcing the whole page content but I want to make it announce only the information text. Other elements of the page should be announced on focus/visit. I hope I can apply aria-live="off" for all other elements but I'm looking for any ideal solution for this. I cannot change the layout of the application.
Can some one help me on this. Thanks in advance.
SPA pattern best practices
You are essentially following a Single Page Application pattern. As such the method recommended for handling navigation is actually quite straight forward with two steps.
tell a user that navigation is about to occur (before navigation)
let a user know that loading is complete (after navigation).
before navigation (link click)
You need to signal to a user that a page is loading if you are using a SPA pattern (and therefore interrupting normal navigation). e.g. I click your link, you need to let me know that an action is being performed (loading.....) as you intercept the normal browser behaviour with e.preventDefault() or equivalent.
The simplest way is to use aria-live=assertive on a region that explains the page is loading. You can Google how to implement that correctly but essentially you would update the content of a hidden div (<div aria-live="assertive" class="visually-hidden">loading</div> with some loading message the second a link is clicked.
This should be done before any AJAX calls are made.
after navigation (new content loaded)
When the new page loads you need to manage focus.
The best way to do this is to add a level 1 heading (<h1>) to each page that has tabindex="-1". By using tabindex="-1" it means that the heading won't be focusable by anything other than your JavaScript so won't interfere with the normal document flow.
Once the page loads and the content has been populated fully the last action you perform in your JavaScript navigation function is to place the focus onto this heading.
This has two benefits:
it lets the user know where they are now
it also lets them know when the page load is complete (as AJAX navigation doesn't announce when the page is loaded in most screen readers).
At this point you may also want to clear the <div aria-live="assertive"> contents so that it is ready for further navigation.
Have you tried to wrap the "live zones" - where updates happen in div with aria-live="polite". Then screen reader will announces only these zones on updates.Don't wrap whole page or div in aria-live="polite".
<div aria-live="polite">
<p id="errorText">Announced on update</p>
</div>
<div>
other page sections..
</div>
I tried to use Google Talkback to access my website on Android today, and I noticed that it focuses on elements that don't have any actual text content. As a result you have to swipe multiple times to get to any element with actual meaning (and in the meantime you don't get any feedback, i.e. the program doesn't read anything). I assume that when using desktop screen reader, it works the same, only you have to press Tab many times.
As a more practical explanation, here is how my site is presented with Google Talkback on. Theoretically every swipe down should move the user to the next element and read the related text. However on a website it selects almost every HTML tag (skipping only divs), so it goes like that:
body (reads the title of the site) -> header -> logo image (reads alt text) -> nav element -> ul element (reads: 'list showing 2 items') -> li element -> a element (reads text inside of the a tag) -> second li element -> a element (reads the text) -> main element -> section element -> h1 element (reads text inside of the h1 tag)...
And so on. As you can see, most of the time it doesn't provide the user with any information, but requires action, slowing the user down (and potentially confusing them too). So is there any way I could manually set only some elements as focusable for screen readers? I couldn't find anything like that on the internet, but it seems that information about website accessibility is generally scarce.
You can set importance of HTML Elements with the <role> attribute.
<header role="banner" class="site-header">
Theese are some of the available roles:
banner – Typically the “header” of your page that includes the name
of the site
search – For the search form
form - Group of elements
that as a whole, assemble a form (please note that there isn’t a
great deal of legacy support for this role)
main – This would designate the main content area on your site
navigation – Use on any navigation list, typically on the nav element
contentinfo – Typically the “footer” of your page that contains information about the parent
document such as copyrights and links to privacy statements
It’s recommended to label the areas with a descriptive name using aria-label, aria-labelledby or title. This get’s more important in case you use a role more than once. Please note that ‘banner’, ‘main’ and ‘contentinfo’ should only be used once.
Learn more about roles here:
http://a11yproject.com/posts/aria-landmark-roles/
You might also find theese links helpful:
The Accessibility Project
An overview of accessible web applications and widgets (MDN)
Am trying to design my metro app like, In my homepage I need to display list of items in a menu on the left side of page and when we click on each item,every item will need to navigate separate page and contains some data.Can anyone suggest me which control should you I take to start my scenario?Working examples are really helpful to me.
Thank you.
Navigation in a WinRT App doesn't use the Menu/Menu-Item metaphor. You can add an App Bar that swipes up from the bottom of the screen that you place contextual controls such as buttons related to the current page or selected item(s). You can also add global settings to the Settings charm that swipes in from the right.
What you are describing sounds like the "Split App" template that comes out of the box with Visual Studio 2012. It consists of a list of items along the left-hand side of the screen which, when selected, change the content on the right-hand side of the screen. Try creating a new Split App and see if that helps.
This is not a completed worked example, but I would recommend looking at two items:
MSDN Documentation for WinJS.Navigation
MSDN Sample for navigation application
These should get you the solution you need -- the sample is quite complete, and can be tailored to your needs.
It sounds to me like what you are talking about is the SplitApp view. Check out this link, the second template listed, just below GridView:
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh768232.aspx
You'll find that in Modern/Metro things like menus are handled through contextual listviews in the window content area, or through charms (read icons) on the AppBar. Many people hear menu now and cringe, just due to the style guidelines for Chrome/Menu free applications.
If you don't want the content to display next to the links, as the SplitApp view does, you should consider a regular listview for your links, styled however you like and set to display vertically, with click events that take you to whatever detailed page view you want to go to. Navigation is dead simple in a Metro App.
C# Example:
this.Frame.Navigate(typeof(MyDetailPage),myContentId);
Then on your details page, you can get the argument when it's navigated to:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var myContentId = e.Parameter;
...
}
And if absolutely none of the above was helpful, try checking out these examples. I know you probably aren't making an RSS reader, but they will take you through the basics of the various views and navigation.
Create a blog reader with C#/VB & XAML:
http://msdn.microsoft.com/en-us/library/windows/apps/br211380.aspx
Create a blog reader with JS & Html5:
http://msdn.microsoft.com/en-us/library/windows/apps/hh974582.aspx