It’s important that as many people as possible are able to engage successfully with digital designs. In this article, we look at some of the ways large technology companies like Adobe are working on improving accessibility, and how you can apply these methods in your own designs.
3 December marks the International Day of Persons with Disabilities, so it’s especially fitting that we take a more in-depth look at the issue of accessibility in design today.
What Is Accessibility?
When the internet was first invented and developed, it was designed with the majority of people in mind. However, many individuals with disabilities* found it difficult to access content electronically.
* A 1997 report by the U.S. Census Bureau categorizes 19.6% of the U.S. population as having some sort of disability.
For designers, the issue of accessibility concerns two things:
- How users with disabilities access electronic information.
- How web designers and developers enable websites to function with assistive devices used by individuals with disabilities.
For users with disabilities, the concern is to find tools which will make content easier to access. For designers, the aim is to create and use these tools effectively, improving the overall user experience for as many people as possible.
In 2006, the United States Access Board started working with tech companies like Adobe to update the 1973 Rehabilitation Act. After around a decade of work, the board released its updated rule last year, in 2017. The most significant part of the revision is the adoption of the Web Content Accessibility Guidelines (WCAG) 2.0. This was particularly important as it brought the US government’s rules in sync with the rest of the world, which has since made it easier for American businesses like Adobe to develop products that can be used around the globe.
What Does This Mean for Designers?
Users with disabilities often use hardware and software to access web content. These tools, known as assistive technologies, range from screen readers to touchscreens and head pointers.
For designers, it’s important to design with everyone in mind. Software suites like the Adobe apps are being constantly improved, with accessibility-boosting functions being added to more and more products. However, it’s up to the designer to make use of these functions and be mindful of the accessibility requirements of users with disabilities.
For example, a user with blindness or visual impairment may use a screen reader to read the content of a web page out loud. A designer must be mindful that a screen reader can read only text, and not images or video animation. So images and videos should be given text descriptions, known as alternative (alt) text, that screen readers can read.
A user with mobility issues may rely on the keyboard instead of the mouse to navigate web pages. In some web browsers, pressing the Tab key allows the user to scroll through all the available links on a page. Pressing the Enter key activates the link. In this case, it’s critical that the web page can function fully without the need for a mouse.
Hover effects and drop-down lists are just a couple of examples of common features of web pages that tend to depend on a mouse for functionality. So the designer must create the page with both keyboard- and mouse-based interactions.
Which Accessibility Tools Are Available in Adobe Products?
Adobe is one of the technology companies at the forefront of improving accessibility for users with disabilities. There are three main ways in which Adobe products have been optimized with these users in mind:
- Adobe InDesign documents can be prepared for improved accessibility.
- Accessible sites can be made using Adobe Flash Professional.
- Accessible PDFs can be authored using Adobe Acrobat.
Let’s take a look at two of these areas—preparing InDesign documents and authoring PDFs—and suggest steps you can take to create more accessible designs.
How to Prepare InDesign Documents for Accessibility
When you create a document in InDesign, with the intention of it being exported as a PDF, the first steps in making that PDF accessible should be taken in InDesign, before export.
You will need to ensure that the text content of your InDesign document will be read in the correct order. For users without visual impairment, the order of text is usually determined by the hierarchy of text on the layout, marked out by size and position on the page. For users with visual impairment, the text will have to be processed by a machine for them, so it’s up to you to determine the correct order of the text.
Observe the checks below to make your InDesign documents as accessible as possible.
- If you’re creating a document with a number of separate text frames, a good first step is to ensure your frames are threaded (go to View > Extras > Show Text Threads to see which frames are connected). This means that a screen reader will read the connected frames as one continuous narrative.
- You can also anchor objects, such as images, to text frames, to ensure they are read in the correct order along with their accompanying text frame. Place your Type Tool (T) cursor into the text frame where you want to insert the anchored item, and go to Object > Anchored Object > Insert.
- Another way to improve the order of text is to create Paragraph Styles (Window > Styles > Paragraph Styles) and assign header, sub-heading and body text styles to the text in your document.
- Tagging the content in your InDesign document is the next step to improve accessibility. Go to View > Structure > Show Structure. Then go back to View > Structure and choose Show Tag Markers and Show Tagged Frames.
Open the Tags panel as well, by going to Window > Utilities > Tags.
Without any content tagged, both the Structure panel and Tags panel will simply show ‘Root’.
To start tagging content in your document, choose Add Untagged Items from the Structure panel’s main menu.
InDesign will automatically load the different frames into the Structure and Tags panels, highlighting each in a different color.
Note that Acrobat will only accept tags in a particular format, so it’s up to you to rewrite the tags correctly so that they are accepted by Acrobat on export. The tags Acrobat will accept are:
- Article <Art>
- Document <Root>
- Figure <Figure>
- Heading <H>
- Heading Level 1 <H1>
- Heading Level 2 <H2>
- Heading Level 3 <H3>
- Heading Level 4 <H4>
- Heading Level 5 <H5>
- Heading Level 6 <H6>
- Paragraph <P>
- Section <Story>
- Table <Table>
Once your previously untagged items are loaded in the Structure panel, you can reorder the tags to give the document the correct reading order. You can choose Show Text Snippets from the panel’s drop-down menu to reveal a teaser of the text in that element, helping you to determine which frame is which.
- With your document ordered and tagged, you’re ready to export it as a PDF. Go to File > Export and choose Adobe PDF (Print) from the Format menu. As many users won’t have access to the latest version of Acrobat, it’s a good idea to set the Compatibility of the file to somewhere in the middle ground, such as Acrobat 6 (PDF 1.5).
Make sure Create Tagged PDF is checked in the Options section.
Under Include at the bottom of the window, check both Bookmarks and Hyperlinks. Then you’re ready to click Export.
How to Author Accessible PDFs Using Acrobat
Creating accessible PDF documents is a two-fold process, starting with preparing the document correctly in InDesign (see above). Once this has been done, you can also continue to improve the accessibility of your document in Acrobat.
In Acrobat, with your document open, start by going to Advanced > Accessibility > Full Check. This generates a report which tells you if your PDF document is fully, or only partly, accessible on a technical level.
You can improve the accessibility of your PDFs by including the following things in your document:
Any scanned images of text, such as signatures, should be converted into searchable text using optical character recognition (OCR) before addressing accessibility in the document. You can convert scanned documents to searchable text in Acrobat DC.
Fonts That Allow Characters (e.g. Braille) to Be Extracted to Text
Acrobat extracts characters to Unicode text when you read a PDF with a screen reader, or when you save as text for a Braille embosser.
Helpful Interactive Features, Such as Hyperlinks and Navigational Aids
Navigational aids, such as links, headings, and a table of contents, assist users in navigating through a PDF without having to read through the whole document. Bookmarks are particularly handy, and they can be created from document headings.
Structure and Tagged Content
You can edit the order of content and tag content in your PDF from the Structure and Tags panels in Acrobat.
Alt Text for Non-Text Elements
Keep in mind that non-text items, like images and forms, can’t be read by screen readers, so it’s important these are assigned alternative (alt) text. In Acrobat, go to Advanced > Accessibility > Touch Up Reading Order.
Look for the elements that are flagged up with a warning reading ‘Figure – No alternate text exists’. On each image, you can then Right-click > Edit Alternate Text. You can add alt text in the window that opens.
Conclusion: What’s New and Anticipated for Adobe and Accessibility?
Adobe is constantly striving to improve the accessibility of its products, with a current focus on making exported documents as accessible as possible for users with disabilities.
For example, there are now new versions of Adobe Acrobat Reader for Android and iOS mobile devices which include improvements for accessibility.
Adobe is also engaged with looking at new ways in which the accessibility of rich media content can be improved using Adobe Animate CC and Flash Player 11. You can read more about these developments here.
As Adobe products continue to be developed and new versions released, it seems likely that accessibility will be at the forefront of functionality, which is great news for users with disabilities and for the future of inclusive design.
Find out more about the International Day of Persons with Disabilities and its manifesto for improving accessibility for all.
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post