Summary:
- Discuss the importance of accessibility and usability
- Accessibility
- User preferences
- Usability
- User Interface Redesign
- Showcase Specify 7.7 features and talk about how they incorporate accessible design
- Interface Schema Editor & Data model viewer
- Tree Viewer
- Query Builder
- WorkBench & GeoMap
- Data Forms
- Single Sign-On Authentication & Role-Based Access System
- Preview of upcoming features
Transcript
Paragraph summary:
Accessibility makes webapps work for as many people as possible and provides a better experience for all users. Usability is about software being a pleasure to use and adapting to users’ needs. Specify has put great effort into both of these goals is recent updates of Specify 7.
This webinar will cover the importance of accessibility and usability, showcase how we improved accessibility in Specify 7.7, and give a preview of upcoming exciting features.
[Slide 1: Specify 7: Accessibility & Usability]
Hi!
My name is Max and I am a front-end developer at Specify Collections
Consortium
Today I will talk about recent accessibility improvements we made to Specify 7.
[Slide 2: Agenda]
In particular,
I will cover the importance of accessibility and usability,
showcase how we improved accessibility in Specify 7.7,
and give a preview of upcoming exciting features.
[Slide 3: Introduction to Accessibility]
So Why is accessibility important?
Accessibility is important because it enables webapps to work for persons with disabilities,
but also it just provides a better experience for everyone as you will see from the features we will talk about today.
Making software accessible also helps meet international standards
For example, the most recent Specify 7 release is largely compliant with the main web accessibility standard - WCAG 2.1 (AA)
And we also added screen reader support
[Slide 4: User Preferences: Automatic adjustments]
At the same time, Specify has put great effort into improving usability, which we define as software being a pleasure to use and adapting to users’ needs.
To that end, Specify 7 now listens to user’s preferences for date formats, interface theme, font size, and language.
[Slide 5: User Preferences: Dark Mode]
As an example, if I change the theme to dark in my operating system preferences, Specify 7 instantly reacts to that change.
[Slide 6: User Preferences: General]
We also added a user preferences menu to Specify 7, where additional
options can be configured.
Among accessibility related user preferences are options for fine tuning
interface colors
This way, besides simply enabling dark mode, you can change the background colors and change accent colors to increase contrast.
Same applies to form fields, as you can change the background color for regular fields, disabled fields, required fields and fields with validation errors
[Slide 7: User Preferences: Font]
You can also overwrite default browser font size or scale the interface, and all pages will adapt automatically to display nicely.
Additionally, some users might be interested in changing the default font. You can make Specify use any font that you have installed on your system, for example a Dyslexia Font.
You can even change font size and font family used in forms independently of the font used in all other pages.
[Slide 8: User Preferences: Dialogs]
Besides the general interface look and feel, many pages in Specify use Dialog windows extensively, and that’s why we added quite a few customization options specifically for them
You can:
Make the page title update automatically to match the dialog title so the screen reader announces what the dialog is about
There is an option to disable translucent dialog backgrounds to increase contrast,
or you can go one step further and blur the content behind the dialog to make the dialog content have even higher contrast.
Similarly, dialogs in the forms usually don’t darken the background to allow editing several forms simultaneously, but you can change that behavior to improve accessibility.
And, there is an option to prevent dialog from closing automatically on Escape key press or click outside of dialog bounds. This is useful if you find yourself accidentally closing the dialog.
[Slide 9: User Preferences: Miscellaneous]
Among other interesting user preferences are:
The ability to change interface language.
Though, at present only two languages are supported. If anyone is interested in localizing the interface to more languages, we would be excited to hear from you.
User preferences also offer an option to completely disable animations across all pages or reduce transparency.
And to accommodate varying screen sizes, in the recent releases forms have been made more flexible with column widths changing automatically. Still, you can disable that option to closely resemble Specify 6 behavior.
As you can see, a lot of these options are useful not just for people with disabilities, but for every kind of user as they allow you to customize your experience of using Specify and make the interface look and behave the way you like.
[Slide 10: Usability]
As part of the push for greater accessibility, important usability improvements have been made too. Specify now leverages browser APIs and tools to provide many User Interface components.
This means that the browser is the one responsible for making sure interactive elements are compatible with screen readers, have excellent keyboard and touch screen support, as well as look nice under the user’s chosen theme, which provides a much better experience for the user while removing responsibility for all these things from the developers.
Though, if you, for example, want to disable the new date picker, you have an option to return to the previous design.
[Slide 11: User Interface Redesign]
Next, we wanted to make the interface look friendlier so we redesigned all pages with that in mind.
For example, colors are used generously throughout the interface to focus attention and add contrast, buttons are larger to make them easier to click at, and many components have rounded corners
But, you have an option to disable rounded corners everywhere to make clickable area of buttons even larger
[Slide 12: User Interface Redesign]
Also, all links that open in a new tab have an indicator, and are
announced accordingly by the screen reader.
At the same time, you have an option of alt+clicking (or option+clicking on a mac) on the link to open it in the current tab instead.
One example where that is useful is the query builder. Clicking on a query result usually opens a new tab but you can suppress that by alt+clicking on a link instead.
[Slide 13: User Interface Redesign]
Many of the improvements mentioned today are possible thanks to the modern styling library we are using called Tailwind.CSS.
It makes the interface adapt better to varying screen sizes. In the future, we could improve mobile support as data entry on the go could be useful.
Here are examples of how Specify 7 looks like on a tablet device.
[Slide 14: User Interface Redesign]
Another side effect of using this styling library is the consistency it promotes throughout the interface.
Besides making the app look more professional, reusing the same design helps users learn different components of the app quicker.
[Slide 15: Schema Configuration Tool]
Now let’s talk about accessibility and usability improvements for individual features.
You might remember that we added a Schema Configuration Tool in Specify 7.7 which makes Specify data model customizable to your institution’s needs.
The schema configurator could also be used to improve accessibility, as you can add usage notes for any field to add additional context for the person entering data. The usage notes are also picked up by screen reader software.
Similarly, schema config allows to hide unused fields, which improves keyboard navigation in the query builder as it is easier to find and select the right field when there are fewer fields visible
[Slide 16: Tree Viewer: Search Box]
Additionally, if you used Specify recently, you might have noticed the updated Tree viewer, which, alongside the refined design now has an improved search capability and important accessibility improvements.
For example, the search box shows the tree rank for each result, allowing to find the right record easier. If you are a screen reader user, you would notice that when you do a search, the screen reader will announce how many search results have been returned and which search result is currently selected.
[Slide 17: Tree Viewer: Autoscroll]
Specify tries to reduce the need to scroll manually by automatically scrolling to selected tree nodes when navigating the tree using the keyboard.
Similarly, when you run a query, Specify scrolls down to query results automatically, but you can disable this behavior if it conflicts with your accessibility software or if you find it annoying.
[Slide 18: WorkBench]
Now, it’s worth briefly mentioning the Specify WorkBench, which is our bulk data import solution. You can just throw a spreadsheet of data at it, and it would automatically try to map your spreadsheet columns to database fields and then validate the data and make a record set of all created records.
WorkBench accessibility is not yet at a level we like, but that is something we will improve. For now, you have the ability to customize the behavior of some keyboard shortcuts.
In the future though, we will enhance keyboard navigation and add the ability to edit data sets using an external program like Google Sheets or Microsoft Excel.
[Slide 19: GeoMap]
After uploading the data set, if you try to plot newly uploaded records on a map, you would notice that the GeoMap dialog supports a lot of gestures, but you have an option to disable them if they interfere with your accessibility software.
[Slide 20: Query Builder]
Then, there is the Query Builder.
Exporting data from the Specify database is one of the most important use cases, and to that end the Query Builder has been designed to the highest quality standard.
Recent Specify update made the Query Builder feature complete with nice additions like the mapping editor you see at the top of the screen. It allows you to quickly add fields to your query from a variety of tables.
Query Builder now also has full pick list support and ability to run an “OR” query.
For example, these filters return all collection objects whose catalog numbers are in this range or in this range.
These features make building queries faster.
You can also preview query results easier without leaving the query builder,
or create record sets from a subset of query results.
We are currently working on supporting spatial search.
And we will be adding the ability to plot query results on a map.
Keep an eye out for these features in the coming months.
[Slide 21: Data Forms Update]
Besides the query builder, the most used component of Specify 7 is the data entry screen. New release brings several updates like a redesigned validation system for quicker feedback, and improved record set capabilities to match and exceed features offered by Specify 6.
The validation system is now fully compatible with the screen reader software and will give you context aware error messages. For example, if a field has a minimum value length requirement, the error message will tell you how many more characters you need to enter to pass the validation.
[Slide 22: Looking Ahead: Form Editor]
There are several more exciting features that you should keep a lookout for in the coming months.
For example, we are looking into implementing a user interface for editing WebLinks, Field formatters, Record formatters, Record Aggegators, and even Form Definitions. Specify form system have a lot of advanced features, but many people are unaware of them because editing forms is cumbersome. The user interface will make configuring forms way more accessible and approachable.
[Slide 23: Looking Ahead: Read-only mode]
In Specify 7.8, we will be adding an easy way to temporarily enable a read only mode across all Specify pages. This is useful when you want to demo your database without fear of accidentally overwriting data.
[Slide 24: Looking Ahead: Top Level Menu]
We also added support for Single-Sign On and the permission system. It might not be obvious at first, but these things have implications for accessibility.
Single-Sign On can help streamline the authentication process, which would be appreciated by all users.
And the permission system allows you to hide pretty much any interface component to make interface simpler to use and thus reduce cognitive complexity. For example, you can remove the ability to export query results, or remove access to rarely used tables, which hides the corresponding buttons in the interface, making the toolbar look less cluttered.
Similarly, the user preferences page allows hiding individual top menu items.
But, we are looking into adding even more customization options in the
future, including the ability to display the menu as a sidebar or
collapse it entirely to save on precious screen estate. This would be
helpful as the menu occupies too much space at present, especially if
you scaled the interface.
[Slide 25: Looking Ahead: Keyboard navigation]
Keyboard navigation in Specify has improved greatly in the recent releases - you can do almost anything in specify without the need for a mouse. We are now testing every release of Specify to make sure every important action can be performed with the keyboard alone. Touch screen support has also been improved, but it is not the primary focus at the moment.
In the future, we are going to improve keyboard navigation even further by adding ability to set or customize keyboard shortcuts for any action
For example, imagine having a shortcut to go to the next record set item, open the list of queries, switch collection or sign out of the current user.
[Slide 26: Summary New Capabilities]
To summarize, this presentation covered the importance of accessibility and usability improvements. We covered a small subset of the user preferences options available in Specify 7 as well as gave a glimpse into new exciting features and updates that we will be launching in future Specify versions.
[Slide 27: Conclusion]
If you have any feedback or suggestions for further improvements to accessibility, please reach out to us.
Thank you and I hope you have a wonderful day!