28 lines
1.1 KiB
Markdown
28 lines
1.1 KiB
Markdown
|
+++
|
||
|
|
title = "Tested using..."
|
||
|
|
+++
|
||
|
|
|
||
|
|
When you're an inclusive designer, it's pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.
|
||
|
|
|
||
|
|
**Infusion** provided a `tested` shortcode that let's you show which browsers and assistive technologies you've tried your design out in. Here's an example. Note the commas and "+" signs.
|
||
|
|
|
||
|
|
{{<codeBlock>}}
|
||
|
|
{{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}}
|
||
|
|
{{</codeBlock>}}
|
||
|
|
|
||
|
|
This outputs:
|
||
|
|
|
||
|
|
{{% tested using="Firefox Android + Talkback, Chrome, Safari iOS + Voiceover, Edge" %}}
|
||
|
|
|
||
|
|
The value for the `using` attribute follows a specific format: each testing setup is separated by a comma (with a space if you like, but it's not mandatory). If you want to add an assistive technology (or any other "add on") this needs to follow a "+". This additional part can be anything, like "A VR headset I borrowed", but there are only a few browser terms available. These are case sensitive, so you need to write them as below:
|
||
|
|
|
||
|
|
* Firefox
|
||
|
|
* Chrome
|
||
|
|
* Safari
|
||
|
|
* IE
|
||
|
|
* Edge
|
||
|
|
* Opera
|
||
|
|
* Chrome Android
|
||
|
|
* Firefox Android
|
||
|
|
* Safari iOS
|