アプリのユーザー体験を高めるAccessibility Modifier

ΞϓϦͷϢʔβʔମݧΛߴΊΔ "DDFTTJCJMJUZ.PEJpFS Ϧϣ΢!3ZP%FWFMPQFS ͸͡Ίʹ ΞΫηγϏϦςΟͱ͸ɺ৘ใ΍ػೳʹΞΫηεͰ͖Δ͔ɺ·ͨ͸ͦͷ౓߹͍Λҙຯ͠·͢ɻ ΞϓϦ։ൃʹ͓͍ͯ͸ɺςΩετͷ৭ͷಡΈ΍͢͞΍ɺϘλϯͷԡ͠΍͢͞ͱ͍ͬͨ೔ৗతʹ ҙࣝ͞ΕΔϙΠϯτ͔Βɺ04͕ఏڙ͢Δࢧԉٕज़ͷରԠ·Ͱɺ͞·͟·ͳ؍఺͕ٻΊΒΕ·͢ɻ ͜ͷύϯϑϨοτͰ͸ɺ7PJDF0WFS΍Ի੠ίϯτϩʔϧͳͲͷɺ04ͷࢧԉٕज़Λ׆༻͢ΔͨΊͷ .PEJpFSʹϑΥʔΧεΛ౰ͯͯ঺հ͠·͢ɻ ͜ΕΒͷࢧԉٕज़΋ɺ৐Γ෺ਲ͍͠΍͍͢ਓ͕ը໘Λ௚ࢹͤͣʹૢ࡞͍ͨ͠৔߹΍ɺख͕ԚΕͯ
͍Δ৔໘Ͱը໘Λ৮Εͣૢ࡞͍ͨ͠৔߹ͳͲɺ୭ʹͱͬͯ΋໾ཱͭ਎ۙͳػೳͰ͢ɻ ΞΫηγϒϧͳΞϓϦΛ࡞Δ͜ͱ͸ɺো͕͍ͷ༗ແ΍ఔ౓ɺΞϓϦΛར༻͢Δ؀ڥʹ͔͔ΘΒͣɺ ͢΂ͯͷϢʔβʔʹՁ஋͋ΔମݧΛఏڙ͢Δ͜ͱʹͭͳ͕Γ·͢ɻ ΞΫηγϏϦςΟରԠͷୈҰา ΞΫηγϏϦςΟ͸ਖ਼͘͠ରԠ͢Δ͜ͱͰޮՌΛ࠷େݶʹൃش͠·͢ɻ ͔͠͠ɺΞΫηγϏϦςΟػೳΛ࢖ͬͨ͜ͱ͕ͳ͍ਓ͕ద੾ͳରԠΛ͢Δͷ͸೉͍͠΋ͷͰ͢ɻ ͜ͷهࣄΛಡΈਐΊΔલʹɺ͓ख࣋ͪͷ୺຤ͰΞΫηγϏϦςΟػೳΛମݧ͢Δ͜ͱΛΦεεϝ ͠·͢ɻ ઃఆΞϓϦˠΞΫηγϏϦςΟˠγϣʔτΧοτͰ7PJDF0WFSͱԻ੠ίϯτϩʔϧʹνΣοΫΛ ͚ͭΔ͜ͱͰɺαΠυϘλϯΛτϦϓϧΫϦοΫͯ͠ɺ͜ΕΒͷػೳͷ༗ޮɾແޮΛ੾Γସ͑ΒΕ ·͢ɻ "QQMFͷΞϓϦ΍ࣗ͝਎Ͱ։ൃ͍ͯ͠ΔΞϓϦΛૢ࡞ͯ͠ɺΞΫηγϏϦςΟରԠͷύλʔϯ΍ ՝୊Λ୳͢ͱ͜Ζ͔Β࢝ΊͯΈ͍ͯͩ͘͞ɻ BDDFTTJCJMJUZ-BCFM ཁૉΛઆ໌͢ΔϥϕϧΛ௥Ճ͠·͢ɻ ඪ४ͷίϯϙʔωϯτ͸ɺجຊతʹ࠷దͳϥϕϧ͕ઃఆ͞Ε͍ͯ·͢ɻ 4'4ZNCPMT΋!CPPLNBSL͸ʮϒοΫϚʔΫʯɺ"UPSUPJTF͸ʮ଎౓ΛԼ͛ΔʯͷΑ͏ʹɺ Ϣʔεέʔεʹ͍ۙϥϕϧ͕ઃఆ͞Ε͍ͯ·͢ɻ ͦͷͨΊɺσϑΥϧτͷঢ়ଶͰ΋໰୊ͳ͍͜ͱ͕ଟ͍Ͱ͕͢ɺҙຯ͕఻ΘΓʹ͍͘৔߹͸ద੾ͳ આ໌ʹมߋͰ͖·͢ɻ αϯϓϧίʔυͰ͸ɺzϒοΫϚʔΫʹ௥Ճzͱ͍͏ϥϕϧΛ෇͚Δ͜ͱͰɺϘλϯͷઆ໌ΛΑΓ ໌֬ʹ͍ͯ͠·͢ɻ ͜ΕʹΑΓɺ7PJDF0WFSͰ͸ʮϒοΫϚʔΫʹ௥ՃϘλϯʯͱಡΈ্͛ΒΕɺԻ੠ίϯτϩʔϧ Ͱ͸ʮϒοΫϚʔΫʹ௥ՃΛλοϓʯͱൃ࿩͢Δ͜ͱͰૢ࡞Ͱ͖·͢ɻ

BDDFTTJCJMJUZ&MFNFOU ৽͍͠ΞΫηγϏϦςΟཁૉΛ࡞੒͠·͢ɻ 7PJDF0WFSͳͲͷϑΥʔΧε͸ɺجຊతʹը໘ͷࠨ্͔ΒӈԼʹ޲͚ͯҠಈ͠·͢ɻ ͦͷͨΊɺαϯϓϧίʔυͷΑ͏ͳը໘Ͱ͸ʮλΠτϧʯˠʮλΠτϧʯˠʮλΠτϧʯˠ ʮίϯςϯπʯˠʮίϯςϯπʯˠʮίϯςϯπʯͷΑ͏ʹɺҙຯ͕఻ΘΒͳ͍ॱংͰಡΈ ্͛ΒΕΔ͜ͱ͕͋Γ·͢ɻ αϯϓϧίʔυͰ͸ɺBDDFTTJCJMJUZ&MFNFOUʹ.combineΛࢦఆ͢Δ͜ͱͰɺಡΈ্͛ॱংͷमਖ਼ ʹՃ͑ͯɺཁૉ಺ͷBDDFTTJCJMJUZ-BCFM΍ϑΥʔΧεͳͲΛͭͷཁૉʹ߹੒ͯ͠ɺ φϏήʔγϣϯΛ௚ײతʹ͍ͯ͠·͢ɻ BDDFTTJCJMJUZ)JEEFO
ΞΫηγϏϦςΟػೳʹɺೝࣝ͞ΕΔඞཁͷͳ͍ཁૉΛӅ͠·͢ɻ ૷০໨తͷཁૉͳͲɺࢹ֮Ҏ֎Ͱ͸৘ใΛ࣋ͨͳ͍߲໨Λɺ7PJDF0WFSͳͲ͔Βೝࣝ͞Εͳ͍ Α͏ʹͰ͖·͢ɻ αϯϓϧίʔυͰ͸ɺഎܠը૾ΛΞΫηγϏϦςΟػೳ͔Βೝࣝͤ͞ͳ͍Α͏ʹ͍ͯ͠·͢ɻ Button { addBookmark() } label: { Image(systemName: "bookmark") } .accessibilityLabel("ϒοΫϚʔΫʹ௥Ճ") ScrollView(.horizontal) { HStack { ForEach(cardItems, id: \.self) { item in CardView(item: item) .accessibilityElement(children: .combine) } } .padding() } ద༻લͷϑΥʔΧε ద༻ޙͷϑΥʔΧε Image(.background) .resizable() .aspectRatio(contentMode: .fill) .ignoresSafeArea() .accessibilityHidden(true)

BDDFTTJCJMJUZ4PSU1SJPSJUZ ཁૉͷ༏ઌ౓Λઃఆ͠·͢ɻ 7PJDF0WFSͳͲͷϑΥʔΧε͸ɺجຊతʹը໘ͷࠨ্͔ΒӈԼʹ޲͚ͯҠಈ͠·͢ɻ αϯϓϧίʔυͷΑ͏ʹɺλΠτϧɾίϯςϯπɾด͡ΔϘλϯ͕ฒΜͰ͍Δը໘Ͱɺด͡Δ Ϙλϯ͔ΒϑΥʔΧε͕౰ͨΔͱɺԿʹରͯ͠ͷด͡ΔϘλϯͳͷ͔͕༧ଌ͠ʹ͘͘ͳΓ·͢ɻ αϯϓϧίʔυͰ͸ɺλΠτϧˠίϯςϯπˠด͡Δͷॱ൪ͰϑΥʔΧε͕౰ͨΔΑ͏ʹ༏ઌ౓ Λௐ੔͢Δ͜ͱͰɺϘλϯͷ༻్Λ໌֬ʹ͍ͯ͠·͢ɻ ਺ࣈ͕େ͖͍΄Ͳ༏ઌ౓͕ߴ͘ɺσϑΥϧτ஋͸Ͱ͢ɻෛͷ஋Λࢦఆ͢Δ͜ͱ΋Ͱ͖·͢ɻ BDDFTTJCJMJUZ4PSU1SJPSJUZͰ༏ઌ౓Λௐ੔͢Δ৔߹͸ɺಉ࣌ʹϨΠΞ΢τࣗମ͕࠷ద͔Ͳ͏͔Λ ݕ౼͢Δ͜ͱ΋Φεεϝ͠·͢ɻ
BDDFTTJCJMJUZ"EE5SBJUT ཁૉʹಛੑΛ௥Ճ͠·͢ɻ ཁૉʹʮݕࡧϑΟʔϧυʯͳͲͷ໾ׂ΍ɺʮબ୒தʯͱ͍ͬͨঢ়ଶΛ໌ࣔͯ͠ɺಡΈ্͛ͷ಺༰΍ ϑΥʔΧεͷڍಈΛௐ੔Ͱ͖·͢ɻ 7PJDF0WFSͰϘλϯʹϑΥʔΧεΛ౰ͯͨͱ͖ʹɺʮ BDDFTTJCJMJUZ-BCFM ϘλϯʯͱಡΈ্͛ ΒΕΔͷ΋͜ͷಛੑʹΑΔ΋ͷͰ͢ɻ αϯϓϧίʔυͷΑ͏ͳϞʔμϧΛ࡞੒ͨ͠৔߹ɺϞʔμϧͷԼʹӅΕ͍ͯΔཁૉʹ΋ϑΥʔΧε ͕౰ͨΔ͜ͱ͕͋Γ·͢ɻ VStack { HStack { Spacer() Button { dismiss() } label: { Image(systemName: "xmark") } .accessibilitySortPriority(-1.0) } Text(title) .font(.headline) .accessibilitySortPriority(1.0) Text(content) .accessibilitySortPriority(0.0) } ద༻લͷॳظϑΥʔΧε ద༻ޙͷॳظϑΥʔΧε

αϯϓϧίʔυͰ͸ɺϞʔμϧͷ7JFXͷBDDFTTJCJMJUZ"EE5SBJUTʹ.isModalΛࢦఆ͢Δ͜ͱͰɺ Ϟʔμϧͷදࣔத͸എޙͷཁૉʹϑΥʔΧε͕౰ͨΒͳ͍Α͏ʹ͍ͯ͠·͢ɻ ͓ΘΓʹ ࠷ޙ·Ͱ͓ಡΈ͍͖ͨͩɺ͋Γ͕ͱ͏͍͟͝·͢ɻ ͜ͷύϯϑϨοτ͕ɺΞΫηγϏϦςΟͷॏཁੑ΍ࢧԉٕज़΁ͷཧղΛਂΊΔ͖͔͚ͬʹͳΕ͹ ޾͍Ͱ͢ɻ  ײ૝͸ɺͥͻ#iosdc #Accessibility Λ͚ͭͯSNSͰڞ༗͍͚ͯͨͩ͠Δͱخ͍͠Ͱ͢ɻ  ࠓޙ΋ΞϓϦ։ൃʹ໾ཱͭ৘ใΛൃ৴͠·͢ɻڵຯͷ͋Δํ͸X
(@RyoDeveloper) ͷϑΥϩʔ΋͓ ଴͍ͪͯ͠·͢ɻ ZStack { VStack { Text("ϞʔμϧͷԼͷཁૉ") Button("ϞʔμϧΛ։͘") { isShowModal.toggle() } .disabled(isShowModal) } if isShowModal { CustomModalView { VStack { Text("Ϟʔμϧͷதͷཁૉ") Button("ϞʔμϧΛด͡Δ") { isShowModal.toggle() } } } .accessibilityAddTraits(.isModal) } } ϞʔμϧͷԼͷཁૉ ద༻લͷϑΥʔΧε ద༻ޙͷϑΥʔΧε

アプリのユーザー体験を高めるAccessibility Modifier

アプリのユーザー体験を高めるAccessibility Modifier

リョウ

More Decks by リョウ

Other Decks in Programming

Featured

Transcript