diff --git a/_compress_images_cache.yml b/_compress_images_cache.yml index 44eef8b94..40fe17024 100644 --- a/_compress_images_cache.yml +++ b/_compress_images_cache.yml @@ -1468,6 +1468,35 @@ assets/images/guide/how-it-works/lightning-services/Offline-payment-mobile.png: assets/images/guide/how-it-works/lightning-services/Offline-payment-mobile@2x.png: Offline-payment-mobile@2x.png assets/images/guide/how-it-works/lightning-services/Offline-payment.png: Offline-payment.png assets/images/guide/how-it-works/lightning-services/Offline-payment@2x.png: Offline-payment@2x.png +assets/images/guide/designing-products/accessibility/annotations-bad.png: annotations-bad.png +assets/images/guide/designing-products/accessibility/annotations-bad@2x.png: annotations-bad@2x.png +assets/images/guide/designing-products/accessibility/annotations-bad-isolated.png: annotations-bad-isolated.png +assets/images/guide/designing-products/accessibility/annotations-bad-isolated@2x.png: annotations-bad-isolated@2x.png +assets/images/guide/designing-products/accessibility/annotations-good-isolated.png: annotations-good-isolated.png +assets/images/guide/designing-products/accessibility/annotations-good-isolated@2x.png: annotations-good-isolated@2x.png +assets/images/guide/designing-products/accessibility/annotations-good.png: annotations-good.png +assets/images/guide/designing-products/accessibility/annotations-good@2x.png: annotations-good@2x.png +assets/images/guide/designing-products/accessibility/color-vision-defficiencies.png: color-vision-defficiencies.png +assets/images/guide/designing-products/accessibility/color-vision-defficiencies@2x.png: color-vision-defficiencies@2x.png +assets/images/guide/designing-products/accessibility/dynamic-type.png: dynamic-type.png +assets/images/guide/designing-products/accessibility/dynamic-type@2x.png: dynamic-type@2x.png +assets/images/guide/designing-products/accessibility/multi-sensory-feedback.png: multi-sensory-feedback.png +assets/images/guide/designing-products/accessibility/multi-sensory-feedback@2x.png: multi-sensory-feedback@2x.png +assets/images/guide/designing-products/accessibility/ordering-bad.png: ordering-bad.png +assets/images/guide/designing-products/accessibility/ordering-bad@2x.png: ordering-bad@2x.png +assets/images/guide/designing-products/accessibility/ordering-good.png: ordering-good.png +assets/images/guide/designing-products/accessibility/ordering-good@2x.png: ordering-good@2x.png +assets/images/guide/designing-products/accessibility/accessibility-preview.jpg: accessibility-preview.jpg +assets/images/guide/designing-products/accessibility/accessibility-mobile.jpg: accessibility-mobile.jpg +assets/images/guide/designing-products/accessibility/accessibility-mobile@2x.jpg: accessibility-mobile@2x.jpg +assets/images/guide/designing-products/accessibility/accessibility.jpg: accessibility.jpg +assets/images/guide/designing-products/accessibility/accessibility@2x.jpg: accessibility@2x.jpg +assets/images/guide/designing-products/accessibility/annotations-bad-big.png: annotations-bad-big.png +assets/images/guide/designing-products/accessibility/annotations-bad-isolated-big.png: annotations-bad-isolated-big.png +assets/images/guide/designing-products/accessibility/annotations-good-big.png: annotations-good-big.png +assets/images/guide/designing-products/accessibility/annotations-good-isolated-big.png: annotations-good-isolated-big.png +assets/images/guide/designing-products/accessibility/ordering-bad-big.png: ordering-bad-big.png +assets/images/guide/designing-products/accessibility/ordering-good-big.png: ordering-good-big.png assets/images/guide/glossary/address/address-compact.png: address-compact.png assets/images/guide/glossary/address/address-compact@2x.png: address-compact@2x.png assets/images/guide/glossary/address/address-expanded.png: address-expanded.png diff --git a/_includes/image-gallery.html b/_includes/image-gallery.html index cc5839b0e..5a3424106 100644 --- a/_includes/image-gallery.html +++ b/_includes/image-gallery.html @@ -6,9 +6,18 @@ {% capture imageURLRetina %}{{ page.image_base }}{{ item.file }}@2x.png{% endcapture %} {% capture captionText %}{{ item.caption | no_runts | markdownify }}{% endcapture %} +{%- if item.modalImage != nil -%} + {% capture modalImage %}{{ page.image_base }}{{ item.modalImage }}.png{% endcapture %} +{% else %} + {% assign modalImage = nil %} +{%- endif -%} + {% include picture.html image = imageURL retina = imageURLRetina + modalImage = modalImage + modalWidth = item.modalWidth + modalHeight = item.modalHeight alt-text = item.alt caption = captionText width = 250 diff --git a/assets/images/guide/designing-products/accessibility/accessibility-mobile.jpg b/assets/images/guide/designing-products/accessibility/accessibility-mobile.jpg new file mode 100644 index 000000000..eb7acd229 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/accessibility-mobile.jpg differ diff --git a/assets/images/guide/designing-products/accessibility/accessibility-mobile@2x.jpg b/assets/images/guide/designing-products/accessibility/accessibility-mobile@2x.jpg new file mode 100644 index 000000000..20d231568 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/accessibility-mobile@2x.jpg differ diff --git a/assets/images/guide/designing-products/accessibility/accessibility-preview.jpg b/assets/images/guide/designing-products/accessibility/accessibility-preview.jpg new file mode 100644 index 000000000..2023d214a Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/accessibility-preview.jpg differ diff --git a/assets/images/guide/designing-products/accessibility/accessibility.jpg b/assets/images/guide/designing-products/accessibility/accessibility.jpg new file mode 100644 index 000000000..629c88296 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/accessibility.jpg differ diff --git a/assets/images/guide/designing-products/accessibility/accessibility@2x.jpg b/assets/images/guide/designing-products/accessibility/accessibility@2x.jpg new file mode 100644 index 000000000..b8288f555 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/accessibility@2x.jpg differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-bad-big.png b/assets/images/guide/designing-products/accessibility/annotations-bad-big.png new file mode 100644 index 000000000..3b7ed0f5f Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-bad-big.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-bad-isolated-big.png b/assets/images/guide/designing-products/accessibility/annotations-bad-isolated-big.png new file mode 100644 index 000000000..3aa810e13 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-bad-isolated-big.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-bad-isolated.png b/assets/images/guide/designing-products/accessibility/annotations-bad-isolated.png new file mode 100644 index 000000000..f80455887 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-bad-isolated.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-bad-isolated@2x.png b/assets/images/guide/designing-products/accessibility/annotations-bad-isolated@2x.png new file mode 100644 index 000000000..3dfaff79d Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-bad-isolated@2x.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-bad.png b/assets/images/guide/designing-products/accessibility/annotations-bad.png new file mode 100644 index 000000000..d8403b477 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-bad.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-bad@2x.png b/assets/images/guide/designing-products/accessibility/annotations-bad@2x.png new file mode 100644 index 000000000..80792489e Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-bad@2x.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-good-big.png b/assets/images/guide/designing-products/accessibility/annotations-good-big.png new file mode 100644 index 000000000..ead2c3073 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-good-big.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-good-isolated-big.png b/assets/images/guide/designing-products/accessibility/annotations-good-isolated-big.png new file mode 100644 index 000000000..62481f75c Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-good-isolated-big.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-good-isolated.png b/assets/images/guide/designing-products/accessibility/annotations-good-isolated.png new file mode 100644 index 000000000..6c1d8a33f Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-good-isolated.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-good-isolated@2x.png b/assets/images/guide/designing-products/accessibility/annotations-good-isolated@2x.png new file mode 100644 index 000000000..1a2fc002d Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-good-isolated@2x.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-good.png b/assets/images/guide/designing-products/accessibility/annotations-good.png new file mode 100644 index 000000000..2fc78ac43 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-good.png differ diff --git a/assets/images/guide/designing-products/accessibility/annotations-good@2x.png b/assets/images/guide/designing-products/accessibility/annotations-good@2x.png new file mode 100644 index 000000000..21637200e Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/annotations-good@2x.png differ diff --git a/assets/images/guide/designing-products/accessibility/color-vision-defficiencies.png b/assets/images/guide/designing-products/accessibility/color-vision-defficiencies.png new file mode 100644 index 000000000..54c78893a Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/color-vision-defficiencies.png differ diff --git a/assets/images/guide/designing-products/accessibility/color-vision-defficiencies@2x.png b/assets/images/guide/designing-products/accessibility/color-vision-defficiencies@2x.png new file mode 100644 index 000000000..942552bef Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/color-vision-defficiencies@2x.png differ diff --git a/assets/images/guide/designing-products/accessibility/dynamic-type.png b/assets/images/guide/designing-products/accessibility/dynamic-type.png new file mode 100644 index 000000000..3292973d4 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/dynamic-type.png differ diff --git a/assets/images/guide/designing-products/accessibility/dynamic-type@2x.png b/assets/images/guide/designing-products/accessibility/dynamic-type@2x.png new file mode 100644 index 000000000..5c5555cb6 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/dynamic-type@2x.png differ diff --git a/assets/images/guide/designing-products/accessibility/multi-sensory-feedback.png b/assets/images/guide/designing-products/accessibility/multi-sensory-feedback.png new file mode 100644 index 000000000..3aa7f8a18 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/multi-sensory-feedback.png differ diff --git a/assets/images/guide/designing-products/accessibility/multi-sensory-feedback@2x.png b/assets/images/guide/designing-products/accessibility/multi-sensory-feedback@2x.png new file mode 100644 index 000000000..b248ff3a0 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/multi-sensory-feedback@2x.png differ diff --git a/assets/images/guide/designing-products/accessibility/ordering-bad-big.png b/assets/images/guide/designing-products/accessibility/ordering-bad-big.png new file mode 100644 index 000000000..b8408b040 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/ordering-bad-big.png differ diff --git a/assets/images/guide/designing-products/accessibility/ordering-bad.png b/assets/images/guide/designing-products/accessibility/ordering-bad.png new file mode 100644 index 000000000..1607cebd0 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/ordering-bad.png differ diff --git a/assets/images/guide/designing-products/accessibility/ordering-bad@2x.png b/assets/images/guide/designing-products/accessibility/ordering-bad@2x.png new file mode 100644 index 000000000..4cf0c0ef1 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/ordering-bad@2x.png differ diff --git a/assets/images/guide/designing-products/accessibility/ordering-good-big.png b/assets/images/guide/designing-products/accessibility/ordering-good-big.png new file mode 100644 index 000000000..d8e868278 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/ordering-good-big.png differ diff --git a/assets/images/guide/designing-products/accessibility/ordering-good.png b/assets/images/guide/designing-products/accessibility/ordering-good.png new file mode 100644 index 000000000..3ba4baa81 Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/ordering-good.png differ diff --git a/assets/images/guide/designing-products/accessibility/ordering-good@2x.png b/assets/images/guide/designing-products/accessibility/ordering-good@2x.png new file mode 100644 index 000000000..ac45b132a Binary files /dev/null and b/assets/images/guide/designing-products/accessibility/ordering-good@2x.png differ diff --git a/guide/daily-spending-wallet/landing-page.md b/guide/daily-spending-wallet/landing-page.md index d42c61600..39af1a95f 100644 --- a/guide/daily-spending-wallet/landing-page.md +++ b/guide/daily-spending-wallet/landing-page.md @@ -96,8 +96,8 @@ An overview of how to help users maintain transaction privacy with bitcoin. --- {% include next-previous.html - previousUrl = "/guide/designing-products/interoperability/" - previousName = "Interoperability" + previousUrl = "/guide/designing-products/accessibility/" + previousName = "Accessibility" nextUrl = "/guide/daily-spending-wallet/first-use/" nextName = "First use" %} diff --git a/guide/designing-products/accessibility.md b/guide/designing-products/accessibility.md new file mode 100644 index 000000000..127d5614e --- /dev/null +++ b/guide/designing-products/accessibility.md @@ -0,0 +1,169 @@ +--- +layout: guide +title: Accessibility +description: Overview and practical tips for making bitcoin applications more accessible +nav_order: 8 +parent: Designing bitcoin products +permalink: /guide/designing-products/accessibility/ +main_classes: -no-top-padding +image: https://bitcoin.design/assets/images/guide/designing-products/accessibility/accessibility-preview.jpg +image_base: /assets/images/guide/designing-products/accessibility/ +exampleImages: + - file: annotations-bad + modalImage: annotations-bad-big + modalWidth: 750 + modalHeight: 1624 + alt: Request screen with lacking voice control overlays + caption: An example of a screen with missing button labels. The small overlays indicate the information provided to a screen reader. + - file: annotations-bad-isolated + modalImage: annotations-bad-isolated-big + modalWidth: 750 + modalHeight: 1624 + alt: Blacked-out screen with voice control overlays + caption: The same screen without UI elements to better highlight what is accessible to a visually impaired person. + - file: annotations-good + modalImage: annotations-good-big + modalWidth: 750 + modalHeight: 1624 + alt: Request screen with good voice control overlays + caption: Here, all elements are selectable, well-ordered and labelled. The user has multiple options to share the address, based on their needs. + - file: annotations-good-isolated + modalImage: annotations-good-isolated-big + modalWidth: 750 + modalHeight: 1624 + alt: Blacked-out screen with good voice control overlays + caption: Well annotated content is understandable even when the screen cannot be seen. +exampleImagesTwo: + - file: ordering-bad + modalImage: ordering-bad-big + modalWidth: 750 + modalHeight: 1624 + alt: Blacked-out screen with poorly ordered voice control overlays + caption: When the order of elements on the screen is not correctly defined, users have a harder time making sense of them. + - file: ordering-good + modalImage: ordering-good-big + modalWidth: 750 + modalHeight: 1624 + alt: Blacked-out screen with well ordered voice control overlays + caption: A correct order guides users logically through the UI. +exampleImagesThree: + - file: multi-sensory-feedback + alt: Request screen showing visual feedback for the Copy address function + caption: Make sure to offer alternate interaction methods and provide multi-sensory feedback for user actions. + - file: dynamic-type + alt: Request screen with large text than normal + caption: Ensure the layout still works with larger text sizes. Respect other user preferences like reducing motion and increased contrast. + - file: color-vision-defficiencies + alt: Request screen in greyscale + caption: Ensure the information can be understood by those with color vision defficiences. For example, by using "+" and "-" indicate withdrawals and deposits instead of green and red coloration only. +--- + + + +{% include picture.html + image = "/assets/images/guide/designing-products/accessibility/accessibility.jpg" + retina = "/assets/images/guide/designing-products/accessibility/accessibility@2x.jpg" + mobile = "/assets/images/guide/designing-products/accessibility/accessibility-mobile.jpg" + mobileRetina = "/assets/images/guide/designing-products/accessibility/accessibility-mobile@2x.jpg" + alt-text = "Notebook with handwritten user actions" + width = 1600 + height = 500 + layout = "full-width" +%} + +# Accessibility +{:.no_toc} + +Accessibility is an aspect of inclusive design and covers creating products that enable people of all backgrounds and abilities to use them effectively. With financial inclusion being an important value in the bitcoin ethos, we also need to extend this into bitcoin products being more inclusive for all people, including people with disabilities. Disabilities are not limited to permanent disabilities. We also have temporary situations (situational disabilities) where accessibility is applicable. For example, a woman carrying a baby can only use one hand on her mobile phone. Socio-economic restrictions like poor bandwidth also fall under accessibility. When done well, an accessible product can be used by all users, regardless of any impairment they may have. Can all users have the same user experience and fully enjoy your product? + +> "One billion people, or 15% of the world's population, experience some form of disability." +> +> Via the World Health Organization + +## Why is it important? + +As a payment network, bitcoin was designed to be borderless and permissionless. But if the applications people use to interact with the network are not versatile enough to accommodate diverse needs, then many of us will still not be able to take advantage of the benefits bitcoin provides. Products should be able to be used and accessed by all people, regardless of their social status, and so this should also extend into people with disabilities. [Developing nations](https://en.wikipedia.org/wiki/List_of_countries_by_literacy_rate) are the ones who seek to benefit the most from bitcoin. We want to improve usability for all people so they can easily navigate and move with ease through the applications. This means designing products that use plain language, support users with complex tasks, respect user preferences, work well with assistive technologies, and more. + +A great side-effect is that a product designed with accessibility in mind is also easier to use for the part of the audience without impairments. This is referred to as the "[curb-cut](https://en.wikipedia.org/wiki/Curb_cut_effect)" effect. For example, many hearing people use closed captioning. + +As a wider community, we also have a moral obligation to make products [inclusive]({{ '/guide/getting-started/principles/#inclusion' | relative_url }}) for everyone and ensure that their experiences with our products are suitable, regardless of their physical and mental abilities. + +## Categories of accessibility needs + +#### Vision + +This includes full or partial blindness, color blindness, and other visual disabilities. Three million people in the US alone have vision impairment, and one million people are blind ([source](https://www.afb.org/research-and-initiatives/statistics)). See how a [blind person uses an iPhone](https://youtu.be/fjdcKioHb5w). + +#### Physical + +A physical disability can effect a person temporarily or permanently. On a practical level this affects their ability to use a keyboard or mouse. Tapping a screen or holding a phone still to scan a QR code could pose as a challenge. Seventy-five million people across the world need a wheel chair on a daily basis ([source](https://www.inclusivecitymaker.com/disabled-people-in-the-world-in-2021-facts-and-figures/)). Listen to a [quadriplegic talking about accessibility](https://www.youtube.com/watch?v=eMFrcJBX0pA). + +#### Intellectual + +Learning difficulties refer to a lower ability to understand new or complex information. Someone with intellectual difficulties also struggles with learning and applying new skills and can also have difficulty reading or understanding things. Over two hundred million people have some form of intellectual disability ([source](https://www.inclusivecitymaker.com/disabled-people-in-the-world-in-2021-facts-and-figures/)). + +#### Hearing + +This includes hearing difficulties such as being completely or partly deaf, affecting one or both ears. Any hearing loss below 20 decibels is considered a hearing loss. 400 million people have some form of deafness or hearing loss ([source](https://www.inclusivecitymaker.com/disabled-people-in-the-world-in-2021-facts-and-figures/)). + +#### Literacy + +Illiteracy is a person's inability to read, write, or understand a simple statement that is related to their everyday life. There are over 700 million illiterate adults worldwide, and more than half of them are women ([source](http://uis.unesco.org/en/topic/literacy)). + +## Tips and examples + +Improving accessibility may seem like an overwhelming task. The most important thing is to get started, so let's take a look at some basics. Correctly labeling interactive elements is one of the essential practices in accessibility. It allows screen readers to understand and convey the information to impaired users in various ways. The following example illustrates some good and bad practices. + +{% include image-gallery.html pages = page.exampleImages %} + +It is impossible to know what a button does when it is only labelled as "button", and not with its function. Testing has shown that QR codes are often not selectable at all, which makes them invisible to users reliant on screen readers. A good solution is a label such as "QR code to copy the receive address". + +Also important is that elements are correctly ordered. Otherwise users reliant on the keyboard, or other linear navigation techniques, will not be able to easily understand what is on the screen. + +{% include image-gallery.html pages = page.exampleImagesTwo %} + +Providing alternate interaction methods and respecting a users accessibility settings are also important. A user with impaired motor skills may not be able to scan a QR code, a color blind user may not recognize red text as an error message, and a blind user benefits from the use of sound or vibration for interactive feedback. + +{% include image-gallery.html pages = page.exampleImagesThree %} + +## Accessibility tools + +Operating systems and certain software provide built-in tools to help with accessibility needs, such as screen readers ([VoiceOver](https://en.wikipedia.org/wiki/VoiceOver), [Narrator](https://en.wikipedia.org/wiki/Narrator_(Windows)), [TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=10601571)), [keyboard navigation](https://webaim.org/techniques/keyboard/), eye-tracking support, and voice control. + +The accessibility pages by [Apple](https://www.apple.com/accessibility/), [Microsoft](https://www.microsoft.com/en-us/accessibility), and [Android](https://www.android.com/accessibility/) provide great overviews of the various needs and features. Many of these work mostly out of the box for applications, but they do rely on elements on screen to be well organized and marked up, so the operating system can interpret and translate them correctly. + +### Sources of information + +- [What is accessibility?](https://www.interaction-design.org/literature/topics/accessibility) +- [Web accessibility](https://en.wikipedia.org/wiki/Web_accessibility) +- [Material design accessibility tips](https://material.io/design/usability/accessibility.html#understanding-accessibility) +- [Web content accessibility guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/) +- [Accessibility guidelines for non-web applications (WCAG2ICT)](https://www.w3.org/TR/wcag2ict/) + +### Usability testing resources + +- [Setup iPhone or iPad for iOS mobile accessibility testing](https://www.youtube.com/watch?v=Ca1H6wF348g) +- [Accessibility testing on android devices](https://www2.stardust-testing.com/en/how-to-perform-accessibility-testing-for-android-devices) +- [Usability studies for accessibility](https://www.nngroup.com/reports/how-to-conduct-usability-studies-accessibility/) +- [Test your app's accessibility](https://developer.android.com/guide/topics/ui/accessibility/testing) + +--- + +Next, we jump into how to design a [daily spending wallet]({{ '/guide/daily-spending-wallet/' | relative_url }}). + +{% include next-previous.html + previousUrl = "/guide/designing-products/interoperability/" + previousName = "Interoperability" + nextUrl = "/guide/daily-spending-wallet/" + nextName = "Daily spending wallet" +%} diff --git a/guide/designing-products/interoperability.md b/guide/designing-products/interoperability.md index 7a2c22482..3613841b0 100644 --- a/guide/designing-products/interoperability.md +++ b/guide/designing-products/interoperability.md @@ -256,11 +256,11 @@ This is particularly useful if users want to open a payment channel directly fro --- -Next, we jump into how to design a [daily spending wallet]({{ '/guide/daily-spending-wallet/' | relative_url }}). +Our next page deals with [accessibility]({{ '/guide/designing-products/accessibility/' | relative_url }}). {% include next-previous.html previousUrl = "/guide/designing-products/units-and-symbols/" previousName = "Units and symbols" - nextUrl = "/guide/daily-spending-wallet/" - nextName = "Daily spending wallet" + nextUrl = "/guide/designing-products/accessibility/" + nextName = "Accessibility" %}