read more links on news/events pattern fail WCAG 2.0 2.2.4

[spiritcapsule]

WCAG 2.0 Guideline 2.2.4 requires that, "The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)"

One way of accomplishing this is to add a title attribute to the <a> element. An even better solution is to put the text that describes the purpose of the link in a accessible portion of the text of the link.

    <article>
        <h6><a href="link/to/article">News Title or Event Name</a></h6>
        <p>A brief snippet about the article or event.</p>
        <footer>
            <p><a href="link/to/article" class="to-more">Read More<span class="hide-accessible">about News Title or Event Name</span></a></p>
        </footer>
    </article>

http://ucla.github.io/WebBlocks-kit/_examples/pattern_news_events_set.html

cc// @lnicks

[ebollens]

@chris4ucla I'd like to raise an additional concern as well. Quoting an ITS JIRA issue:

That said, I do have a concern with the mock. At the bottom of each article, you include the text "Read More", plus an ellipsis and the character U+00BB. While this makes sense to an English user graphically, it has three problems:

• Semantics - The HTML entity representation "raquo", meaning right angular quotation mark, implies an opposite left angular quotation mark in a left-to-right language system, and it has nothing to do with forward progression.
• Internationalization - Having a closing guillemet / comillas angulares without an opening doesn't make sense in Spanish, French, German or a number of other languages, where this glyph is actually commonly used.
• Accessibility - JAWS reads this as "right double angle bracket", again not fitting the use case as all common definitions of "bracket" require a pair.

Thoughts?