Francis Storr fstorr
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root{ | |
| filter:grayscale(1) | |
| } |
fstorr
/ github-source-code-wrapping
Created
May 2, 2022 20:31
Stylus style to get source code to wrap on GitHub. Set the "applies to" to "URLs on the domain" and then use github.com
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .blob-code-inner{ | |
| white-space:pre-wrap; | |
| } |
fstorr
/ aria-widget-roles
Last active
February 11, 2022 18:30
ARIA widget roles (see: https://www.w3.org/TR/wai-aria-1.2/#widget_roles)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [role="button"],[role="checkbox"],[role="gridcell"],[role="link"],[role="menuitem"], | |
| [role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],[role="progressbar"],[role="radio"],[role="scrollbar"],[role="searchbox"],[role="separator"],[role="slider"],[role="spinbutton"], | |
| [role="switch"],[role="tab"],[role="tabpanel"],[role="textbox"],[role="treeitem"]{ | |
| outline:2px solid #000f8a; | |
| outline-offset: -2px; | |
| outline-style: dashed; | |
| } | |
| :is([role="button"],[role="checkbox"],[role="gridcell"],[role="link"],[role="menuitem"], | |
| [role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],[role="progressbar"],[role="radio"],[role="scrollbar"],[role="searchbox"],[role="separator"],[role="slider"],[role="spinbutton"], |
fstorr
/ text-spacing
Created
February 11, 2022 17:11
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| letter-spacing: 0.12em !important; | |
| line-height: 1.5 !important; | |
| word-spacing: 0.16em !important; | |
| } | |
| p{ | |
| margin-bottom: 2em !important; | |
| } |
fstorr
/ aria-composite-widget-roles
Last active
February 11, 2022 18:12
ARIA composite widget roles (see: https://www.w3.org/TR/wai-aria-1.2/#widget_roles)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [role="combobox"],[role="grid"],[role="listbox"],[role="menu"],[role="menubar"],[role="radiogroup"],[role="tablist"],[role="tree"],[role="treegrid"]{ | |
| outline:2px solid #1e2eb8; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :is(h1,h2,h3,h4,h5,h6)::after, | |
| :is(h1,h2,h3,h4,h5,h6):empty::after, | |
| [role="heading"]::after, | |
| [role="heading"]:is([aria-level="1"],[aria-level="2"],[aria-level="3"],[aria-level="4"],[aria-level="5"],[aria-level="6"])::after{ | |
| background: #ff8f51; | |
| border:1px solid #e96115; | |
| border-radius:4px; | |
| color:#000; | |
| display: inline-block; | |
| margin:0 0.2em; |
fstorr
/ focus-visible-highlight
Created
February 9, 2022 19:45
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *:focus-visible{ | |
| outline:2px solid hsl(120,100%,50%) !important; | |
| box-shadow: 0 0 0.25em 3px hsla(0,0%,0%,.60) !important; | |
| } |
fstorr
/ highlight-buttons-links-listbox-tabs
Created
February 9, 2022 19:20
fstorr
/ accessibility-forced-focus-highlighting-bookmarklet.js
Created
April 2, 2020 01:37
Bookmarklet to force focus highlighting in accessibility testing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| tweaked version of a bookmarklet I found online (can't remember where now). | |
| Added a `title` attribute to the `<style>` element to make it easier to find in dev tools. | |
| tweaked the outline color and box shadow | |
| */ | |
| javascript:(function()%7Blet a%3Ddocument.createElement('style');a.setAttribute('title','a11y-testing')%3Bdocument.head.appendChild(a)%3Bb%3Da.sheet%3Bb.insertRule(%27*:focus%7Boutline:2px solid hsl(120,100%,50%) !important%3Bbox-shadow: 0 0 0.25em 3px hsla(0,0%,0%,.60) !important%3B%7D%27,0)%3B%7D)() |
fstorr
/ more-accessible-password-strength-meter.html
Last active
March 13, 2020 14:17
More accessible password-strength meter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1, shrink-to-fit=no" | |
| /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script> | |
| <title>More-Accessible Password Strength Meter</title> |
NewerOlder