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.
Related
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!
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.
I want to skip some content from reading of screen reader.
consider this html
<div id="test" aria-labelledby="test>
...
<div aria-hidden="true">Dont read this content. This content will be loaded from javascript</div>
...
</div>
Though the aria-hidden=true is set for the div, the content is read by screen reader. Please help to skip this content
Your code looks right, how are you testing this?
Not all browsers / screen readers will support this yet.
Try setting style="display:none;" as this may be more widely supported at the moment.
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'm trying to optimize my pages via CSS for printing from the browser. The problem I'm having is setting up the page breaks properly. I have it preventing page-breaks in the middle of images and blocks of text that shouldn't be separated exactly how I want. However, the problem I'm having is that sometimes there's a horizontal rule separating a new section and then just the title of the next section (and potentially a description of that section), with the rest of the actual section displayed on the next page. This is confusing and poor formatting, as normally if the title of the section is that close to the bottom of the page, you'd just throw in a page break before it to bump the whole thing to the next page and not worry about the tiny amount of space on the previous page you're sacrificing.
The HTML here is very simplistic. It's not wrapped in a million things, just a horizontal rule, header, paragraph with a description, then the content of the section. What I tried to do is wrap the header and description in a division together and make it so it can't page-break inside or after, like so:
<a id="section_1"></a>
<div class="no-page-break">
<h2>Section 1</h2>
<p>Section 1 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<hr />
<a id="section_2"></a>
<div class="no-page-break">
<h2>Section 2</h2>
<p>Section 2 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<!-- and so on -->
.no-page-break { page-break-after: avoid; page-break-inside: avoid }
I was hoping it would see the entire block as un-breakable and bump the whole thing down to the next page, but it didn't do anything. Maybe I've just been staring at this problem for too long. Does anyone know how I could prevent each section of my page from breaking up in this manner?
Note: I don't want it to always break before each section, as that could potentially waste a lot of page space if there's only a little bit leftover from the previous one.
Bonus: If anyone knows how you'd be able to hide the horizontal rule if it broke at that point, that'd be helpful too. But that's just a minor annoyance that I'm not really worried about.
The only way I can think of is to move the horizontal rule into the bottom of the last section and before you want the page break. Then wrap all the next section in a node and add no-page-break to that. There are too many factors when printing that the browser just cannot detect so if you can cleverly group things it will help a lot.