My iPhone application is built using Cordova and it for the most part native and I am having an issue with Accessibility. During my accessibility testing I noticed that when Voice Over is selected on some elements it reads out more than just the text of the label or button. For instance here is what a pages header looks like in my HTML:
<div data-role="header">
<div class="page-header">
<h1 class="header-title"><%= title %></h1>
</div>
</div>
When H1 is selected the following is read out to the user:
Banner Title Heading Level 1 Landmark
Is there any way to restrict it to only speak out the title content?
Looks like you are using jQuery Mobile. jQuery mobile adds some markup to the elements based on where you have placed them and the attributes applied. In this case it is placing role="banner" on the div with the data-role="header".
The way that is being read out is fine. If you are in fact using the header as a header, then the screen reader user now has that useful piece of information. If they do not want it, they can tell their screen reader to suppress it. Think of it as the audio equivalent of the fact that the header is visually distinct from the rest of the page.
Related
When I turn on voiceover and focus over the image I see "Shadow Content (User Agent)" appear in the dom and voice over will read out a few more divs inside of that shadow dom. I've tried adding aria-label on both the img and the outer class, but it still reads the contents in the shadow dom. A work around I am doing is adding attribute "role=banner" since it is a logo and fits the banner description under wai-aria recommendations.
Does anyone know how to fix this or is this expected behavior for Safari?
<div class="org-logo">
<img class="org-logo__image" src="assets/images/logo.svg" alt="Logo">
> Shadow Content (User Agent)
</img>
</div>
Typically you only want one H1 per page for screen readers. But I have seen a trend where the site logo in a header has an H1 around it and a separate main headline on a page also has an H1. Is this acceptable or is there a better way to handle this?
WCAG compliance
From a perspective of WCAG and compliance, this is acceptable, you can have multiple h1s on a page, it is still in the HTML5 spec.
Conventions for headings
However, convention and best practices advises there is only one, visible <h1> on a page and that <h1> should accurately describe the current page.
The main reason for this is assistive technology, namely screen readers.
Someone who uses a screen reader is likely to navigate by sections, links or headings using shortcuts. Obviously in this cases headings is the bit we are focusing on.
They use the keys 1-6 to cycle through headings. When landing on a page the first thing they might do is press "1" to get to the main heading on the page.
If pressing "1" instead reads out the site logo it might be confusing and they may think the site structure is wrong and instead start cycling <h2>s with the "2" key. This may take them a little while to realise the page structure is not typical.
It may only take a minute or so before a screen reader user realises the strange structure of your site, so it doesn't make it inaccessible, but in terms of user experience it isn't great.
Convention for company logos as part of the <header>
The convention for a logo is to wrap it in a hyperlink and point it to the home page. Expected behaviour is key for accessibility.
The simplest form of this would be:
<header>
<!-- logo wrapped in anchor pointing to home page -->
<a href="homepage">
<!-- notice the alt text is the purpose of the link so the link has descriptive link text. -->
<img src="yourlogo.jpg" alt="{company name} homepage" />
</a>
<nav>
<!-- ul with all nav items -->
</nav>
</header>
So whoever started that trend needs to stop it, it doesn't even make sense from an SEO perspective so I am not sure why someone started that if it is indeed a trend!
I am having some trouble accessing a navigable header item using my keyboard and i wanted to know if i am miss using ARIA and if i should label or mark them differently in order for me to be able to navigate to the header link using the keyboard as opposed to the keyboard.
<article role="article">
<header role="navigation" data-bind="click:gotoLink">
<div>....</div>
</header>
</article>
It is difficult to understand what you are trying to acheive from your code sample, but some things to note:
it does not make sense to override a header element with a navigation role and it is non-conforming in HTML to do so.
In order for an element to be navigable via the keyboard it requires that it either be interactive content or have a tabindex attribute added.
On a webpage I have a div
<div class="expand">+</div>
Tapping this div expands content.
I need to change what screen readers say when they encounter this element. I've been able to come close with:
<div class="expand" role="button" title="Tap to expand">+</div>
If you tap the button, the iPhone will say
Plus ... Button ... Tap to expand
Ideally it would just say "Button ... Tap to expand," or I could have complete control over what is said.
Additionally, tapping changes the content and the title to "Tap to hide." The element is focused immediatley and the new content is read, but for some reason the title is not included this time:
Hyphen ... Button
If you tap it again it will say the title.
Is there any way to control what is said by the screen reader when you tap an element? If not, is there any specific rule that prevents the title from being read in the second case?
Suggestions from http://alxgbsn.co.uk/2011/06/06/making-web-content-more-accessible-with-ios-voiceover/ made this possible.
<div class="hide" id="tap-show">tap to expand</div>
<div class="hide" id="tap-hide">tap to hide</div>
<!-- repeat -->
<div class="expand" role="button" aria-labelledby="tap-show"></div>
You can use JavaScript to change aria-labelledby, which works.
It is important to note that the role=button is necessary and the <div> must be empty. It can contain at most whitespace. You can use a background image, or:
.expand:after { content: "+"; }
In general you should be very careful about controlling this text exactly. People using screen readers use many apps / sites, and get used to how things are read out. In the case of button text, VoiceOver will generally announce:
[Content of button]... Button... [title of button]
If this is specific to iOS then I think your initial example is good, as VoiceOver considers the title to be 'help text', which is why it's read last. Assuming you have quite a few of these, then brevity is good.
Hyphen doesn't mean much, but you could use − to get it to announce "minus", and update the title to "Tap to hide".
Something you might consider including as hidden text is what it is that will be shown. Perhaps in your interface it is obvious visually and from a screen reader point of view, but in general it would be useful to know what is going to be shown.
You could hide some text, for example:
<div ...>+<span class="hidden"> description of the content</div>
Then move the .hidden off-screen with CSS.
I was wondering about a proper way of structuring a document-like html page. It's obvious that the title of the page should be marked as <h1> and section headings as <h2>.
As for the footer, right now, I have:
<div id="footer">Footer content</div>
and this will be displayed in every page of the document. I realized that screen reader will not notify the users if it's reading the footer content. I feel that uses should have the option to skip reading the footer content.
Is it necessary to let screen reader announce that it's going to read the footer content and is there a proper way to do so?
Thanks!
A common way to allow screen readers to skip over repeated parts of your website are to include hidden a anchor to a position right after the element you'd like to skip.
For example, on one of our websites, we do this to allow skipping over our navigation bar.
<div id="navbar">
<a title="Skip Navigation" href="#skipnav"></a>
<img id="home" src="transparent.gif" alt="Home" />
...
</div>
<a id="skipnav"></a>
The "Skip Navigation" a is selectable by using the keyboard and the screen reader will read "Skip Navigation". The user can then "click" on it to jump later into the page. In this case, right after the navigation.
Can you use html5? If so it contains a <footer> tag.
I'm a screen reader user and the h1 and h2 headings will work well. There's no good way to allow a screen reader to skip certain text that I know of which will work with all screen readers and browsers. Assuming your content is something like the following though
<h1>title</h1>
<h2>section1</h2>
section content
<div id="footer">Footer content</div>
<h2>section2</h2>
section 2 content
<div id="footer">Footer content</div>
A screen reader user should be able to figure out they hit the footer again after hearing it the first time. They can then use quick navigation keys provided by all modern screen readers to skip to the next heading thus not listening to the footer again.