<div dir="ltr"><div>There are two different types of text that might be hidden for 
screen readers: text that is only ever of use to screen readers, and 
text that may be of use to other users. Skiplinks usually fall into the 
latter category, because those links are also of use to users who are 
keyboard-dependent, but do not have a visual disability. For those types
 of links, you need to bring them into site when they receive keyboard 
focus. This is required to meet the WP accessibility-ready guidelines. 
For hiding, you can use either set of styles; they're essentially equal.<br>
<br></div><div>For some other text - like form labels - it's acceptable to hide them so that they're only available for screen readers. <br><br></div><div>Wrapping
 headers in a screen-reader class means that those headers are available
 to screen readers to use for navigation, but not visible to other 
users. Screen readers can generate navigation tools for users based on 
the headings and heading structure for the page, but for design 
purposes, it may not be useful or necessary to have those headings. 
Thus, you can hide headings so that they're only useful for screen 
readers but don't interfere with your design. <br>
<br></div>Whether using an H1 breaks the structure is highly 
dependent on many factors. If the site is using the HTML5 heading model,
 which expressly allows multiple H1 headers, then it's fine, as long as 
it's in a new section container. It's legitimate, but in practice, the 
HTML5 headline outline algorithms are incredibly poor, so it's not the 
best possible choice. <br>
<br>Best,<br>Joe</div><div class="gmail_extra"><br><br><div class="gmail_quote">On Sat, Jan 11, 2014 at 10:15 AM, Joe Dolson <span dir="ltr"><<a href="mailto:joe@joedolson.com" target="_blank">joe@joedolson.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><div>There are two different types of text that might be hidden for screen readers: text that is only ever of use to screen readers, and text that may be of use to other users. Skiplinks usually fall into the latter category, because those links are also of use to users who are keyboard-dependent, but do not have a visual disability. For those types of links, you need to bring them into site when they receive keyboard focus. This is required to meet the WP accessibility-ready guidelines. For hiding, you can use either set of styles; they're essentially equal.<br>

<br></div><div>For some other text - like form labels - it's acceptable to hide them so that they're only available for screen readers. <br><br></div><div>Wrapping headers in a screen-reader class means that those headers are available to screen readers to use for navigation, but not visible to other users. Screen readers can generate navigation tools for users based on the headings and heading structure for the page, but for design purposes, it may not be useful or necessary to have those headings. Thus, you can hide headings so that they're only useful for screen readers but don't interfere with your design. <br>

<br></div><div>Whether using an H1 breaks the structure is highly dependent on many factors. If the site is using the HTML5 heading model, which expressly allows multiple H1 headers, then it's fine, as long as it's in a new section container. It's legitimate, but in practice, the HTML5 headline outline algorithms are incredibly poor, so it's not the best possible choice. <br>

<br>Best,<br>Joe<br> </div><div><br></div></div><div class="gmail_extra"><div><div class="h5"><br><br><div class="gmail_quote">On Fri, Jan 10, 2014 at 7:12 PM, Bass Jobsen <span dir="ltr"><<a href="mailto:bass@w3masters.nl" target="_blank">bass@w3masters.nl</a>></span> wrote:<br>

<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hi Joe,<br><br>I'm still trying to get †'accessibility-ready' tag †for my theme.<br>I had to fix other issues first. Today i found i also have to fix for accessibility. So†i add the "skip links system" first (available on github now†<a href="https://github.com/bassjobsen/jamedo-bootstrap-start-theme" target="_blank">https://github.com/bassjobsen/jamedo-bootstrap-start-theme</a>).<div>


<br></div><div>Doing this not all was clear for me. I got two questions:</div><div><br></div><div>1) I check twentyfourteen and found the†.screen-reader-text class to hide content for non-screen-readers. This class is short and has a longer focus pseudo class.</div>


<div>Bootstrap has it own class (.sr-only) to do the same.</div><div>Both classes do the same but their implementation differs. For example the sr-only don't has a focus at all.</div><div>Which one should i use or prefer? I why?</div>


<div><br></div><div>2) also in†twentyfourteen i found some readreaders' navigation text wrapped in h1. like†<span style="white-space:pre-wrap">     </span></div><div><h1 class="screen-reader-text"><?php _e( 'Comment navigation', 'twentyfourteen' ); ?></h1></div>


<div><br></div><div>I wonder if choosing a header and especialy a h1 won't break the hierarchical header structure which also is an †accessibility aspect.<br><div><div class="gmail_extra"><br></div><div class="gmail_extra">


Thanks and best regards,</div><div class="gmail_extra"><br></div><div class="gmail_extra">Bass<br><br><div class="gmail_quote">2013/12/12 Joe Dolson <span dir="ltr"><<a href="mailto:design@joedolson.com" target="_blank">design@joedolson.com</a>></span><br>


<blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><div dir="ltr"><div><div>Hi, Bass - if you want to contact me off-list, feel free (<a href="mailto:joe@joedolson.com" target="_blank">joe@joedolson.com</a>); but I'll answer this message on list here. Whether this is on-topic or not is hard to gauge. But I'm sure somebody will let me know!<br>



<br></div>We haven't provided extensive options on the accessibility page because, frankly, it was already pretty lengthy, and it could easily become book-length. Since this is the first time these guidelines are going to be getting used, they will undoubtedly be tweaked in the coming months so that they are more friendly to those who use them!<br>



<br></div><div>So, first: display: none;<br><br></div><div>Yes, display:none; removes the hidden items from what a screen reader will provide. This isn't necessarily a problem, as long as a method is provided that brings it back into view, and which shares that information with screen readers. Using display:none, in itself, won't prevent your theme from meeting the accessibility-ready requirements, but the hidden resources need to have a specific method of bringing them back to focus. With a menu, that means something that you activate which focuses the menu. The menu parent should have an attribute of aria-live='polite' so that when the children are brought back into the DOM, screen reader's will announce the presence of the menu. <br>



<br></div><div>I haven't done a thorough study of the BootStrap menus; but I think that's probably due, and will undoubtedly come up repeatedly in the next few months. Based on a quick test right now of BootStrap's demo (<a href="http://getbootstrap.com/javascript/#dropdowns" target="_blank">http://getbootstrap.com/javascript/#dropdowns</a>), they appear to be accessible. <br>



<br></div><div>But with accessibility, it's always necessary to do reviews of an actual implementation: one implementation being accessible does not mean that another will be. <br><br>Best,<br>Joe<br></div></div><div>


<div><div class="gmail_extra">
<br><br><div class="gmail_quote">On Wed, Dec 11, 2013 at 5:31 PM, Bass Jobsen <span dir="ltr"><<a href="mailto:bass@w3masters.nl" target="_blank">bass@w3masters.nl</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">



<div dir="ltr">Hi Joe,<div><br></div><div>I read your message about the†<span style="font-family:arial,sans-serif;font-size:13px">'accessibility-ready'</span><font face="arial, sans-serif">†and found it very†interesting. I'm a theme developer, so†probably†on the wrong list.</font></div>





<div><font face="arial, sans-serif">I will try to get this a†'accessibility-ready' tag for my theme†although my first target will be to get my theme approved at all (</font><a href="http://themes.trac.wordpress.org/ticket/15659" style="font-size:13px;font-family:arial,sans-serif" target="_blank">http://themes.trac.wordpress.org/ticket/15659</a><span style="font-family:arial,sans-serif">).†</span></div>




<div><span style="font-family:arial,sans-serif"><br></span></div><div><span style="font-family:arial,sans-serif">I read†</span><span style="font-size:13px;font-family:arial,sans-serif">†</span><a href="http://make.wordpress.org/themes/guidelines/guidelines-accessibility/" style="font-size:13px;font-family:arial,sans-serif" target="_blank">http://make.wordpress.org/themes/guidelines/guidelines-accessibility/</a>†and find many don't but less howto or alternatives. I will give you an example, i read "<code style="line-height:18.1875px;overflow:auto;font-size:13px;background-color:rgb(241,241,241);font-family:Monaco,Consolas,'Courier New',monospace">display:none</code><span style="font-size:13px;color:rgb(85,85,85);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;line-height:18.1875px">†removes the concealed object from screen readerís reading, and should not be used.</span>" I understand the meaning. Now finding a good solution doesn't same easy. My theme use Twitter's Bootstrap. Both Bootstrap and i paid attention to accessibility, see: †<a href="http://getbootstrap.com/getting-started/#accessibility" target="_blank">http://getbootstrap.com/getting-started/#accessibility</a>†and†<a href="https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/35" target="_blank">https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/35</a></div>




<div><br></div>Although a default component the dropdown adds accessibility, see; <a href="http://getbootstrap.com/components/#dropdowns" target="_blank">http://getbootstrap.com/components/#dropdowns</a> it doesn't meet the requirement of not using "display:none". Accessibility can be add by the sr-only class and using†aria-labelledby attributes, but there still will be a†"display:none".<div>




In the case the dropdown adds additional information the content will be hidden for all users. So maybe the requirement should be content with "display:none" should be accessible for all users (for example also via a sr-only button).</div>




<div>I also look for alternative solutions. You will find some here:†<a href="http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/" target="_blank">http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/</a>. Some solution requires javascript (or you show hide only when javascript is on) which maybe introduce other accessibility issues.</div>




<div><br></div><div>Regards,</div><div><br></div><div>Bass</div><div><div><div class="gmail_extra"><br><br><div class="gmail_quote">2013/12/11 Joe Dolson <span dir="ltr"><<a href="mailto:design@joedolson.com" target="_blank">design@joedolson.com</a>></span><br>




<blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><div dir="ltr"><div>In addition to the fixed-layout, fluid-layout, and responsive-layout, the 'accessibility-ready' tag is going live in WP 3.8. <br>




<br></div><div>For that tag, the guidelines at the theme accessibility review docs will need to be followed, in addition to the standard tags: <a href="http://make.wordpress.org/themes/guidelines/guidelines-accessibility/" target="_blank">http://make.wordpress.org/themes/guidelines/guidelines-accessibility/</a><br>





<br>If anybody needs any help handling a review that's using the accessibility-ready tag, ping me with the ticket and I'll happily chime in. <br><br></div><div>Best,<br>Joe<br></div><div><br></div></div><div class="gmail_extra">





<br><br><div class="gmail_quote">On Fri, Dec 6, 2013 at 12:52 PM, Otto <span dir="ltr"><<a href="mailto:otto@ottodestruct.com" target="_blank">otto@ottodestruct.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex">





<div dir="ltr"><div>As part of the 3.8 release scheduled for next week, one of the changes has to do with the allowed tags in themes.</div><div><br></div><div>The old "Width" tags have been deprecated in favor of new "Layout" tags, which are considered to better describe actual usage.</div>







<div><br></div><div>- The "fixed-width" tag has become "fixed-layout".</div><div>- The "flexible-width" tag has become "fluid-layout".</div><div>- Finally, a new tag of "responsive-layout" was added.</div>







<div><br></div><div>Currently, theme-check will fail these tags and disallow the upload. As of 3.8's release, this will be changed to allow these new tags and to give a warning about the old ones.</div><div><br></div>







<div>With regards to theme searching, the old -width tags are aliased to the new tags. So searching for "fixed-layout" will also find "fixed-width" tags, and vice-versa. This is intended to not affect older themes or to impact those themes ability to be searched for in any way, as well as to allow themes using the new tags to continue to be found by pre-3.8 installations using the old tags.</div>







<div><br></div><div>As I make this switchover, I'm sure there will be a few minor bugs that crop up here and there. Some of those bugs will impact your ability to upload themes. Let me know about any such issues directly and I'll correct them as soon as possible.</div>







<div><br></div><div>You can read more about the changes here:</div><div><a href="http://core.trac.wordpress.org/ticket/21442#comment:28" target="_blank">http://core.trac.wordpress.org/ticket/21442</a><span><font color="#888888"><br>





</font></span></div><span><font color="#888888"><div><br></div><div>-Otto</div>

<div><br></div><div><br></div>
</font></span></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><span><font color="#888888"><br><br clear="all"><br>-- <br><div dir="ltr">==================<br>Joseph Dolson<br>Accessibility consultant & WordPress developer<br><a href="http://www.joedolson.com" target="_blank">http://www.joedolson.com</a><br>





<a href="http://profiles.wordpress.org/joedolson" target="_blank">http://profiles.wordpress.org/joedolson</a></div>
</font></span></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br></div></div></div></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br><br clear="all"><span><font color="#888888"><br>-- <br><div dir="ltr">==================<br>Joseph Dolson<br>Accessibility consultant & WordPress developer<br><a href="http://www.joedolson.com" target="_blank">http://www.joedolson.com</a><br>



<a href="http://profiles.wordpress.org/joedolson" target="_blank">http://profiles.wordpress.org/joedolson</a></div>
</font></span></div><span><font color="#888888">
</font></span></div></div><span><font color="#888888"><br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></font></span></blockquote></div><br></div></div></div></div>
<br>_______________________________________________<br>
theme-reviewers mailing list<br>
<a href="mailto:theme-reviewers@lists.wordpress.org" target="_blank">theme-reviewers@lists.wordpress.org</a><br>
<a href="http://lists.wordpress.org/mailman/listinfo/theme-reviewers" target="_blank">http://lists.wordpress.org/mailman/listinfo/theme-reviewers</a><br>
<br></blockquote></div><br><br clear="all"><br>-- <br>==================<br><br></div></div>Did I help you with one of my plug-ins? Donations keep support possible! <a href="http://www.joedolson.com/donate.php" target="_blank">http://www.joedolson.com/donate.php</a><br>

<br>==================<br><br>Joseph Dolson<br>Accessibility consultant and WordPress developer<br><a href="http://www.joedolson.com" target="_blank">http://www.joedolson.com</a><br><a href="http://profiles.wordpress.org/joedolson" target="_blank">http://profiles.wordpress.org/joedolson</a>
</div>
</blockquote></div><br><br clear="all"><br>-- <br><div dir="ltr">==================<br>Joseph Dolson<br>Accessibility consultant & WordPress developer<br><a href="http://www.joedolson.com" target="_blank">http://www.joedolson.com</a><br>
<a href="http://profiles.wordpress.org/joedolson" target="_blank">http://profiles.wordpress.org/joedolson</a></div>
</div>