Re: Font Family failure

The real problem is that WCAG 2 overlooked visual style as an important
accessibility support.

I caught that  problem last night. I stayed up late. Yes the narrow
solution will work for that case, but what about the code

<block-level-element> ...
<span class='thing1"> Thing 1 </span> ...
<span class="thing2>Thing2 </span>...
</block-level-element>

Suppose these spans exist solely to provide visual presentation for private
reasons of the author. For example: Thing1 was an important sales offer and
Thing2 was a deadline. Moreover, suppose Thing1 was one font-family and
Thing2 was another. Your code fails. Probably poor design -just to staying
in font-family case.

block-level-element, block-level-element *  {font-family: zilch !important}

will set everything in block-level-element font-family = zilch.

What can the author do? A lot. There are other elements like, i, b, em,
strong etc. that indicate  presentation change. Use one of those. If block
level element is one of h1, ..., h6, use  role= 'heading' .

Jason, we probably need an ARIA role like "visual-style" to indicate that a
void element like <span> or <div> is just for presentation.

Wayne













On Sat, Jan 14, 2017 at 2:36 AM, Patrick H. Lauke <redux@splintered.co.uk>
wrote:

> On 14/01/2017 10:24, Patrick H. Lauke wrote:
>
> The problem is with your CSS, not with the page. This is not something
>> you can pin on the page author.
>>
>> Taking that first "Line Length" heading, the markup for that is
>>
>> <h1 id="firstHeading" class="firstHeading" lang="en"><span
>> dir="auto">Line Length</span></h1>
>>
>> So a <span> nested inside an <h1>.
>>
>> Your custom CSS does set all h1, h2, h3 etc to comic sans, but then your
>> universal selector sets everything else to verdana. So the <h1> is comic
>> sans, but then then <span> inside the heading is set to verdana.
>>
>
> Expanding on this, it is you who has to more carefully craft your style
> overrides - the author is doing nothing unusual there in the markup to try
> and stop you from applying styles, it's just that your particular style
> rules were not accounting for the potential complexity of real-world markup.
>
> In this specific case, changing your selector from
>
> h1, h2, h3, h4, h5, h6 { ... }
>
> to
>
> h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { ...  }
>
> will solve your problem.
>
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>
>