Skip to content

Instantly share code, notes, and snippets.

@missmatsuko
missmatsuko / a11y-project_quick-test_navigate-using-just-your-keyboard.md
Created August 19, 2018 03:58
Quick Test: Navigate using just your keyboard

Introduction

Testing your site for keyboard navigation will ensure that keyboard users can access your site.

As a bonus, sites that can be navigated with a keyboard can also likely be navigated using other input devices.

How to navigate a website with a keyboard

Generally, pressing tab moves focus between elements and pressing enter will interact with them.

If you are using Safari, option-tab is the default keyboard shortcut to move focus between elements.

Social Network Dedicated Image Alt Text Platforms
Instagram [Yes](https://help.instagram.com/503708446705527) iOS and Android
Facebook [Yes](https://www.facebook.com/help/214124458607871) iOS and Computer
LinkedIn Yes Computer
Twitter [Yes](https://help.twitter.com/en/using-twitter/picture-descriptions) iOS and Android and Computer
@missmatsuko
missmatsuko / a11y-debug-focus.js
Created July 31, 2019 22:44
a11y debug focus script - logs active element on tab
document.addEventListener('keyup', (e) => {
if (event.key === 'Tab') {
console.log(document.activeElement);
}
});
@missmatsuko
missmatsuko / reset.css
Last active August 21, 2019 14:22
reset.css
*,
*:after,
*:before {
box-sizing: border-box;
}
body,
html,
blockquote,
figure,
@missmatsuko
missmatsuko / top.md
Last active October 3, 2019 21:51 — forked from chriscoyier/top.md

The top property is used with position to set the top placement of an element. It only has an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky.

Syntax

div {
  top: <length> || <percentage> || auto || inherit;
}

The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky.

div {
  :  ||  || auto || inherit;
}

You might use it, for example, to nudge an icon into place:

button .icon {
 position: relative;
@missmatsuko
missmatsuko / international-emphasis-typography.md
Created January 23, 2020 03:26
International Emphasis Typography

Overview

Seems like <em> is styled as italic regardless of language. Different languages have different conventions for indicating emphasis. For example, <em> should not be styled as italic in Japanese because it can make the text illegible.

From what I can tell, <em> should only be styled as italic for languages using Latin alphabets, but more research is needed to figure out how <em> should be styled in different languages.

W3C discussing it here

Collection of notes on emphasis typography for different languages

@missmatsuko
missmatsuko / user.css
Last active October 29, 2020 13:23
Custom browser content stylesheet
/* Hide Google smartlock login popup */
iframe[src^="https://smartlock.google.com/"] {
display: none !important;
}
/* Brighter Netflix and YouTube videos */
video[src^="blob:https://www.netflix.com/"],
video[src^="blob:https://www.youtube.com/"] {
filter: brightness(1.4);
}