Scaling Accessibility experience with WorldSpace Attest
Axe DevTools (by Deque Systems, Inc) empowers web & mobile dev 🧑💻 teams with a comprehensive testing toolkit 🛠 for a dynamic range of accessibility tests.
What is WorldSpace Attest?
WorldSpace Attest is a toolkit for finding, preventing and fixing accessibility defects while you code. Axe DevTools integrates into your existing development tools so your team doesn’t have to worry about working with a new platform. Accessibility testing will simply become part of your development process.
Teams can catch 70% of accessibility defects while they code, running automated & Intelligent Guided tests without impacting existing processes😯.
So, in this session we are going to discuss about setup attest tool, work on attest tool to scan and fix the issues.
Before moving to the discussion, assumption🧐 is that we all know about the basics of accessibility and implementing accessibility in iOS.
If not, will recommend to go though the following sessions😋:
Accessibility in iOS: Start Off
Accessibility in iOS: Hands on Code
Setup Attest Tool
There are two types of attest tools provided by Deque Systems, Inc.
First: Attest Desktop Application, Second: Attest Browser Version
So, here we will be discussing about first one i.e. Attest Desktop Application.
We need following tools to setup the Attest Tool:
JDK: Attest tool internally works with JavaScript. So, we need to install minimum java version 13.0.2 (jdk-8u231 can download from here)
Attest Desktop Application: Download attest mobile application (Attest-Mobile-2.0) from Deque Systems’s paid account and install it on your machine.
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ We’re all setup
Work on Attest Tool
So, let’s start to hands on the attest tool and check how we can check and fix them.
- Create new project and name is
AttestDemo
. - Add the
Attest.xcframework
in to your project. - Add
App Transport Security Settings
ininfo.plist
<key>NSAppTransportSecurity</key><dict><key>NSAllowsArbitraryLoads</key><true/></dict>
4. Add below mentioned code in func applicationDidBecomeActive(_ application: UIApplication)
of AppDelegate
or func sceneDidBecomeActive(_ scene: UIScene)
of SceneDelegate
to initiate Attest.
Attest.setLocalConnection(withPort: 48485)Attest.startTesting(with: ManualFABDelegate(),attestDelegate: ManualTestDelegate(),and: FABWindowStrategy.attach)
5. Run you code, you’ll see purple guy button (as shown below) on top of your simulator/device screen.
6. Now, first run you attest desktop application and use your application and click on purple guy button (as shown above) to scan.
As you click, one entry will be logged in to attest application, there you can check what are the issues (if any).
Scan and Fix issues:
Now, it’s time to add some code in our AttestDemo
project.
⇨ Add a UITableView
and one UITableViewCell
with one UILabel
in storyboard.
⇨ Implement UITableViewDataSource
and UITableViewDelegate
and create 5 cells.
⇨ Now, run the application and click on purple guy, you’ll see there is one entry in Attest application having 5 issues.
⇨ Now lets, go for fix of these issues.
You can click on issue name to see help to fix these issues. If you found that help use-full can implement that otherwise can go for your fix.
⇨ After implementing the above solution, again run the application and click on purple guy, you’ll see there is one entry in Attest application having 0 issues.
That’s all, we are done with the basics of attest you can explore more about Accessibility.
📣 For the mobile application, we usually supports for WCAG 2.1 Lavel AA guidelines.
In our next coming session will discuss about Attest without desktop application that will work just with webBrowser.
Thank you for reading, please hit the recommend icon and share if like this collection 😊 .
Still have Questions? Leave them in the comment, we can take them up.