A screen reader is a sort of assistive technology that communicates (for those with visual impairments) what is happening on the screen. Screen reader software can be utilized in combination with the keyboard (for example, as opposed to using the mouse, users will tab and enter).
Still, it can also be used in combination with screen reader hardware, making it possible to navigate more efficiently and caters to users using Braille. You must have been stuck at times while using Screen Readers with Adobe XD CC, so here is a graphic designing guide for screen readers!
Use Headings
Screen readers often use headings to decipher the structure of a website, and we run the risk of leaving out these headings if we think too visually. The omission of the ‘Chapters’ heading in the example below causes screen readers to assume that the chapter list is a continuation of the content on the left-hand side, which is not. Consequently, users of screen readers will not be able to skip to “Chapters” and may not discover the information within.
While code workarounds are available (such as the aria-label attribute), having a visible heading inclusively provides everyone with a more transparent experience, whether or not disabled. Of course, as we can infer from the context ( i.e., the content), the section is very obviously a list of chapters.
Those using screen readers, however, very seldom have the luxury of context. It’s like trying to find an object where none of the boxes are labeled in storage. These labels and headings are what our designs need.
On the technical front, the rule is that not only should each section (as defined by a <section> or <article> tag) have a heading, but also a clear heading, which does not conflict with any other heading. For example, if the heading of the highest level within a section is <h2>, then within that section, there should be no other <h2> heading. Screen readers are otherwise clueless as to which heading the section label is.
Use Labels
For everyone, icons are better when they have a text label. Then consider using only a text label if this approach looks cluttered. Would you prefer an icon? “Well, in that case, at least declare to developers an” invisible label “that appears only to screen readers.
For input fields, where a visible text label is always better, the same applies. Aria-Label ought to be the last resort. Images, except that their descriptive text is implemented via the alt tag have a similar requirement. That being said, ensure to communicate when an image is decorative, as developers will then have to hide it using aria-hidden= “true” from screen readers.
Use the Design Handoff to Communicate Screen Reader Text
Adobe XD CC 2020‘s design handoff tool is the right tool to use for this, whether you are using alt text, ARIA labels for elements that do not have any visible text, ARIA labels intended to ‘overwrite’ the visible text (for added context), or even merely stating when screen readers should entirely ignore an image.
The workflow would look something like this:
- Click on the workspace to Share.
- Configure (on the right-hand side) the settings.
- Click the ‘Create Link’ button and then click the link itself.
- Click the ‘Place a Pin’ icon button in the design handoff window to comment on specific design elements.
- Leave Comments
Elaborate when essential
Let’s assume that there is a tabbed portion consisting of two buttons. One is known as “Recency” and the other is called “Sequentially.” Without any visual context, one has to wonder … what is a recurrence? What is happening sequentially? These are buttons? Do I have something to do?
Users without visual impairments can easily infer what is going on, paired with surrounding content: we are allowed to sort the chapters’ order. Those with visual impairments, however, could do with some elaboration. Specifically, it must be more actionable to copy.
Using Voice Prototyping to Communicate Dynamic Changes
While design handoff is a great way to communicate what should happen when a screen-reading user focuses on an element, voice prototyping can be used to communicate what should occur as a result of an interaction.
The workflow for adobe xd cc current version would look something like this:
- Click on the “Prototype” workspace.
- Create an interaction as you usually would.
- Select “Action” → “Voice Playback” (on the right side).
- Write down the text to be spoken by screen readers below “Speech.”
EndNote
A website, at least not when tasks and interactions are involved, is not merely a document to be read from top to bottom. Reading flows and user flows are seldom linear, so it’s a bit more complex to design for screen readers than simply translating visuals to text. We need to consider what the user’s background already has & cater to different degrees of disability.
More importantly, designers and developers require to work together so that accessibility is not an afterthought. Use the design handoff and voice prototyping features of Adobe XD CC to your advantage, and regularly think about your app and web designs from the perspective of low-sight users, always, always. There are plenty of Adobe XD CC libraries, do check them out! Click here for an Adobe XD download.
