DEV Community: Florian van der Wielen

Starting with Orca

Florian van der Wielen — Wed, 30 Jun 2021 10:59:12 +0000

Lately I have been doing a lot of website development work in ubuntu, so I tried out orca, the screen reader for Linux. This article is based on my notes that I wrote learning to use orca, hope it may help you as well!

Orca works well, but a little different than NVDA, with which I have a little more experience in. To be honest, the voice sounds a little less natural, but after a bit of getting used to, it is fine. All in all, it feels like a very feature complete screenreader to me, very workable (which is not always the case for Linux equivalents, so props to prioritize where it matters!).

Installation and set up

Orca comes pre installed by default in recent ubuntu releases, as it should! I tried it for the most recent LTS release at time of writing, 20.04 Focal Fossa. The OS settings screen (called settings) only has a start/stop switch for the screenreader, which is also in the OS accessibility settings in the top right for easy access.

The settings for orca itself are in their own UI application, accessible from the command line via orca -s. In here you find lots to configure, but the defaults are good to get you started. Typically voices are again per language, turn on the Dutch voice here for example.

Starting orca

Orca itself is easy to turn on, but as most Linux software are developed as individual projects and struggle a bit on integration with each other and the OS, I experienced a hiccup here. The problem was that orca was not dictating the page of my already running and active Firefox browser. I found a quick and easy fix luckily: after starting Orca, you need to (re)start your browser, such that Orca can 'find' it and read out loud what is on the page. So just restarting Firefox solved the problem for me, not too much hassle as it remembers active sessions and open tabs across the restart.

Shortcut keys

Like all screenreaders, Orca is mainly controlled via the keyboard as that works best for its intended audience. Also like most other screenreaders, Orca has an 'Orca modifier key', a key that is used in a lot of shortcuts to keep the screenreader shortcuts away from other hotkey combinations. This key is for 'desktop keyboards' the insert key of the numerical section of the keyboard, but you can change this, as for example laptops quite frequently do not have that section of the keyboard.

Please see the below table for some useful shortcut key combinations:

What	Key combination
Orca Modifier	typically insert (in so-called desktop mode)
Toggle Orca on and off in GNOME	Super+Alt+S.
Enter Learn Mode	Orca Modifier+H
Exit Learn Mode	Esc
Display a list of headings	Alt+Shift+H
Display a list of links	Alt+Shift+K
Display a list of landmarks	Alt+Shift+M
KP	keypad (keyboardnumerical section, with num lock off!)
current location	KeyPad enter
page summary	KP enter (twice)

Links/references:

The help pages of orca are very extensive, you can find some useful shortcut keys here: https://help.gnome.org/users/orca/stable/commands_structural_navigation.html.en and here: https://help.gnome.org/users/orca/stable/commands_reading.html.en
For more info in how to use a screen reader in general, you can read my previous blogpost on NVDA on that.

Also on twitter you can follow Florian Beijers, going by the handle @zersiax, by my understanding he is an expert orca user and allround very knowledgeable about web accessibility (which makes me weirdly proud as someone with the same uncommon name, haha)

I hope you found this article useful, and if you have some tips yourself , questions, or remarks, please leave them in the comments below!

starting with NVDA

Florian van der Wielen — Fri, 09 Apr 2021 06:06:14 +0000

If you want to build accessible websites, you should check whether they work well together with screenreaders. A screenreader is a software application that reads the screen aloud for the user, typically used by people who are blind. NVDA is one of the most important screenreaders that work on Windows, so you should check whether your site works with NVDA. As NVDA is free, the treshold is low, but screenreaders are complex and challenging applications to start using, so I decided to make this writeup to get you going.

Installation

NVDA - NonVisual Desktop Access - is made by NV access, and you can download the installer from their website: https://www.nvaccess.org/download/

Set up

By default the voice NVDA uses to read aloud is based on English pronounciation. As I build Dutch websites, I want to use a Dutch language voice. NVDA can access the voices installed on Windows 10, so it can use the same voices as Narrator. Otherwise NVDA can use the bundler e-Speak-NG. For more information on installing additional languages see here: https://github.com/nvaccess/nvda/wiki/ExtraVoices

NVDA also has a so-called speech viewer, which is a modal that shows which text NVDA is reading aloud right now. Useless for the blind, but useful for testing purposes and getting used to screenreader usage for visual people such as us. To turn this on, you can find the option in the NVDA system tray menu, in the tools submenu.

Usage

The main input device for screenreaders is the keyboard, so most input to screenreaders goes via hotkeys, or key combinations. Like most screenreaders, NVDA has a "NVDA key" with is used by many hotkey combinations. This is what is meant with NVDA in the upcoming table. See the table for a few of the most commonly used or important hotkeys.

Hotkey	Function	Use
NVDA + t	Speak title bar	know on which page you are
NVDA + tab	Report current focused object	know where you are on the page, which kind of element
NVDA + F7	Show lists of landmarks, headings, links, ...	These lists allow a user to quickly go to their point of interest
Insert + down arrow or Numpad +	continue talking	similar to continue reading for a visually able user
Control	stop reading	Sometimes you want it to stop ;)
NVDA + ctrl + F	search	to search for text
NVDA + 1	help	to help with NVDA usage

For more hotkeys, see:

NVDA also has a built in screen curtain, which blacks out most of the screen. It is a so-called "empathy tool", so you as a visually able person can really experience the website a bit more like a blind person would. This is important to try some time, to really get a feel of how muuch - or actually how few - information and overview you get when you cannot see your website but only rely on the screenreader.

Real^TM screenreader usage

now that we know a little bit on how to actually do something - anything - with a screenreader, it is useful to know what screenreaders actually do with this in the Real World^TM. To that end I can recommend the following videos:

Léonie Watson: how a screen reader uses the web https://www.youtube.com/watch?v=OUDV1gqs9GA
Screen Reader Basics: NVDA (hear the old voice...) https://www.youtube.com/watch?v=Jao3s_CwdRU part of a11ycasts playlist https://www.youtube.com/watch?v=HtTyRajRuyY&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g
(added 20/5) Deque has made a video on the same subject as this post! quite recommend it: https://www.youtube.com/watch?v=Vx1vSd5uYS8

Building a pattern library

Florian van der Wielen — Tue, 27 Oct 2020 11:56:05 +0000

In this short write-up, I want to take you along into the world of pattern libraries. First, let's investigate what is a pattern library. Then we dive right in with relevant features and considerations when choosing a pattern library, and some brief examples.

What is a pattern library

First, let's talk about a design system, which is a way of working of systematically designing and building your frontend, such that it adds value: consistent branding, ease of reuse across the applications, and ease of maintenance/continuous improvement, and with it, supporting iterative design.

This means thinking, designing and building in reusable design building blocks, and some place to show these blocks to make them first class citizens in your design process. Such a place is called a pattern library, and this kind of tool is therefore the cornerstone of a design system way of working. There are many such tools, so there is a choice to be made here, with many relevant considerations.

Useful features of pattern libraries

A pattern library is a tool during development, as well as a showcase of all your built patterns. As such, development "quality of life" features are much appreciated, such as file watchers, live reloading, browsersync, that shorten the cycle from code to visible component. The quick iteration that this allows, will let you as developers and designers radically shift your work process from handing over designed images and checking when development is done, to working together behind the same computer, constructively going back and forth about what works best for the user with the available technology. To get an idea of how this flow might look like, I can recommend the following conference talk from Rachel Andrew:

Other quality of life points help as well, such as easily checking your component in different browsers and/or window sizes. This allows you to bring mobile first much easier into your design/development process, which is a must nowadays.

As your pattern library is also a showcase of your components, you want it to have proper documentation. There are many aspects and nuances in good design, that you want to come across to the people that will use your pattern library. Things such as design tokens, color systems, or fonts, that may have specific use cases. This is useful for other readers, as well as during the evolution of your patterns, because another key feature of a pattern library is that it is a living document, a good design system is maintained when it needs to. This means that besides showing components, you want your pattern library to support generic documentation pages.

You want your pattern library to be easily readable and accessible, because that is how it is used. As such, because it is a web application or website, people should have access to that website. This means (amongst others) that it needs to be easily deployable to a web server.

Your components are not only exisiting in your pattern library, the idea is that they are used with fewest effort in your production applications. Therefore it is very useful to keep your components portable, by using the same template language across pattern library and other applications. This can be tricky though, as a production application built in backend technology such as (Java, C#, or a some packaged solution) might not support any typical frontend template language, whilst the pattern library is used and mainained by the frontend developers in frontend technology.

Examples

Fractal is a useful choice as a pattern library. It runs as an express server with watchers during development, and can be exported as static flat HTML, CSS, and Javascript files that can be hosted on an HTTP server without any logic. As it is built on express, Node and NPM, it can be easily fit into an existing frontend project, which already uses this technology, and it also allows for some extensibility. For more information, see https://fractal.build/

Another great pattern library tool is Storybook. Storybook has great frontend framework support. It also comes with a lot of bells and whistles, such as plugins, which allows you build a great workflow in development, as well as improving the showcase aspect of it by leveraging the frontend framework in which the components are built. These extras might be difficult to fit into an ongoing project though, as they might compete with something existing that works differently. See also https://storybook.js.org/

Conclusion

As you might have noticed, there are many aspects to choosing a pattern library, but do not feel overwhelmed. In the end it is not about making the right choice, but about making a choice that works for you, as you and your team needs to be able to work with it. There is no right or wrong, especially with so many considerations and so many tools in active development.