cupper-hugo-theme/content/patterns/coding/tested.md

30 lines
1.3 KiB
Markdown
Raw Normal View History

2017-07-08 13:21:43 +02:00
+++
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.
2017-11-02 16:37:06 +01:00
**Cupper** provided a `tested` shortcode that lets you show which browsers and assistive technologies you've tried your design out in. Here's an example. Note the commas and "+" signs.
2017-07-08 13:21:43 +02:00
{{<codeBlock>}}
2017-07-17 17:46:15 +02:00
&#x7b;{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
2017-07-08 13:21:43 +02:00
{{</codeBlock>}}
This outputs:
2017-07-17 17:46:15 +02:00
{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
2017-07-08 13:21:43 +02:00
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
2017-07-08 14:44:33 +02:00
2017-07-08 15:02:37 +02:00
Obviously, this is not a comprehensive list and more may be added over time. But it covers most of the main browsers for pairing with other software — at least for testing purposes.