Skip to content

Instantly share code, notes, and snippets.

Avatar

Kentaro Tanaka roatnek

View GitHub Profile
@roatnek
roatnek / visually-hidden-for-a11y.css
Last active Apr 10, 2018
視覚的に隠すアクセシブルな方法
View visually-hidden-for-a11y.css
/*
視覚的に隠しつつスクリーンリーダーでは読み上げられる。
display:none, visibility:hidden, height:0, width:0 ではうまく機能しない(視覚・聴覚両方で該当要素は利用できない)
(インクルーシブHTML P.75より)
*/
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
View if_there_is_not_the_directory_make_it.js
// Node.js
var fs = require('fs');
function func() {
try {
fs.statSync('./foo/');
// operate files in the directory foo
@roatnek
roatnek / disablePhoneLink.js
Last active Apr 13, 2017
telな機能を持たないデバイスではtelリンクを無効化する
View disablePhoneLink.js
View visibility:hiddenしたフォームコントロールはタブフォーカスできない.md

タイトルで出オチ。

説明

visibility:hiddenしたフォームコントロールはタブフォーカスできない(タブオーダーから外れる)ことに気が付きました。

display:noneしたフォームコントロールがタブフォーカスできないのは知っていたし理解できるけど、visibility

  • 見えてるか見えてないか」の表示性を表すプロパティであり、
  • displayのように存在までなくしてしまうわけではない
View _mixin-pseudo-elem-icon.scss
@mixin pseudo-elem-icon($width, $height, $image) {
content: "";
width: $width;
height: $height;
display: inline-block;
background: url($image) no-repeat 0 0;
background-size: contain;
}
// Usage
View arrayShallowCopy.js
var original_array = ['D-1', 'D-2', 'D-3'];
var copied_array = original_array.concat();
original_array.push('Dragoon');
// original_array --> ['D-1', 'D-2', 'D-3', 'Dragoon']
// copied_array --> ['D-1', 'D-2', 'D-3']
@roatnek
roatnek / uncheckCheckboxWhenItWasChecked.js
Last active Mar 13, 2017
チェックしたチェックボックスをアンチェックする
View uncheckCheckboxWhenItWasChecked.js
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('click', function(event) {
event.target.checked = false;
});
View isIE.js
var isIE = !(window.ActiveXObject) && "ActiveXObject" in window;