search

kaworu / octostrap3

Twitter Bootstrap 3 theme for Octopress
https://kaworu.github.io/octostrap3
MIT License
153 stars 23 forks source link

Additional accessibility #38

Closed paskal closed 9 years ago

paskal commented 10 years ago

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 link immediately 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.

kaworu commented 10 years ago

Hi @paskal

I would be very happy to merge a PR adding this feature !

paskal commented 10 years ago

Functional Accessibility Evaluator tells us there are still few changes to be made for better accessibility.

kaworu commented 10 years ago

I've commited 84408cac1930fa557541440d249eb942f71c7531 and c17534170f86b844b36dd2d2e3cf83b3bd442f10 as small adjustments in that direction

paskal commented 10 years ago

Another useful tool.

paskal commented 9 years ago

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.

paskal commented 9 years ago

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.

roman01la commented 9 years ago

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.

roman01la commented 9 years ago

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/

paskal commented 9 years ago

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.

roman01la commented 9 years ago

@paskal I believe Twitter Bootstrap itself has enough level of accessibility implemented, including ARIA roles. Probably you ca take some inspiration from it.

kaworu commented 9 years ago

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.

paskal commented 9 years ago

@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.

kaworu commented 9 years ago

@paskal Thank you it's useful to have the link in this issue even though it won't be fixed "right now" :+1:

paskal commented 9 years ago

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.