- From: Wayne Dick <wayneedick@gmail.com>
- Date: Thu, 9 Aug 2018 06:47:46 -0700
- To: Laura Carlson <laura.lee.carlson@gmail.com>
- Cc: Jim Allan <jimallan@tsbvi.edu>, public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org>
- Message-ID: <CAJeQ8SB69c8qdQm9s9+C9BqqYmFzrc-QZPg_fim5EMOKTgTd-g@mail.gmail.com>
Hi all,
You can run the examples at http://nosetothepage.org/fullPseudoTest.html .
I am inserting the code:
<!DOCTYPE html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>F87 Tests</title>
<link rel="stylesheet" href="https://use.fontawesome.com/c7f01dce1d.css">
<style type="text/css">
/* Style for Example 1*/
p.jim:before { content: "Jim: " }
p.mary:before { content: "Mary: " }
q:before { content: open-quote }
q:after { content: close-quote }
p.mary q {quotes: '[' ']';}
/* Style for Example 2 */
p.fact:before { content: "Fact: "; font-weight: bold; }
p.opinion:before { content: "Opinion: "; font-weight: bold; }
/* Style for Example 3 */
a.gen::before {
content: 'Go to 14th Amendment -- Generated Content';
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
i.fa {
padding-right: 1.5em;
}
/* Style for Example 4 */
p.TOC::before {
content: '\f0c9';
padding-right: 1.5em;
font-family: "FontAwesome";
}
div.TOC, div.TOC * {
font-family: "Courier New";
}
</style>
</head>
<body>
<header>
<h1>F87 Examples</h1>
<p>From <a href="https://www.w3.org/TR/WCAG20-TECHS/F87.html">Failure
Technique F87</a>.</p>
</header>
<div id="example1">
<h2>Example 1: Jim uses quote symbols from the pseudo content, Mary's
pseudo content is overwritten by the "quotes" attribute value.</h2>
<p class="jim">
<q>Do you think he's going to make it? </q>
</p>
<p class="mary">
<q>It's not looking good.</q>
</p>
</div>
<div id="example2">
<h2>Example 2: Search on the word "fact" fails to find the fact
paragraph.</h2>
<p class="fact">The defendant was at the scene of the crime when it
occurred.</p>
<p class="opinion">The defendant committed the crime.</p>
</div>
<div id="example3">
<h2>New Example 3 -- Icon with aria-label vs. Icon with visually hidden
content in ::before pseudo element</h2>
<h3>Icon with Aria-label</h3>
<p>
<a class="label" href="
https://en.wikipedia.org/wiki/Twenty-fourth_Amendment_to_the_United_States_Constitution"
aria-label="go to 14th Amendment -- aria-label"><i class="fa
fa-link"></i></a> <span aria-hidden="true">14th Amendment, US
Constitution</span>
</p>
<h3>Icon with generated content for screen reader</h3>
<p>
<a class="gen" href="
https://en.wikipedia.org/wiki/Twenty-fourth_Amendment_to_the_United_States_Constitution"><i
class="fa fa-link content"></i></a> <span aria-hidden="true">14th
Amendment, US Constitution</span>
</div>
<div id="example4">
<h2>New Example4: Icon fonts in a pseudo element appears to be impervious
to global change of font family.</h2>
<div class="TOC">
<p class="TOC">
<a href="https://www.w3.org/TR/WCAG21/#toc">WCAG 2.1 Table of
Contents</a>
</p>
</div>
</div>
</body>
</html>
Wayne
On Thu, Aug 9, 2018 at 5:20 AM Laura Carlson <laura.lee.carlson@gmail.com>
wrote:
> Regrets for today.
>
> Kindest Regards,
> Laura
>
> On 8/8/18, Jim Allan <jimallan@tsbvi.edu> wrote:
> > Full meeting
> >
> > Time: 11:00 am Eastern Time (GMT-04:00)
> > IRC: irc.w3.org:6665/ #lvtf
> > Teleconference connection info (requires W3C login permission):
> > https://www.w3.org/2017/08/01-lvtf-info.html
> >
> > Agenda+ Please review Reflow Understanding Doc - wording changes
> > https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
> >
> > Agenda+ Please review Long URL Technique
> > https://rawgit.com/allanj-uaag/wcag21/tech-reflow/tech-reflow-url.html
> > and test page
> >
> https://rawgit.com/allanj-uaag/wcag21/example-reflow-url/example-reflow-url.html
> >
> > Agenda+ F87, Issue 433 Generated Content - Wayne response -
> >
> https://drive.google.com/file/d/1TfmTC3U1zFd9Hz8Oankfm-uV30xUjsmw/view?ts=5b6b3bbe
> >
> > Agenda+ User Color changes and accessible UI components - possible
> advisory
> > techniques
> >
> https://accessibility.blog.gov.uk/2018/08/01/supporting-users-who-change-colours-on-gov-uk/
> >
> > --
> > Jim Allan, Accessibility Coordinator
> > Texas School for the Blind and Visually Impaired
> > 1100 W. 45th St., Austin, Texas 78756
> > voice 512.206.9315 fax: 512.206.9452 http://www.tsbvi.edu/
> > "We shape our tools and thereafter our tools shape us." McLuhan, 1964
> >
>
>
> --
> Laura L. Carlson
>
>
Received on Thursday, 9 August 2018 13:48:50 UTC