[theme-reviewers] 'accessibility-ready' tag

Thu Jan 16 16:30:37 UTC 2014

I've attached my simple shortcode plug-in for comparing two colors. This
was set up for use to easily produce HTML showing the contrast between two
colors, but would be very easy to modify to meet whatever purposes you
need.

Your nav demo looks pretty good.

You're absolutely right that there are virtually no 3-color combinations
that will produce effective contrast -- that's why it's important to use
other visual markers to indicate focus.

Nothing is "a11y proof" -- the white border is an improvement, but won't by
itself solve the problem. Inverting colors, like you do on the demo nav, is
pretty effective, however.

Yes, buttons should have a :hover and :focus -- every focusable object:
button, link, form field, etc., should have both :hover and :focus. On the
whole, as Esmi said, :hover is less important, because pointing devices
have the advantage that the user has directly targeted the location;
whereas keyboard users don't know where they will end up when they change
focus. (And by "less important" I mean that it needs to have a :hover
state, but it doesn't need to be as strong as the :focus state,
necessarily.)

Orange is a fundamentally difficult color to work with. One thing to
consider, which isn't readily testable as color contrast, is that a
text-shadow increases the overall contrast between text and background. An
orange button with white text is different from an orange button with white
text and a hard black text shadow, however thin that is. Technically,
contrast is between two contiguous colors; with a text shadow in play, the
contiguous colors are no longer orange and white, they're orange and black.
But it's not quite that simple, because the surrounding color mass is still
orange, and there are considerations of visual acuity to consider.

But, if you are just shy of meeting color contrast with orange and white,
you can improve that by adding a text shadow. It's not perfect, because
browser support for text shadow isn't 100%.

Best,
Joe

On Wed, Jan 15, 2014 at 6:42 PM, Bass Jobsen <bass at w3masters.nl> wrote:

> Hi Joe,
>
> Again thanks for your explanation. This really helps!
>
> If you wanted to, you could probably write a script that checked
>> contrasting custom colors defined by the user and returned a warning if
>> they fell outside the WCAG contrast guidelines. It wouldn't be difficult --
>> I can provide the code for comparing the two colors, if you want it. I
>> wrote a plug-in for myself a while ago that provides comparison of two
>> colors via a shortcode, and it wouldn't be difficult to adapt it into a
>> settings check in a theme.
>>
>
> That's will be a nice solution, and thank for willing share you code.
> Cause i have many other things to do to get my theme ready, i will start
> to add some information to the ready, i can also refer to
> https://www.joedolson.com/articles/wp-accessibility/ maybe, but i first
> have to test it. To make sure i also work when the theme is a11y ready
> already.
>
> After the discussion here https://github.com/twbs/bootstrap/issues/12199is i start to get thing a11y ready myself. I started with the navbar, see
> the results on http://demo.jbst.eu/. I'm curious what you think about it.
>
> i have add the skiplinks structure. Found no problems with that.
>
> Other things. Bootstrap's has a brand name in the navbar, this is a link
> to home by default.
> Cause this is something like a logo, i should change background on hover,
> i think.
> My solution is to change the link color. AFAIK there are no 3 colors each
> having an contrast > 5 to each other. So when i change the link color only,
> i got a problem. My solution is to make it's font bigger than default
> (20px) and bolt, now i can use a hover color with contrast > 3 to linkcolor
> and navbar background color.
>
> For the button in the navbar i found the same kind of problem. The
> background should have a contrast > 5 with the navbar background and the
> button's font.
> My solution is to add a white border around the button. Will this be a11y
> proof? Do you have an other solution?
> Bootstraps buttons have a little background change of hover and focus.
> Should buttons have a hover / focus from a a11y view at all?
> I also found some other issues s.a. a orange looking button should have
> black texts while other have white text. I understand why but i also have
> some doubts about aesthetics here.
> A bigger font / bold should not break the navbar, for orange / white it
> don't help much.
> Default button colors in Bootstrap do mean something like green = success,
> orange = warning, etc.
>
> Thanks and best regards,
>
> Bass
>
>
>
>
>>
>> On Sun, Jan 12, 2014 at 4:22 PM, Bass Jobsen <bass at w3masters.nl> wrote:
>>
>>>  Hi Joe,
>>>
>>> Thanks you or your response and review!
>>>
>>> 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.
>>>>
>>>
>>> Okay, i understand. Bootstrap doesn't seems to have the option to make
>>> screen readers' text visible on focus, see also:
>>> https://github.com/twbs/bootstrap/issues/12199
>>> But i can switch to theme twentyfourteen's css classes for now.
>>>
>>>
>>>> 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.
>>>>
>>>
>>> Well maybe it is right to wrapped them in a h1 then. Thanks for your
>>> explanation.
>>>
>>> Some other questions if you allow me:
>>>
>>> 1) as i understand there is no need to add an :active pseudo class to
>>> links which got a :focus (Bootstrap only supports > ie8)
>>> 2) on your review you wrote some useful thing about contrast. btw nice
>>> tool: https://www.joedolson.com/tools/color-contrast-compare.php
>>> a) in my navbar i don't like text-decoration (underliner) links, but
>>> changing its background color will have the same effect? If so will there
>>> be any difficulty with using the same color combination for the hover /
>>> focus and active (current page set by css class and not the :active pseudo
>>> class) state.
>>> 3) i found twentyfourteen using:
>>> <div class="search-toggle">
>>> <a href="#search-container" class="screen-reader-text">Zoeken</a>
>>> </div>
>>> Why does the href here go to "#search-container (a div) and not directly
>>> to the input?
>>> Will this link be useful in terms of accessibility at all or is it only
>>> used here cause the search is hidden by default?
>>> 4) my theme is intend to be used as starters theme. This mean user will
>>> change the colors after installing in most cases (or define a child theme
>>> with different color settings).
>>> If i have found out how to, see:
>>> http://wordpress.stackexchange.com/questions/129479/alternatives-to-handle-customizer-settings i
>>> will define default colors for my theme which meets the contrast
>>> requirements. Howto handle the color changes made by users? Will adding a
>>> warning in the README enough to fix this?
>>> 5) if my page have 2 sidebars and both have aside will there be a
>>> problem if both got  role="complementary"
>>> 6) beside the copyright my theme define footer columns (widget) they are
>>> inside the footer -tag now. footer columns can contain text, address,
>>> social media links, recent comments etc.
>>> should the complete footer got  role="contentinfo" in this case?
>>>
>>> Thanks so far and regards.
>>>
>>> Bass
>>>
>>>
>>>
>>>
>>>>
>>>> Best,
>>>> Joe
>>>>
>>>>
>>>> On Sat, Jan 11, 2014 at 10:15 AM, Joe Dolson <joe at joedolson.com> wrote:
>>>>
>>>>> 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.
>>>>>
>>>>> For some other text - like form labels - it's acceptable to hide them
>>>>> so that they're only available for screen readers.
>>>>>
>>>>> 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.
>>>>>
>>>>> 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.
>>>>>
>>>>> Best,
>>>>> Joe
>>>>>
>>>>>
>>>>>
>>>>> On Fri, Jan 10, 2014 at 7:12 PM, Bass Jobsen <bass at w3masters.nl>wrote:
>>>>>
>>>>>> Hi Joe,
>>>>>>
>>>>>> I'm still trying to get  'accessibility-ready' tag  for my theme.
>>>>>> 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 https://github.com/bassjobsen/jamedo-bootstrap-start-theme).
>>>>>>
>>>>>> Doing this not all was clear for me. I got two questions:
>>>>>>
>>>>>> 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.
>>>>>> Bootstrap has it own class (.sr-only) to do the same.
>>>>>> Both classes do the same but their implementation differs. For
>>>>>> example the sr-only don't has a focus at all.
>>>>>> Which one should i use or prefer? I why?
>>>>>>
>>>>>> 2) also in twentyfourteen i found some readreaders' navigation text
>>>>>> wrapped in h1. like
>>>>>> <h1 class="screen-reader-text"><?php _e( 'Comment navigation',
>>>>>> 'twentyfourteen' ); ?></h1>
>>>>>>
>>>>>> I wonder if choosing a header and especialy a h1 won't break the
>>>>>> hierarchical header structure which also is an  accessibility aspect.
>>>>>>
>>>>>> Thanks and best regards,
>>>>>>
>>>>>> Bass
>>>>>>
>>>>>> 2013/12/12 Joe Dolson <design at joedolson.com>
>>>>>>
>>>>>>> Hi, Bass - if you want to contact me off-list, feel free (
>>>>>>> joe at joedolson.com); 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!
>>>>>>>
>>>>>>> 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!
>>>>>>>
>>>>>>> So, first: display: none;
>>>>>>>
>>>>>>> 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.
>>>>>>>
>>>>>>> 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 (
>>>>>>> http://getbootstrap.com/javascript/#dropdowns), they appear to be
>>>>>>> accessible.
>>>>>>>
>>>>>>> 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.
>>>>>>>
>>>>>>> Best,
>>>>>>> Joe
>>>>>>>
>>>>>>>
>>>>>>> On Wed, Dec 11, 2013 at 5:31 PM, Bass Jobsen <bass at w3masters.nl>wrote:
>>>>>>>
>>>>>>>> Hi Joe,
>>>>>>>>
>>>>>>>> I read your message about the 'accessibility-ready' and found it
>>>>>>>> very interesting. I'm a theme developer, so probably on the wrong list.
>>>>>>>> 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 (
>>>>>>>> http://themes.trac.wordpress.org/ticket/15659).
>>>>>>>>
>>>>>>>> I read
>>>>>>>> http://make.wordpress.org/themes/guidelines/guidelines-accessibility/ and
>>>>>>>> find many don't but less howto or alternatives. I will give you an example,
>>>>>>>> i read "display:none removes the concealed object from screen
>>>>>>>> reader’s reading, and should not be used." 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:  http://getbootstrap.com/getting-started/#accessibility and
>>>>>>>> https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/35
>>>>>>>>
>>>>>>>> Although a default component the dropdown adds accessibility, see;
>>>>>>>> http://getbootstrap.com/components/#dropdowns 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".
>>>>>>>> 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).
>>>>>>>> I also look for alternative solutions. You will find some here:
>>>>>>>> http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/.
>>>>>>>> Some solution requires javascript (or you show hide only when javascript is
>>>>>>>> on) which maybe introduce other accessibility issues.
>>>>>>>>
>>>>>>>> Regards,
>>>>>>>>
>>>>>>>> Bass
>>>>>>>>
>>>>>>>>
>>>>>>>> 2013/12/11 Joe Dolson <design at joedolson.com>
>>>>>>>>
>>>>>>>>> In addition to the fixed-layout, fluid-layout, and
>>>>>>>>> responsive-layout, the 'accessibility-ready' tag is going live in WP 3.8.
>>>>>>>>>
>>>>>>>>> For that tag, the guidelines at the theme accessibility review
>>>>>>>>> docs will need to be followed, in addition to the standard tags:
>>>>>>>>> http://make.wordpress.org/themes/guidelines/guidelines-accessibility/
>>>>>>>>>
>>>>>>>>> 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.
>>>>>>>>>
>>>>>>>>> Best,
>>>>>>>>> Joe
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Fri, Dec 6, 2013 at 12:52 PM, Otto <otto at ottodestruct.com>wrote:
>>>>>>>>>
>>>>>>>>>> As part of the 3.8 release scheduled for next week, one of the
>>>>>>>>>> changes has to do with the allowed tags in themes.
>>>>>>>>>>
>>>>>>>>>> The old "Width" tags have been deprecated in favor of new
>>>>>>>>>> "Layout" tags, which are considered to better describe actual usage.
>>>>>>>>>>
>>>>>>>>>> - The "fixed-width" tag has become "fixed-layout".
>>>>>>>>>> - The "flexible-width" tag has become "fluid-layout".
>>>>>>>>>> - Finally, a new tag of "responsive-layout" was added.
>>>>>>>>>>
>>>>>>>>>> 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.
>>>>>>>>>>
>>>>>>>>>> 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.
>>>>>>>>>>
>>>>>>>>>> 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.
>>>>>>>>>>
>>>>>>>>>> You can read more about the changes here:
>>>>>>>>>> http://core.trac.wordpress.org/ticket/21442<http://core.trac.wordpress.org/ticket/21442#comment:28>
>>>>>>>>>>
>>>>>>>>>> -Otto
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> _______________________________________________
>>>>>>>>>> theme-reviewers mailing list
>>>>>>>>>> theme-reviewers at lists.wordpress.org
>>>>>>>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> ==================
>>>>>>>>> Joseph Dolson
>>>>>>>>> Accessibility consultant & WordPress developer
>>>>>>>>> http://www.joedolson.com
>>>>>>>>> http://profiles.wordpress.org/joedolson
>>>>>>>>>
>>>>>>>>> _______________________________________________
>>>>>>>>> theme-reviewers mailing list
>>>>>>>>> theme-reviewers at lists.wordpress.org
>>>>>>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>> _______________________________________________
>>>>>>>> theme-reviewers mailing list
>>>>>>>> theme-reviewers at lists.wordpress.org
>>>>>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> ==================
>>>>>>> Joseph Dolson
>>>>>>> Accessibility consultant & WordPress developer
>>>>>>> http://www.joedolson.com
>>>>>>> http://profiles.wordpress.org/joedolson
>>>>>>>
>>>>>>> _______________________________________________
>>>>>>> theme-reviewers mailing list
>>>>>>> theme-reviewers at lists.wordpress.org
>>>>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>>>>
>>>>>>>
>>>>>>
>>>>>> _______________________________________________
>>>>>> theme-reviewers mailing list
>>>>>> theme-reviewers at lists.wordpress.org
>>>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> ==================
>>>>>
>>>>> Did I help you with one of my plug-ins? Donations keep support
>>>>> possible! http://www.joedolson.com/donate.php
>>>>>
>>>>> ==================
>>>>>
>>>>> Joseph Dolson
>>>>> Accessibility consultant and WordPress developer
>>>>> http://www.joedolson.com
>>>>> http://profiles.wordpress.org/joedolson
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> ==================
>>>> Joseph Dolson
>>>> Accessibility consultant & WordPress developer
>>>> http://www.joedolson.com
>>>> http://profiles.wordpress.org/joedolson
>>>>
>>>> _______________________________________________
>>>> theme-reviewers mailing list
>>>> theme-reviewers at lists.wordpress.org
>>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>>
>>>>
>>>
>>> _______________________________________________
>>> theme-reviewers mailing list
>>> theme-reviewers at lists.wordpress.org
>>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>>
>>>
>>
>>
>> --
>> ==================
>> Joseph Dolson
>> Accessibility consultant & WordPress developer
>> http://www.joedolson.com
>> http://profiles.wordpress.org/joedolson
>>
>> _______________________________________________
>> theme-reviewers mailing list
>> theme-reviewers at lists.wordpress.org
>> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>>
>>
>
> _______________________________________________
> theme-reviewers mailing list
> theme-reviewers at lists.wordpress.org
> http://lists.wordpress.org/mailman/listinfo/theme-reviewers
>
>

-- 
==================
Joseph Dolson
Accessibility consultant & WordPress developer
http://www.joedolson.com
http://profiles.wordpress.org/joedolson
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.wordpress.org/pipermail/theme-reviewers/attachments/20140116/bf0fd1ac/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: compare-contrast.zip
Type: application/zip
Size: 1516 bytes
Desc: not available
URL: <http://lists.wordpress.org/pipermail/theme-reviewers/attachments/20140116/bf0fd1ac/attachment-0001.zip>