Slide 1
Slide 1 text
ΞΫηγϒϧͳ
ϑϩϯτΤϯυ։ൃͷ
͜Ε·Ͱͱ͜Ε͔Β
େࢁԞਓɹ+4$POG+1 2021 - 2021/11/27
Slide 2
Slide 2 text
ࣗݾհ
Slide 3
Slide 3 text
େࢁԞਓʢ͓͓·͓͘ͱʣ
• he/him
• גࣜձࣾΫϥυϫʔΫε
• ϓϩμΫτຊ෦ ϓϩμΫτ։ൃ෦
ϓϥοτϑΥʔϜ։ൃ̏άϧʔϓ
• ࣗশϑϩϯτΤϯυσβΠφʔ
• ΞΫηγϏϦςΟܒOSSίϯτϦ
Ϗϡʔτ׆ಈΛ͍ͯ͠·͢
• Ұࣇͷ
Slide 4
Slide 4 text
ΠϯλʔωοτΞΠσϯςΟςΟɿyamanoku
Slide 5
Slide 5 text
ຊ͓͢Δ͜ͱ
• ΞΫηγϏϦςΟͱԿ͔
• ͜Ε·ͰͷΞΫηγϏϦςΟରԠ
• ͜Ε͔ΒͷΞΫηγϏϦςΟରԠ
• ظ͍ͯ͠ΔΞϓϩʔν
Slide 6
Slide 6 text
̍.
ΞΫηγϏϦςΟͱԿ͔
Slide 7
Slide 7 text
ΞΫηγϏϦςΟ
Slide 8
Slide 8 text
͋ΒΏΔਓ͕
ΞΫηεͰ͖ΔΑ͏ʹ͢Δ
Slide 9
Slide 9 text
ΣϒΞΫηγϏϦςΟ
Slide 10
Slide 10 text
ΣϒΞΫηγϏϦςΟʛ֎ল
“ϗʔϜϖʔδΛར༻͍ͯ͠Δશͯͷਓ͕ɺ
৺ͷ݅ར༻͢Δڥʹؔͳ͘ɺ
ϗʔϜϖʔδͰఏڙ͞Ε͍ͯΔใػೳʹ
ࢧোͳ͘ΞΫηε͠ɺར༻Ͱ͖Δ͜ͱ”
Slide 11
Slide 11 text
Press Release: W3C Launches International Program Of
fi
ce for WAI
“The power of the Web is in its universality. Access
by everyone regardless of disability is an essential
aspect.”
Slide 12
Slide 12 text
ΣϒʹΞΫηγϒϧ
Slide 13
Slide 13 text
ଟ༷ͳϢʔβΛߟྀ͢Δ
Slide 14
Slide 14 text
༷ʑͳίϯςΩετ͕ଘࡏ͢Δ
• ૢ࡞Ͱ͖ΔσόΠε͕ෳଘࡏ͢Δ
• αʔϏεΛͬͯΒ͏ঢ়گɾڥҟͳΔ
• ͳΜΒ͔ͷো͕͋Γૢ࡞͕༰қʹͰ͖ͳ͍߹͋Δ
• ΞΫηγϏϦςΟΛҙࣝ͢Δͱߟྀ͢ΔίετݮΒͤΔ
Slide 15
Slide 15 text
ΞΫηεͰ͖ΔΛ૿͢
Slide 16
Slide 16 text
ҰਓͻͱΓ͕Ͱ͖ΔΑ͏ʹͳΔ
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
ࠜڌͷ͋Δ
σβΠϯΛͭ͘Δ
Slide 19
Slide 19 text
yamanoku.github.io/EXPLAINING_PORTFOLIO_SITE_ja.md
“ϝΠϯίϯςϯπͷ࠷େ෯80chʹઃఆ͍ͯ͠·͢ɻch
νΣʔϯͱݺΕɺจࣈͷαΠζʹΑͬͯՄม͢Δ୯ҐͰ
͢ɻ
͜ͷઃఆʹ͢Δ͜ͱͷϝϦοτͱͯ͠ɺจ͕ಡΊͳ͍ಡࣈ
োͷར༻ऀͷαϙʔτ͕Ͱ͖ͨΓɺจࣈαΠζ͕େ͖͘ͳ
ΔʹैͬͯςΩετͷҰ෦͕͚ܽͯಡΊͳ͘ͳΔΑ͏ͳࣄଶ
ൃੜ͠ʹ͘͘ͳΓ·͢ɻ”
Slide 20
Slide 20 text
ຽؒاۀͷ
߹ཧతྀͷఏڙٛ
Slide 21
Slide 21 text
ຽؒࣄۀऀʹোྀ͚ٛɹվਖ਼ࠩผղফ๏ཱ ʛ ڞಉ௨৴
“ো͕͋ΔਓͷҠಈҙࢥૄ௨Λແཧͷͳ
͍ൣғͰࢧԉ͢Δʮ߹ཧతྀʯΛاۀళ
ฮͳͲͷຽؒࣄۀऀʹ͚ٛΔվਖ਼োऀ
ࠩผղফ๏͕28ͷࢀӃຊձٞͰશձҰகͰ
Մܾɺཱͨ͠ɻ”
Slide 22
Slide 22 text
োΛཧ༝ͱ͢Δࠩผͷղফͷਪਐʹؔ͢Δجຊํ - ֳ
“๏ɺෆಛఆଟͷোऀΛओͳରͱͯ͠
ߦΘΕΔࣄલతվળાஔʢதུʣʹ͍ͭͯɺ
ݸผͷ໘ʹ͓͍ͯɺݸʑͷোऀʹରͯ͠ߦ
ΘΕΔ߹ཧతྀΛత֬ʹߦ͏ͨΊͷڥͷ
උͱ࣮ͯ͠ࢪʹΊΔ͜ͱͱ͍ͯ͠Δɻ”
Slide 23
Slide 23 text
ΞΫηγϏϦςΟߟྀ͕
͞Ε͍ͯΔ͜ͱΛΔ
Slide 24
Slide 24 text
ΣϒΞΫηγϏϦςΟࢼݧ݁Ռʢ2021ʣ
౦ژ ৽ܕίϩφΠϧεײછରࡦαΠτ
Slide 25
Slide 25 text
̎.
͜Ε·Ͱͷ
ΞΫηγϏϦςΟରԠ
Slide 26
Slide 26 text
͜Ε·ͰͷΞΫηγϏϦςΟରԠ
• ηϚϯςΟΫεϚʔΫΞοϓΛ࣮ʹ
• HTMLΛਖ਼͘͠͏
• ෳࡶ͞ WAI-ARIA Ͱิࠤ͍ͯ͘͠
Slide 27
Slide 27 text
ηϚϯςΟΫε
ϚʔΫΞοϓ
Slide 28
Slide 28 text
ηϚϯςΟΫεϚʔΫΞοϓ
• ҙຯͱͯ͠ͷදݱΛѻ͏Α͏ʹ͢Δ
• ϚγϯϦʔμϒϧʹͳΔ
• ࢧԉٕज़ʹΘΔΑ͏ʹมͰ͖Δ
• ίϯςϯπҠಈ͢ΔͨΊͷΠϯλϑΣʔεʹ͋Δ
• SEOͷఆʹ༏Ґੑ͕͋Δ
Slide 29
Slide 29 text
HTML Λਖ਼͘͠͏
Slide 30
Slide 30 text
Use button, not div
Slide 31
Slide 31 text
ͳͥ button Λ༻͢Δͷ͔
• Σϒϒϥβ্ͰͷϢʔεέʔεΛදݱ͢Δ
• UAσϑΥϧτελΠϧγʔτͰݟ͕ͨิ͑Δ
• ΫϦοΫΩʔϘʔυૢ࡞
• ϑΥʔΧεཧ
• దͳϚʔΫΞοϓͰͳ͍ͱϢʔεέʔεΛิ͑ͳ͍
Slide 32
Slide 32 text
HTML Λਖ਼͘͠͏ͨΊʹ
• Nu Html Checker Λ௨ͯ͡ߏจΤϥʔͷ֬ೝΛ͢Δ
• ೖΕࢠؔΛཧղͯ͠༻͢Δ
• ࢧԉٕज़ʹ௨͡ΔϚʔΫΞοϓ
• CSS͕ͳͯ͘ҙຯ͕ཧղͰ͖ΔΑ͏ʹͳ͍ͬͯΔ
Slide 33
Slide 33 text
WAI-ARIA
Slide 34
Slide 34 text
https://wicg.github.io/aom/explainer.html
Slide 35
Slide 35 text
https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html
Slide 36
Slide 36 text
WAI-ARIA Authoring Practices 1.1
“No ARIA is better than Bad ARIA”
Slide 37
Slide 37 text
̏.
͜Ε͔Βͷ
ΞΫηγϏϦςΟରԠ
Slide 38
Slide 38 text
͜Ε·ͰͷରԠܧଓ
Slide 39
Slide 39 text
UI ͷ੍ޚཧ
Slide 40
Slide 40 text
ϑΥʔΧεϚωδϝϯτ
Slide 41
Slide 41 text
Tab Focus
Slide 42
Slide 42 text
https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html
Slide 43
Slide 43 text
https://crowdworks.jp/login
Slide 44
Slide 44 text
Sigle Page Application
Slide 45
Slide 45 text
ONLY index.html
Slide 46
Slide 46 text
ϑϩϯτΤϯυଆͰ
ঢ়ଶΛཧ͢Δ
Slide 47
Slide 47 text
ϖʔδʹ͋Δ
ঢ়ଶΛมԽͤ͞Δ
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
εΫϦʔϯϦʔμʔ
Ͱ
Ͳ͏ௌ͑͜Δͷ͔
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
🙄
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
🤔
Slide 54
Slide 54 text
Ͳ͏ղܾ͢Ε͍͍͔ʁ
Slide 55
Slide 55 text
ARIA ϥΠϒϦʔδϣϯ
Slide 56
Slide 56 text
֤ϑϨʔϜϫʔΫͷ
ରԠΛݟͯΈΔ
Slide 57
Slide 57 text
Next.js
Slide 58
Slide 58 text
RouteAnnouncer
const { asPath } = useRouter(
)
const [routeAnnouncement, setRouteAnnouncement] = React.useState(''
)
const initialPathLoaded = React.useRef(false
)
React.useEffect
(
() =>
{
if (!initialPathLoaded.current)
{
initialPathLoaded.current = tru
e
retur
n
}
if (document.title)
{
setRouteAnnouncement(document.title
)
} else
{
const pageHeader = document.querySelector('h1'
)
const content = pageHeader?.innerText ?? pageHeader?.textConten
t
setRouteAnnouncement(content || asPath
)
}
}
,
[asPath
]
)
Slide 59
Slide 59 text
GatsbyJS
Slide 60
Slide 60 text
SvelteKit
Slide 61
Slide 61 text
svelte-announcer
{#if mounted
}
{#if navigated
}
{title
}
{/if
}
{/if
}
Slide 62
Slide 62 text
Angular
Slide 63
Slide 63 text
Async Pipe
Slide 64
Slide 64 text
LiveAnnouncer
@Component(
{
selector: "app-component
"
providers: [LiveAnnouncer
]
}
)
export class AppComponent
{
constructor(liveAnnouncer: LiveAnnouncer)
{
liveAnnouncer.announce("live region!")
;
}
}
Slide 65
Slide 65 text
Vue.js
Slide 66
Slide 66 text
vue-announcer
{
name: 'home'
,
path: '/'
,
component: Home
,
meta:
{
announcer: { // vue-announcer setting
s
message: 'ϗʔϜը໘
'
}
}
}
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
👍
Slide 69
Slide 69 text
ཹҙ͢Δ͜ͱ
Slide 70
Slide 70 text
ಡΈ্͛Δ༻్Λཧղ͢Δ
• ௨ૢ࡞ͷೖͬͯ͘ΔͱϢʔβମݧΛଛͶΔ
• جຊతʹ aria-live=“polite” Ͱ௨ͤ͞Δ
• ݱࡏਐߦதͷಡΈ্͕͛ྃͰ͖͔ͯΒ௨͞ΕΔ
• ۓٸੑͷߴ͍ϝοηʔδ aria-live=“assertive” Ͱ௨ͤ͞Δ
• role=“alert” ༗༻
Slide 71
Slide 71 text
̐.
ظ͢ΔΞϓϩʔν
Slide 72
Slide 72 text
https://docs.microsoft.com/ja-jp/lifecycle/faq/internet-explorer-microsoft-edge
Slide 73
Slide 73 text
ϒϥβ
υΩϡϝϯτϏϡϫʔ
Slide 74
Slide 74 text
ϋΠύʔςΩετͱͯ͠ͷ HTML
Slide 75
Slide 75 text
GUI ͱͯ͠ͷ HTMLʁ
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
ࢲ͕ظ͢Δͷͷհ
Slide 78
Slide 78 text
React GUI
Slide 79
Slide 79 text
React GUI
• React DOM ͚ͷ GUI πʔϧΩοτ
• υΩϡϝϯτϏϡϫʔ্ͰGUIΛදݱ͍ͤͨ͞
• React Native for Web ͔Βͷܥේ
• React Native ύʔπΛ༻ͯ͠ Web ্Ͱදݱ͢Δ
• RN for Web Twitter Liteʢݱ Twitter WebʣͰ༻
Slide 80
Slide 80 text
σβΠϯγεςϜ
͔Βͷൃ
Slide 81
Slide 81 text
Headless UI
Slide 82
Slide 82 text
Headless UI
• Tailwind Labs ։ൃ
• ݟͨΛ࡞͍ͬͯͳ͍ UI ϥΠϒϥϦ
• Tailwind CSS ͳͲͰఆٛͰ͖Δ
• React.js ͱ Vue3 ͷΈରԠ
Slide 83
Slide 83 text
React Aria
Slide 84
Slide 84 text
React Aria
• Adobe ։ൃ
• React Spectrum σβΠϯγεςϜΛߏ͢Δ̍ཁૉ
• UIͱͯ͠ͷڍಈɺΞΫηγϏϦςΟ࣮Λ Hooks Ͱ
• React.js ͷΈରԠ
Slide 85
Slide 85 text
JavaScript ʹ
ৼΔ͍Λूͤ͞Δ
Slide 86
Slide 86 text
React A11y & TailwindCSS
let { buttonProps, isPressed } = useButton(props, ref)
;
let { focusProps, isFocusVisible } = useFocusRing()
;
let className = classNames
(
props.isDisabled ? "bg-gray-400" : isPressed ? "bg-blue-700" : "bg-blue-500"
,
"text-white", "font-bold"
,
"py-2", "px-4"
,
"rounded"
,
"cursor-default"
,
"focus:outline-none"
,
isFocusVisible ? "shadow-outline" : ""
,
"transition", "ease-in-out", "duration-150
"
);
Slide 87
Slide 87 text
useNumberField
function NumberField(props)
{
let {locale} = useLocale()
;
let state = useNumberFieldState({...props, locale})
;
let inputRef = React.useRef()
;
let incrRef = React.useRef()
;
let decRef = React.useRef()
;
let { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(props, state, inputRef)
;
let {buttonProps: incrementProps} = useButton(incrementButtonProps, incrRef)
;
let {buttonProps: decrementProps} = useButton(decrementButtonProps, decRef)
;
return
(
{props.label}
)
;
}
-
+
Slide 88
Slide 88 text
৽ͨͳΔ
ϢʔεέʔεΛ
͢Δ
Slide 89
Slide 89 text
Custom Elements
Slide 90
Slide 90 text
Slide 91
Slide 91 text
Custom Elements Λੜ͢Δ
class ToggleButton extends HTMLElement {
connectedCallback()
{
this.setAttribute("role", "button")
;
this.setAttribute("aria-pressed", “false")
;
this.addEventListener("click", togglePressed)
;
this.addEventListener("keydown", function (event)
{
if (event.key === "Enter" || event.key === "Space")
{
togglePressed()
;
}
})
;
}
}
customElements.define("toggle-button", ToggleButton);
Slide 92
Slide 92 text
DOMͰදࣔ͞ΕΔͱ͖ͯ͢ݱΕΔ
Toggl
e
Default Butto
n
Slide 93
Slide 93 text
Accessibility Object Model
Slide 94
Slide 94 text
Custom Element & AOM Ͱදݱ͢Δ
class ToggleButton extends HTMLElement
{
constructor()
{
super()
;
this._internals = this.attachInternals()
;
this._internals.role = "button";
this._internals.ariaPressed = false
;
}
}
ToggleButton.addEventListener('keydown', (event) =>
{
if (event.key === "Enter" || event.key === "Space")
{
toggleButton()
;
}
})
;
customElements.define("toggle-button", ToggleButton);
Slide 95
Slide 95 text
ͷΑ͏ʹӅṭ͞ΕΔ
ɹToggl
e
Default Butto
n
Slide 96
Slide 96 text
ࣗΒͰఆ͍ٛͯ͘͠
Slide 97
Slide 97 text
੍͕͋ΔͨΊ
ۜͷؙͰͳ͍
Slide 98
Slide 98 text
ࠓޙಈΛ͍ͭͭ
Slide 99
Slide 99 text
ঢ়گ
Ϣʔεέʔεʹ߹Θͤͯ
׆༻Ͱ͖ΔΑ͏ʹ
Slide 100
Slide 100 text
͓ΘΓʹ
Slide 101
Slide 101 text
ΞΫηγϏϦςΟରԠ
Slide 102
Slide 102 text
ΣϒΞΫηγϏϦςΟͷ̐ݪଇ
Slide 103
Slide 103 text
ΣϒΞΫηγϏϦςΟͷ̐ݪଇ
1. ֮Մೳ
2. ૢ࡞Մೳ
3. ཧղՄೳ
4. ݎ࿚
Slide 104
Slide 104 text
ΣϒΞΫηγϏϦςΟͷ̐ݪଇ
1. ֮Մೳ
2. ૢ࡞Մೳ
3. ཧղՄೳ
4. ݎ࿚
Slide 105
Slide 105 text
֮Ͱ͖ΔΑ͏ʹ͢Δ
Slide 106
Slide 106 text
৮ΕΔͷΛͭ͘Δ
Slide 107
Slide 107 text
৮ΕΔͱ͍͏͜ͱ
ͦ͜ʹԿ͔͕͋Δͱ
ؾ͚Δ
Slide 108
Slide 108 text
ख͕͔ΓΛ࡞Δ͜ͱ͕
ΞΫηγϏϦςΟ
ରԠͷҰาʹͳΔ
Slide 109
Slide 109 text
͔͔̌̍ͷ͡Όͳ͍
Slide 110
Slide 110 text
৮ΕΔͷΛ
࡞͍ͬͯ͜͏
Slide 111
Slide 111 text
͋ΒΏΔਓ͕
ࢀՃͰ͖ΔΑ͏ʹ
ͳΔͨΊʹ
Slide 112
Slide 112 text
ΞΫηγϒϧͳ
ϑϩϯτΤϯυ։ൃΛ
͍ͬͯ͜͏
Slide 113
Slide 113 text
͜Ε·Ͱ
ͦͯ͠
͜Ε͔Β
Slide 114
Slide 114 text
ΞΫηγϒϧͳ
ϑϩϯτΤϯυ։ൃͷ
͜Ε·Ͱͱ͜Ε͔Β
େࢁԞਓɹ+4$POG+1 2021 - 2021/11/27
Slide 115
Slide 115 text
͋Γ͕ͱ͏͍͟͝·ͨ͠