Skip to content

Instantly share code, notes, and snippets.

View stevefaulkner's full-sized avatar

Steve Faulkner stevefaulkner

View GitHub Profile

I spend a fair amount of time contributing to Mozilla and other browser vendors and (hopefully) improving HTML accessibility implementations in browsers by filing bugs, working on the HTML spec at the W3C, discussing issues with browser acc engineers etc. As part of this work I recently developed tests and tested the interoperability of HTML5 accessibility implementation requirements in all of the major browsers (Firefox, Chrome, IE and Safari). This was a time consuming and arduous task i undertook in my own time, because I want accessibility implementations to work in browsers. It is with regret that I read the decision makers at Mozilla see the work myself and many others do at the W3C as having little value to Mozilla.

NOTE: I have not said ‪#‎Mozilla‬ don't care about accessibility, but questioned the simplistic narrative of HTML at the W3C = ALL BAD and HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>button acc name test</title>
</head>
<body>
<p><button aria-label="pooter" aria-labelledby="pootish" type="button">poot</button> </p>
@stevefaulkner
stevefaulkner / gist:6507474
Last active December 22, 2015 17:39
using this http://tutorials.jenkov.com/svg/switch-element.html working switch example the following exposes the title or desc as the acc name.
<svg height="50" width="500" role="img" aria-labelledby="alt">
<switch>
<g systemLanguage="en-UK">
<text y="20" x="10">UK English</text>
</g>
<g systemLanguage="en">
<text y="20" x="10">English</text>
</g>
<title id="alt">alt text</title>
</switch>
<div class="tweet original-tweet js-stream-tweet js-actionable-tweet js-profile-popup-actionable js-original-tweet
" data-feedback-key="stream_status_374123416800206848" data-tweet-id="374123416800206848" data-item-id="374123416800206848" data-screen-name="dboudreau" data-name="Denis Boudreau " data-user-id="10096552" data-is-reply-to="true" data-has-parent-tweet="true" data-expanded-footer="&lt;div class=&quot;js-tweet-details-fixer tweet-details-fixer&quot;&gt;
&lt;div class=&quot;js-tweet-media-container &quot;&gt;&lt;/div&gt;&lt;div class=&quot;entities-media-container &quot; style=&quot;min-height:0px&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;js-machine-translated-tweet-container&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;js-tweet-stats-container tweet-stats-container &quot;&gt;
&lt;/div&gt;&lt;div class=&quot;client-and-actions&quot;&gt;
&lt;span class=&quot;metadata&quot;&gt;
&lt;span title=&quot;11:55 AM - 1 Sep 13&quot;&gt;11:55 AM - 1 Sep 13&lt;/span&gt;
&amp;middot; &lt;a class=&quot;permalink-lin
@stevefaulkner
stevefaulkner / label
Last active December 19, 2015 09:48
using label element for associating extra descriptive text
example 1 single label wraps primary label text and auxiliary label text results
in accessible name for the control being the a concatenation of the primary and auxiliary label text.
conforming:
<label>name <input type"text"> last name only please</label>
example 2 primary label = accessible name, auxiliary label = accessible description
conforming:
<p><label>name <input type"text" aria-describedby="instructions"></label></p>