Skip to content

Instantly share code, notes, and snippets.

View fuzzbomb's full-sized avatar

Andrew Macpherson fuzzbomb

View GitHub Profile

Keybase proof

I hereby claim:

  • I am fuzzbomb on github.
  • I am fuzzbomb (https://keybase.io/fuzzbomb) on keybase.
  • I have a public key ASArCoqgkl9ZSIqjtaWLAFfxC_KmLp3VfakxsXWYEH8_FAo

To claim this, I am signing this object:

@fuzzbomb
fuzzbomb / index.html
Last active August 13, 2018 17:08
Using aria-label to override content of a HTML heading
<h1 aria-label="big blue banana">Big<span>yellow</span>bananas</h1>
<p>
This is a test of whether an <code>aria-label</code> will work on a heading element. The use-case is for a heading which has several words, but contains no spaces. The <code>aria-label</code> is intended to provide a properly-spaced alternative to the heading content, to avoid mispronunciation problems by screen readers.
</p>
<p>This is an experiment, to answer a StackOverflow question. See <a href="https://stackoverflow.com/questions/51816452/how-do-screen-readers-handle-text-separated-by-tags-not-spaces">How do screen readers handle text separated by tags (not spaces)?</a></p>
<p>TODO: Test in various screen readers, note results here. Does the screen reader say yellow, or blue?</p>
@fuzzbomb
fuzzbomb / fieldset-legend-validation-demo.html
Created July 18, 2018 20:46
Fieldset-legend validation demo
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Fieldset/Legend demo</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML5 Fieldset/Legend demo</h1>
<p>THis page has a form with fieldsets. One fieldset has a legend, the other doesn't. What does the HTML validator say?</p>
<form action="/example">
@fuzzbomb
fuzzbomb / html5-li-test.html
Created October 3, 2012 17:33
HTML5 list validation test
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list test</title>
</head>
<body>
<h1>List validation Test</h1>
<p>This file is NOT valid HTML5. Demonstrates that &lt;a /&gt; elements are not permitted as direct children of &lt;ul /&gt; or &lt;ol /&gt;</p>