Additional accessibility
paskal opened this issue · 14 comments
Inspired by getnikola/nikola#1345, here is the information, I'll quote it:
Skip navigation
If your navigation contains many links and comes before the main content in the DOM, add a
Skip to main content linkimmediately after your opening<body>tag. (read why)
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div class="container" id="content">
The main page content.
</div>
</body>
I think we might adopt this feature. @kaworu, if you'll approve this, I'll prepare a pull request.
Functional Accessibility Evaluator tells us there are still few changes to be made for better accessibility.
It's not as easy as it looks like. I think we should make link to main page <h1> only on main page (because it's only page without h1) and add more roles (there are already banner and navigation and main but it's not enough).
Probably it's better to find somebody more experienced with ARIA to help us, it seems so confusing.
I was told @roman01la might be able help us with accessibility code improvments. Roman, I'll be very glad, if you will be so kind to assist us in resolving this issue.
Hi @paskal and Happy New Year to you! I'd love to assist in this issue. As an example implementation to follow you can take a look at GitHub's "Skip to content". First Tab on any page shows up the link. Implementation is kind of ok, but still it can be done better.
Talking about ARIA roles like main, banner, etc., these are called ARIA landmark roles which is used to be a semantic description of the layout. Some HTML5 elements are inherit ARIA landmarks, so there's no need to use them if you already use HTML5 elements like nav, main, header and footer. But if you are using non-semantic elements instead, say divs, take a look at this article to get better understanding of ARIA landmarks <=> HTML5 structure elements mapping: http://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/
Roman, happy New Year! Issue now is about passing ARIA validation, adding
proper roles and landmarks. Can you assist us in that? I can't understand
which roles to use, it's too complicated.
@paskal I believe Twitter Bootstrap itself has enough level of accessibility implemented, including ARIA roles. Probably you ca take some inspiration from it.
Hi Roman and Paskal, happy new year !
Twitter Bootstrap does not generate HTML markup, it "only" provide JS/CSS tools. In the documentation they've been adding ARIA roles since a while now, but that does not help much for markup already existing (like in our case).
Perhaps the best way to go is to get documentation about the most important ARIA roles and landmark and implement them step by step. In that way @roman01la could you please point out some documentation you find useful to learn about ARIA implementation ?
Thanks to you both and take care.
@kaworu, some time ago Roman pointed me to this document which have a lot of answers to questions about using ARIA but right now I don't have enough time to carefully read it.
@paskal Thank you it's useful to have the link in this issue even though it won't be fixed "right now" 👍
I've checked theme again with two screen readers, they navigate it fine, HTML of octopress itself and of this particular theme is fine already. Let's close this one.