Designing for Digital Accessibility: InDesign to PDF

Creating accessible digital documents can feel daunting, especially if you don’t have a background in writing code. To help get you started, here is a suggested workflow for designing documents that are intended to be exported to PDF (or another electronic format like ePub) from Adobe InDesign. This does not cover everything of course, but will get you going on the right foot.

Screen captures had yet to be added – but there are some coming!

Step 1. Collaborate with Your Client

  1. Add the alternative (ALT) text to the metadata of each image file the client supplies
  • PC Users: Add ALT text to the Details of an image by right clicking the image on their computer, selecting Properties, and adding the ALT text to the Details.
  • Adobe Bridge: Add the ALT text to XMP: Headline
  • If they do not have time to do the above, ask them to supply the ALT text in a separate Word document or email for you to add yourself in Adobe Bridge or within InDesign through Object Export Options.
  1. Encourage the client to supply Word documents that use Styles and remind them not to use keyboard formatting (eg: tab key or enter to format text) or format using tables for layout or text boxes.
    • Bonus: This also eases importing text content and using plug-ins like WordsFlow.

Step 2. Before You Begin Your Layout

  1. Review the content and consider what Paragraph Styles you need to set up and what hierarchy is used in the headings of the document
    • It could be as simple as all headings being Heading 1, or Heading 1, Heading 2 etc. Note that headings cannot jump from Heading 1 to Heading 3 with no Heading 2 in between. Headings must be in a logical sequence. You can have many different Styles for a single heading.
    • Including a marker such as H1 or H2 in the Style name will help you remember what level of hierarchy they are.
  2. Consider using high contrast colour combinations for text and background to increase legibility. This also aids with photocopying/faxing etc. If your document is going online, it maybe required by law (ie: large organizations in Ontario), but its an all-round good thing to do.

Step 3. Beginning Your Layout in InDesign

  1. Add title and keywords to the document’s File Info (File > File Info)
  2. Use minimal text frames. A single text frame is ideal for controlling reading order.

Note: You can format the text using built-in formatting tools such as columns (split/span), paragraph indenting, space before/after, baseline shift etc.

  1. Open Structure (View > Structure)
  2. Add Untagged Items (menu at the top right of the Structure pane > Add Untagged Items)
  3. Create Paragraph Styles (or create as you go along)
  4. If creating Tables, designate a Header Row (place the type tool inside the first row (your Header) > Table > Convert Rows > To Header)
  • You should not have more than one header. If you have multiple headers, you may need to do a fair bit of tweaking in Acrobat.
  • Avoid using merged cells can disrupt reading order. Use alternative methods of layout if you can in this case. If you must use merged cells, advanced manual touch-up will be needed in Acrobat Pro.
  1. Set up automated Table of Contents (TOC) (Layout > Table of Contents)
  • In the TOC menu, make sure “Create PDF bookmarks” is checked under Options. Otherwise, your interactive bookmarks wont carry over to the PDF.
  • Edit the hierarchy of the bookmarks (level 1, 2, 3 etc or all level 1) via More Options (note, you can control the look of your TOC by setting up specific Styles for the TOC text and spacing)
  • Update the TOC when changes to the document are made (Layout > Update TOC)

Step 4. Finishing Up Your Design

  1. Map Styles to Tags (menu at the top right of the Structure pane > Map Styles to Tags)
    1. Select appropriate Tag for each Paragraph Style from the dropdown menu
      • Avoid using the H tag.
      • Anything not tagged will automatically be tagged as P (paragraph)
    2. Tag footers/headers, page numbers, decorative images as Artifact (select the element > control Click > Tag Frame > Artifact)
    3. Add ALT text to image metadata in Bridge (if not done already) or using Object Export Options in InDesign (Object > Object Export Options > Custom)
    4. Delete any content from your pasteboard (this carries over to Acrobat and will be read by screen reading software). If you need to leave content there (eg: TOC), tag it as Artifact.

Step 6. Exporting Your Design to PDF

  1. Select PDF (Interactive) from the dropdown menu
  2. Confirm that “Create Tagged PDF” is selected

Step 7. Polish-Up Your PDF in Acrobat

  1. Run Action Script (File > Action Wizard) if you have one set up for Accessibility (You can create your own, or use the default Accessibility script in Acrobat. I highly recommend making your own)
  2. Attend to any errors that maybe reported by the Full Accessibility Check of the Action Script (Pro tip: Google unknown errors for help)
  3. Tweak Reading Order (Tools > Accessibility > Touch-up Reading Order) if necessary.
    • Remember to drag down not up – and to save frequently.
  4. Instead of thinking of the document laterally or what your eye goes to first, consider what is the most important content (eg: the title should be 1st in the Reading Order, not a logo for example)

Note: If images are missing ALT tags, you may want to go back into InDesign and add the ALT text there – this will help out future designers updating your file, or you if you end up exporting the document again if there are last minute changes.

General Tips

  • If colour is used to convey information, consider additional ways to convey that same information. For example, instead of wrong answers on a demo test being just in red, add the word “Incorrect:” at the beginning of the sentence. This will add a text cue to the colour cue that this answer is wrong.
  • Avoid using excessive ALL CAPS, bold, underline, and italic text as this can be distracting and inhibit the readability and legibility of a document.

Recommended Resources

Further information, instructional guides, and troubleshooting tips can be found online. Free resources from InDesign Secrets, Lynda Online Tutorials, Accessible Office Document Project (ADOD), WebAIM, Adobe Accessibility and Adobe forums are good places to start.

Advertisements

Everyone is a Designer

Speaking notes from talk in May 2017 on document accessibility #a11yto

As promised, here are my speaking notes from my 20 minute talk on document accessibility at the #a11yTO Meet-up on Wednesday, May 24th 2017 in Toronto:

Designing Accessible Documents

Introduction

Graphic design is everywhere – from the label on the beer bottle you’re holding, to the book you were reading on the way over here, to all the ads you saw along the way. Graphic design plays a big role in our lives – it’s about conveying a message to the widest possible audience. At its core, graphic design is about accessibility.

Agenda

We are here today to learn how easy it is to create attractive, accessible, digital documents. Now, I’ve only got about 20 minutes to talk to you today, so it’s going to be impossible to touch on everything you need to know. For those of you who are new to this sort of thing, I hope you will leave with practical skills and tools you can use right away in your personal and work life. And for those of you here today to which this is old hat, I hope I can entertain you.

Font

Font – typography – was my first love when it came to graphic design.  They express content through the visual representation of letters that form words through pattern recognition in our brains. Reading is a form of pattern recognition. The faster we can recognize the letters on a page, the more legible a font is. So although fonts can be a place of artistic expression, their main purpose is to be recognized as letters and read as words.

As an extra-young designer, I thought I could change the world with fonts – making a font that was both legible, and comfortably readable over an extended period of time. It was here that I discovered there was no definite answer to fonts – studies contradict one another, individuals have unique preferences, and there was no one size fits all for accessibility. But there are best practices:

Image showing different font weights

Characteristics of a Legible Font

  • Choose fonts that are medium in weight – avoid heavy, condensed or light fonts
  • Avoid script or decorative fonts – these are best kept to titles only
  • Choose common fonts – these are read more easily as the viewer is already familiar with the patterns they form on a page.

Image showing underline, italic, bold, and tight spacing of letters

Font treatment

  • Avoid excessive use of bold, italics, underline, or ALL-CAPS – this disrupts pattern recognition and makes it harder to read
  • Avoid tight spacing between letters and lines of text (kerning, leading)
  • Generally aim for body text that is 10pt to 14pt in size on a standard letter sized piece of paper

Image showing multiple fonts at thesame point size that look different in size

Font Size

Now I want to take a moment to talk about font size. When most people think of an accessible document, they think large type. However, font sizes are relative! 12pt in one may look like 22pt in another. And the beauty of digital documents, like PDFs or ePubs or HTML, is that it is scalable – the person can make it as big as they want. Giving a blanket statement like “All documents must be a minimum of 12pt.” is playing it safe. The intention is good but it doesn’t deal with design integrity or variables.

It is our responsibility as designers to speak to the widest possible audience. If making text 12pt for a project with small dimensions, such as an ad in a newspaper, is going to make everything squished and unreadable, we need to inform the client and take a different approach. There is no one-size fits all to accessibility – and that is why the Information and Communication Standard of the AODA is so open to interpretation, especially when it comes to print media.

Colour

When it comes to accessibility, font is often forefront in our minds – but what about colour and contrast? It’s often overlooked, but it’s one of the few things in the Web Content Accessibility Guidelines, WCAG, referenced in the AODA that can be applied to both web and print.

Image listing level AA and triple A WCAG requirements

Contrast Contrast Ratios

WCAG is very specific when it comes to contrast ratios for colours used for text within a document. 4.5 to 1 is the minimum contrast ratio when it comes to finer text, like body copy, meaning it needs to be 4.5 times the intensity of the background colour. When it comes to larger text, like headlines and titles, we can dip down to 3 to 1 because these are relatively larger and more visible from a distance. These are minimums however, and aiming for 7 to 1 or above is ideal.

Contrast is important. The higher the contrast, the more likely the document can be read in different lighting environments and different screens. Remember that not everyone has a 4K retina screen or a quality mobile device. Designing to meet 7:1+ helps to ensure people with different abilities, technology access, and reading environments can read your document!

The AODA has specific dates for when different sized and types of organizations need to adhere to these contrast ratios in their websites and web content. You can check those out in the Information and Communication Standard.

Colour is more than just contrast – many people are colourblind too! So using just colour to denote meaning, like red to flag an error, is not inclusive – but using red, an asterisk, and the text (required) would help people know that an error has occurred – something you often see in online forms. The more ways you can express a message, the better.

As a designer working mostly on products for print that are posted online as a PDF with strict budgets, most of my text is on white paper. Ink is expensive after all. This can make it challenging to create bright and cheerful colour palettes, especially using colours like green, yellow, or orange as these colours tend to be quite close in luminosity to white. Blues, purple, and earthy tones are easier to work with on white backgrounds.

Colour Demo

One of my favourite tools to asses colour is Paciello’s Colour Contrast Analyzer. It’s a free desktop app for PC and Mac. Simply click on the colour picker, then select your foreground colour, click on the eyedropper again and select the background colour surrounding your text. I love how easy this is to use and how you can assess literally anything on your screen. It can be a lot of fun!

If a colour contrast fails and you’re unsure what to try, just copy the hex code from the Analyzer and paste it in Tanaguru Contrast-Finder – this web app will suggest similar colours that pass. I love this app!

Image text showing heading levels in a document: heading 1, heading 2

Hierarchy

Being able to look at a page and figure out quickly what is the message and the order in which its suppose to be read is incredible valuable! Fortunately, this is worked into the core principals of design through the use of negative space, proximity, and scale.

Negative space is the white space on a page. You want there to be ample negative space between elements to give the eye a place to rest. Proximity helps to show what content is related and the order of which to read. Scale helps to show importance, like the size of headings on a page.

Machine Reading

You can use negative space and type treatment to control the eye in visual representation of info, but how can you do that for machine-reading? For your eReader or screen-reader for example? You do that with tagged headings!

Now you don’t need to be a coder to do this sort of thing. All you need to know is how many headings you have and their relation to one another. So, heading 1 would be the first heading on the page. If Heading 1 has a subheading, then that would be Heading 2.

You can find these headings in Word under Styles, which you can customize to look just like you want! If you’re using graphic design software like InDesign, you would map the tags to the Paragraph Styles you created for your document. The default for both is paragraph – the P tag. If you were to export a PDF without using Styles, everything will default to paragraph text. You don’t want that – unless your document has no headings of course.

There are also great curb cuts to using Styles too, like automatically generated table of contents or linking references within a document. Tagged headings are an all-round great thing to use! It also enables you to change the look of all your headings at once. If your client comes to you and decides they want all the headings in Verdana instead of Gotham (font), you just have to edit the style once instead of going through the document page by page.

Other Tips

Outside of tagging, there are other things you can do to control the way content is read by a computer.

  • Word: Avoid using text boxes – they can be read in unintentional places, even if anchored
  • InDesign: Avoid using multiple text frames – they will increase the chances of reading order going rogue when you export to PDF.
  • Both: Don’t use keystrokes to format your content (tab and enter) – it doesn’t reflow or read aloud properly, and the keystrokes maybe read aloud too
  • Both: Don’t use tables to format your content – if it doesn’t have a header row, then it is not a table.

Instead, use the built in formatting tools to layout your content:

  • Word: columns, breaks, space before and after, lists
  • InDesign: split/span, space before/after/offset, lists

And a handy tip – if you want to see how your document is structured, turn on hidden characters. This will show you what keystrokes and breaks are used. And if you’re using PowerPoint or Word, turn on the Navigation Pane to make sure your content is there.

I’m not going to go into testing/remedification in the time we have remaining, but NVDA is a great free screen-reader you can test your documents with – and just tabbing through your document with a keyboard only is a good way to test out your document in addition to using automated accessibility tools like those found in Word, Adobe Acrobat, and PAC.

Resources

So that’s it! If you want more in-depth information on document accessibility, I recommend Karen McCall/Karlen Communication’s conference handouts and Access Ability by the Registered Graphic Designers, RGD. If you’re fresh to this, Accessibility of Office Documents and Office Applications, ADOD, and WebAIM are great places to start (and refer back to). There’s lots of other great resources out there too – these are just some of my favourites.

Feel welcome to check out the Resources page on my blog for more guides, reports, and tools.

How to Markup a PDF

Why should I mark-up a PDF?

Using comments and annotations to digitally mark-up a PDF help to reduce miscommunication, typos, errors between you and your graphic designer. It increases clarity, and helps to speed up the revision process. It’s a win-win for both you and your designer!

When you mark-up a PDF, the designer gets an automatically generated checklist of your requested changes to help them keep track of what they need to do and what tasks they’ve completed as they go along. When paired with clear communication, a designer can easily understand what needs to be done, changes to be made or content deleted, and areas to approach differently – all in one place!

It is fast, efficient, and clear.

How do I add annotations and comments to a PDF?

Setting-up Your Workspace

Most computers have an PDF reader on them. Acrobat Reader is the most widely used one out there. You may already have it on your system without even knowing it! If you don’t see Adobe Reader in your Applications folder, you can download it for free online:

Download Adobe Reader DC 

Screenshot of the View dropdown menu in Acrobat XI

Older versions of Adobe Acrobat Reader:

  1. Open the PDF in Adobe Reader
  2. In the upper toolbar, click View.
  3. From the drop down menu, select Comment > Annotations
  4. A selection of Annotation tools will appear to the right of your screen.

Adobe Acrobat Reader DC:

  1. Open the PDF in Adobe DC
  2. In the upper toolbar on the far left, click “Tools”
  3. Scroll down to “Review & Approve”
  4. Click “Comments”
  5. A selection of annotation tools will appear in the upper section of your screen.

Screenshot of the tools in Adobe Acrobat Reader DC

Getting Started with PDF Mark-up

There are many ways to approach the feedback process with PDF mark-up. To help get you started, here are some tips on when and how to use the annotation and comment tools in Reader:

General Feedback

Yellow speech bubble Comment bubbles are for providing feedback and instruction to the designer.

If multiple people are commenting on a document, please delete any unnecessary comments (such as internal conversations or unanswered questions) and leave only what is relevant to the designer. This will prevent any confusion and help the revision process go more efficiently.

Drawing and markup tools in Acrobat XI

Use shapes to draw attention to certain areas of a document. This is a rarely used tool in my experience – but its good to know its there for the odd occasion you need it.

Text Changes

Text icon with a red strikethrough The red strike through is used for deleting text.

Text icon with blue strikethrough and blue arrow next to it The blue strike through is for replacing text.

Text icon with blue arrow next to it The insert text tool for adding new text.

Highlighter icon in Acrobat XI The highlighter tool draws attention to a certain area of text.

If providing new text, avoid the temptation to write “Please replace with…” or to make conversation with the designer within your annotations. Instead, just add the new text. That way the designer can just Select All and paste in the document. This saves you both time!

Changes to Visual Elements

Paperclip icon You can add files, such as images, with the paper-clip icon.

When sending an image to be used in the design, graphic designers usually prefer images be sent separately so that  we can import them directly into our working project folder.

Additional Notes:

Repeated Consistent Changes:

If you are giving direction that applies to the whole document, you only need to say it once, not each time you come across it in the document. Examples of this would be “Align all text to the left in this document” or “Remove all full-page images/blank pages in this document” (note the word all here). This will save you from typing it out numerous times and cluttering up the PDF with redundant text.

Need More Information on Marking-up PDFs?

If you need more guidance, there are lots of video tutorials, written instruction, and posts on PDF mark-up online. Just google your query, or check out these links: Reader XI (older version that these instructions were initially written for) and Reader DC (newest release of Reader).

Screenshot of a marked-up PDF
Sample of a marked up PDF as viewed in Acrobat Pro DC.

PDF Mark-up Pet Peeves

Padding Statements

If you want your graphic designer to do something, just tell them to do it! Do not pad it with wishy washy language like “Maybe you could try…” or  “What do you think if…” or “… but you’re the designer.” unless you actually do want to know what your designer’s professional thoughts on the subject before they complete the task.

PDF annotation is not the place for discussion. It is for direction. If you actually do want to discuss a design idea with your designer, do it over email or phone or someplace else.

Respect your designer’s time and save yourself the extra typing. Just type what is needed in clear, concise language. Nothing more in the PDF.

Identifying the Rejects

Do not mark the rejects during concept development. Only mark the pages you like/have changes to/want elements from. Making a concept “Don’t like this.” or “Not this one” for example, makes yourself extra work, clutters up the document annotation checklist, and takes the focus away from what needs to be done in the document.

However, if there is something about a reject you want the designer to know like “We don’t like this concept because its too dark. Please try this layout with brighter colours” that is different. You are identifying why you don’t like the concept and directing the designer to approach it in another specific way.

Writing a Novel in Comment Bubbles

I have had over a page of text in a single comment bubble… which I was able to summarize down to fit on a single post-it note on my desk. Again, save yourself time and the designer’s time by being clear and concise in your instruction. Save your novel writing for after-hours.

 

Degrees/Certifications in Digital Accessible and Inclusive Design

Where do you go for a post-secondary education in digital accessible and inclusive design? All of the locations above are currently in my home base of Toronto, but I’d like to add programs from all around the world! Know of one I missed? Let me know! Here is the list I’ve complied to date:

University

Master of Design, Inclusive Design (OCAD University)

College

[none known – but let me know if you know of one and I can add it to the list!]

Discontinued Certification & Degrees:

Certificate in Accessibility Practices: AODA and Beyond (Ryerson University, Chang School of Continuing Education) Previously known as Certificate in Advancing the AODA.

Inclusive Design in Digital Media Certification (Humber College, Continuing Education): $96.00 per course (4 courses for Certification of completion – 24 hours in the classroom total)

Free!

Professional Web Accessibility Auditing Made Easy (MOOC offered by Ryerson University)

How to add ALT text to image metadata

These instructions are written for InDesign users and people working with graphic designers, but could be applied to other applications and fields as well.

Although images cannot carry actual alternative (ALT) text around with them, you can add the ALT text to the metadata of an image to use as you please. This aids in efficiency and reduces chance of error when applying ALT text to images.

This post covers two methods for collaborating with your client/communications on applying image metadata:

  • Adding ALT text to image metadata on their PC (no special software required – free!)
  • Adding ALT text to image metadata using Adobe Bridge (subscription required)

Alternatively, the designer can do the above if the client is unable to.

Followed by three different methods for graphic designers listed below:

  • Applying the image metadata as ALT text manually in InDesign via Object Export Options
  • Applying the image metadata as ALT text in InDesign using a Script (my personal favourite)
  • Applying the image metadata as ALT text in InDesign using Object Styles

Screenshot of image properties, details tab open

Client:

Adding ALT text to the metadata (PC/Windows):

  1. Select your images and write out your alternative (ALT) text.
  1. Open the folder where your images are kept (ex: Pictures folder in Windows)
  2. Right click the image
  3. Select “Properties” from the drop-down menu.
  4. Click the “Details” tab.
  5. Paste your ALT text into the “Title” input field of the photo
  6. Click OK (this will save the metadata)
  7. Send the photos with the metadata to your Designer/Design Request. Inform your designer that you have put the ALT text in the Title/Description field of the photo’s metadata.

Note: Instructions above written for Windows 7 users.

Faster Alternative: Adobe Bridge

If your client has an Adobe Creative Suite license, they can do these steps faster in Adobe Bridge, where they would put the ALT text in the Description OR Headline field of the image metadata.

Screenshot of the script panel in InDesign and ALT text script dialogue box

Designer:

Below are instructions on 3 different methods to apply image metadata to your images as ALT Text within InDesign: using a script, doing in manually, or using Object Styles. Choose the one that works best for you:

Applying ALT text with a script

  1. Confirm you are using the photos with the metadata (can double check by opening in Adobe Bridge – text will likely be in the Description field)
  2. Run the ApplyALTfromXMP script
  3. Confirm the ALT Text Source is “XMP: Description” (or wherever else the ALT text is saved)
  4. Click OK
  5. If successful, you will get a dialogue box with total number of images processed displayed. Click OK.
  • If you do not get the quantity you were expecting, confirm the location of the ALT text in the metadata.
  • If you do not get a dialogue box, something is wrong with the script and you’ll need to troubleshoot.

ALT Text Script:

If you do not have the ALT text script installed, you will need to install it yourself. Instructions and free download are at Batch Apply XMP ALT Tags to EPUB and HTML Images

Screenshot of the object export options window in InDesign

Applying ALT text manually

  1. Confirm you are using the photos with the metadata (can double check by opening in Bridge – text will likely be in the Description field)
  2. In Design, select the photo
  3. Go to Object in your top navigation bar
  4. Select Object Export Options from the dropdown menu
  5. Confirm you are in the ALT text input area
  6. Click “Text Source”
  7. Select “Description” from the dropdown menu
  8. Click “Done”

Note:

Skip Step 3 and 4 by using the Option Export Options key command Opt+X (if not default on your system, you can set up a custom key command to speed things up)

Screenshot of the Object Style Options window in InDesign

Using Object Styles for ALT Text

If you are using Object Styles in your document (great for long docs!), you can also automate the ALT text there.

  1. Create an Object Style.
  2. In the Object Style’s export options, you will see ALT Text, Tagged PDF, and ePub. Select desired option.
  3. From the dropdown menu, select  “From XMP: Headline” (or wherever you’ve stored your ALT text)
  4. Click OK to apply the changes.

Now, if you check the Object Export Options of your image that style is applied to, the ALT text should be there!

Guelph Conference: Day Two

My conference notes from Day Two of the Accessibility Conference at UofG. My notes from Day One are also available: Accessibility Conference: Day One #accessconf16

When Good Intentions Go Wrong with Brian Kon, Sterling Frazer Associated

  • People with disabilities (PwD) is the largest minority group in the world – the only minority group you can join at any time!
  • Signs behind glass windows are a problem when it comes to glare
  • Be consistent
  • Trail signage at start of trail: length of trail, terrain of trail
  • Choosing green for a nature sign is not smart – disappear in foliage

Build Environment:

Beyond checklists with Janna Cameron, D2L

  • Usability testing: calmer to have someone going through your system with AT instead of an angry customer who’s been passed from support person to support person at your company
  • Mentors help keep motivation going after the initial excitement about accessibility; to push and encourage as you make progress
  • Mentors need a broad understanding; keeps knowledge current; understands AT and browsers

Bundy’s Hierarchy of Digital Needs

  • importance of describing PowerPoint content for people who cannot see them (story of colleague sending texts to describe slides during another’s presentation)
  • Bundy’s Hierarchy (base to tip): Not accessible, not usable > accessible not usable > accessible and somewhat usable > Accessible, usable digital bliss
  • No skip links: have to read the main navigation all the time
  • Flash can be made accessible, but not great
  • CFL.ca has a blissful website: logical headings, empty ALT for dec. mages, easy contact form
  • CBC.ca has a blissful website – one of the best I’ve seen in my life: clear links; headings, labelled forms
    • Improvement: table headers on row and columns; don’t repeat the same links

Bundy’s Accessibility Enhancements

  • headings: organize page content and page sections
  • Screen reader’s can miss images as buttons
  • Signify whether pages open in a new window with an image with ALT or use ARIA
  • ARIA is a temporary solution that fills in gaps; very useful – but don’t put ARIA on everything
  • Forms: Not all AT recognizes placeholder text

David Onley: Capstone

  • challenges create broader choices and enhancements
  • accessibility allows people to achieve their full potential
  • inclusion is part values, attitude, skill and funding
  • values and attitudes are the more challenging to change
  • attitudinal barriers are the biggest barrier to overcome
  • 3.8 million PwD in Canada are unemployed
  • Employers fear hiring PwD
  • Instead of able-ism, I think disable-phobia is a better term
  • Unjustified terror paralyzes efforts to convert unemployment into jobs
  • compare plight of PwD employment to women rights, racism
  • We are us, we are not them; there is no them or they
  • PwD cross all minority groups (aboriginal, LGBTQ2S etc)

Implementing WCAG & Beyond: Lessons Learned from User Feedback with Jason Soo Hoo

  • partnership with Kitchener-Waterloo AccessAbility
  • We don’t guide them through, but observe how they approach the task
  • Lessons learned: skip to content;
  • Skip to content: names anchor and CSS
  • Semantic HTML: a button is a button, not a div
  • Pop-up tabs: reasonable solution with lists and ARIA
  • ARIA roles and alerts: forms

Workplace Inclusion with the RBC Accessibility IT team

  • Talk focus: employee accommodation from a digital inclusion perspective
  • All projects at RBC go through various gates, one of which is accessibility
  • IT Accessibility in Technology & Operations collaborated across RBC and with vendors in areas such as creating RBC IT Accessibility Requirements/Guidelines; training on providing accessibility testing; consulting on technology procurement; admins IT Accessibility Project Certification process; chair JAWS and Zoom Text user group across the country so employees aren’t so isolated, meeting once a quarter;
  • when consulting, we follow the W3C’s best practices
    primary method that people meet us: all technology projects need to go through our team for review
  • provide recommendations to procurement
  • keep up to date on new technologies
  • 4 consultants take turn monitoring the IT Accessibility Mailbox; the monitor will take on the projects from start to finish that come in during that time
  • important to have guidelines as a consistent point of reference; why we do it; code snippets how you do it right and wrong
  • emphasis on manual testing; everyone on teams have JAWS and ZoomText
  • Self-serve models with us available to consult and advise

Training at RBC for Accessibility

  • RBC Campus is our learning management system
  • mandatory course for business systems, analysts, and developers on accessibility (four core principals according to WCAG); course available to all RBC employees
  • Individual project training

Procurement

  • Get vendors to commit to an accessibility road map to create a solution for us
  • We have a list of questions so when we work with procurement for initial assessment based on WCAG and open ended questions
  • Describe your testing process? (don’t ask accessibility specifically)
  • What’s your in-house expertise in accessibility?
  • “A little knowledge is dangerous.” – a vendor may use ARIA to fix everything, but keyboard accessibility can’t be fixed that way
  • A lot of people say they know about accessibility, but they don’t
  • Get a clause on accessibility before you get your contract signed with a vendor (otherwise they’re use accessibility to up the price)
  • We don’t score vendors, we rank them: pros and cons of each
  • answers help RBC to work on contract that is informed by the results; where the vendor needs to improve

Ad Hoc

  • Video CC and AD in house
  • Consultation; How to; best practices
  • Accessibility Clinics

Audience Discussion

  • RBC openly shares common challenges with other banks
  • We all have common challenges on Windows with JAWs, Dragon, etc
  • Vendors can make us feel like we’re the only ones asking for accessibility, but other banks are asking for the same thing
  • JAWs and ZoomText are most commonly used by RBC employees
  • The team does not deal with AT, ergonomic keyboards, screens etc – focus on the more complicated things that involve scripting and special tools/navigation
  • RBC has a Workplace Accommodation Group and other partners across the enterprise
  • Make it more clear what accessibility is to your organization
  • When we ask for a vendor road map, we ask how they plan to do it to see if its feasible; recommend third-party firms they can engage
  • We all have a harmonized approach to accessibility internationally for guidelines and best practices; challenge to find people below WCAG 2.0 AA;
  • Lester has on average 50 projects at a time, but not are active all at the same time
  • Our self serve model: give guidelines to project managers to distribute to developers; know who’s on the team and how much guidance is needed from that particular project
  • Very verse projects: mobile, ATM, web etc
  • co-op students lead Accessibility Clinics; always looking for co-op students with disabilities
  • processes are advanced – been doing accessibility for ten years
  • Richard Aubrey encourages anyone in the audience to email him questions

Speakers: feel free to contact me if I misinterpreted something you said or if you’d rather your talk was not posted online.

Guelph Conference: Day One

photo of a button that reads I heart W C A G

Here are my raw notes from the Accessibility Conference at Guelph University, May 2016 #accessconf16

PDF and the User Experience with Karen McCall

  • Complaints on PDF have all been anecdotal until this survey; how PwD are accessing PDFs
  • Karen will be running this survey every November (Karlen Communications website)
  • We knew problems, but didn’t have research to prove

The Survey

  • 185 total responses; 146 complete responses; international response
  • advertised through Twitter and list serves;
  • Used Survey Monkey – most accessible tool I could find
  • Gizmodo was accessibility, but when they updated themselves they lost all accessibility
  • Asked for name and email to use as research; given a reference number by Survey Monkey
  • Most respondents identified that existing legislation in their country; most people didn’t know whether they had regional/state/provincial legislation (everyone from Ontario knew AODA existed though; everyone in the states quoted Section 508)
  • 69% respondents identified as advanced users (computer literacy level)
  • 49% have an intermediate PDF literacy; 53% advanced
  • We all know PDFs are a pain; David Leposky says PDFs are the bane of his existence; but PDF is not going away; PDF is everywhere and used for everything
  • PwD give very detailed responses as to what was working and not working for PDF
  • An accessible PDF can be read in different formats (change it to Word, HTML, structure remains the same – goal we want to have)
  • One person cannot imagine all the different ways someone will read the document, but a correctly tagged PDF will allow the user to choose the format they want
  • Most respondents were using screen reader
  • Top three: screen readers, screen magnifications, and text-to-speech
  • Large percentage are Mac users
  • Biggest alternative device: Human…, Voice Stream Reader (?)
  • Most people are not using tradition PDF readers
  • Tables are a big issue
  • Every developer needs “If a PDF if tagged correctly, its a pleasure to read.” framed and hung in their office
  • Some people know about PDF/UA or ISO 14289-1
  • NVDA is the only screen reader that is still PDF/UA conforming
  • We have known how to make PDFs accessible since Acrobat 5; PDF/UA was formed in 2012 – why are we still having so much trouble making accessible PDFs? (tools, education, etc)
  • Tables in the survey are a work-in-profess; table header tags are painful; everything else in the survey are tagged
  • karlencommunications.com / @karleninfo / info@karlencommunication.com

HTML & PDF: This isn’t an either/or with Adam Spencer

  • We’ve gone to extremes – either all HTML, or PDF, or publishing in four formats
  • A decision needs to be made on tech and capabilities
  • The challenge is getting developers to interact with PDF correctly
  • By limiting access to PDF, you’re limiting access to content
  • If the software isn’t able to access the tag structure, then it all useless
  • Preview ignores all tag structure; Adobe Reader reads tag structure
  • Content accessibility decisions are not linear
  • WCAG 2 Compliant PDFs do not exists – you wouldn’t want a ramp to be WCAG compliant
  • Its silly to make 300 page documents readable on a mobile device
  • PDF allows you to lock a file down; navigation; structure
  • HTML accessibility cost 4x more per page – not reinventing the content
  • Content is already offered in Word
  • No one writes in code except the web team
  • If everything is HTML, all graphic designers are out of a job
  • We still need a hard copy, so why not one copy for everyone
  • David Leposky opinion is not the only one in the country – unstructured plain text is his preference
  • People are terrified of doing something wrong – thats not how we build a document accessibility strategy
  • As a taxpayer, you do not to pay someone to retype their content four different ways
  • You would need an entire team to retype your content for HTML and WCG compliant; but what about cost and deadline
  • Microsoft fired their lead on PDF accessibility; people unsure what to be
  • Everything has to be mobile accessible, and digital but nobody knows how to do this
  • Policy of extremes isn’t working; all PDF; all HTML
  • We want content to reflow to how we want to read content
  • Back end of PDF is all XML
  • You cannot go from InDesign to a fully compliant PDF file
  • Document strategy in advance
  • Adobe Acrobat does not yet for PDF/UA; PAC 2 does (PAC 3 is about to come out)
  • Is the PDF readable? Usable? Accessible?
  • Not everyone should be a document accessibility expert
  • HTML is a quick step from being a good developer
  • Most of not have a DOM reader
  • Its knowing how to convey content to someone; planning head
  • As an organization, you are not getting rid of your PDF documents – plan in advance
  • If you have a legacy collection of PDF, you will have a big bill the first time; going forward, less
  • Never once has a document accessibility expert been consulted in government policy on accessibility
  • We know people don’t like PDF because there are so many bad PDFs
  • Authors don’t like semantics, hierarchy
  • PDF/UA is changing; initially built for developers; how to get technology to interact with PDFs – not for the user; WCAG is for the user
  • 14289 will be split into two parts: secondary standard for technology; 100 page betting on how to make PDFs accessible; published next Spring
  • Section 508 and AODA in refresh; no accessibility document experts called
  • Content format is critical
  • PDF is fully searchable, Googlable if tagged properly
  • HTML doesn’t have the same page structure as a PDF of a printed document (page 21, Section 3 in textbook; PDF – not HTML website)
  • Re-purposing content is the biggest waste of time and money
  • Content accessibility strategies are critical
  • Document accessibility is a business problem; fundamental right to read content; similar to the French language laws – before people had to ask, not anymore (gov)
  • “I cannot read web standard and all of a sudden become a ramp designer.”
  • I can Google how to make a ramp, but that doesn’t make me an expert
  • There is no easy button; this is looking for sustainable approach
  • You don’t post editable content; people can manipulate it
  • One person cannot be laden with the responsible to make all documents accessible
  • There is a reasonable bias for making things HTMLs because its usually web
  • managers who are asked about it- they know how to do it
  • Buying into accessibility is a tough one
  • There is a difference between authoring content and publishing content
  • One sided view because you can just read the WCAG site
  • Google shut off Reader in Chrome because they wanted to stay in Chrome
  • You can’t learn everything you need to know about PDF in a day; same with HTML; most people don’t know how to use Word correctly
  • Adobe and W3C are not always correct
  • Quark Express will not generate spaces at the end of sentences
  • There’s a lot more to PDF accessibility that “Add Tags”
  • Without sustainability, document accessibility either goes by the waistline or start removing content
  • Sustainability is critical; you need a budget for it
  • We need to have a conversation on content, not just a knee jerk one way or another

Audience Question: Tools for InDesign

  • Buy a generator from Callus
  • Use PAC or QuickFix (license $2000, but critical for UA compliance)
  • Staff costs money – if you’re doing one thing, you’re not doing another – the right tools are important

Audience Question: Compliance

  • AODA Compliant file is not an actual thing
  • I like PDF/UA because it is technically compliance, but doesn’t touch usability
  • Accessibility is not a checklist; “Does it make sense?”
  • Don’t need to apply ALT text to every image; takes away from usability/UX
  • If you’re not putting money behind usability, you’re not fully accessibility
  • A third of Accessible-IT teams is usability testing

AC, CC, and Me with Billy Gregory

  • used Go Pro and selfie stick; iMovie; iPhone
  • YouTube doesn’t let you post two audio tracks yet (so you need to post two vidoes)
  • Resource reminder: AMI’s Described Video Best Practices document
  • Netflix does great AD now (after people complained loudly) ; Netflix tailors AD voice to TV show

(and… I lost the rest of my notes for Billy’s talk when I was copying them over.. but here’s his slide deck: Billy Gregory’s Slideshare)

ALT text with Toufic Sbeiti

      • slides on slideshare: Toufic Sbeiti
      • ALT text is one of the first things you talk about in accessibility, is one of the hardest things to apply
      • ALT helpful for screen readers; image file not loaded; etc
      • context is key
      • WCAG turorial on images: 7 types
      • remember there is a screen reader reading everything; dont want to take away from content/experience
      • if no value added, empty ALT
      • Logos that are home buttons “W3C Home”
      • “Open in a new window” ; “Print this page”
      • use consistent image and placement for functional icons (ex: printer)
      • group of images: put ALT in one and empty ALT in others (star rating)
      • other group images: figure and figure caption

Image maps

      • map: one big alt and area alt
      • charts: describe relation

Complex images

      • best practice: short summary, collapsed – ask for source file in Excel (easier)
      • link to long description; not a fan (ex: D under images)
      • structure of a webpage is more important than the colour of a hammar

Tools

      • Web Developer Toolbar (Chrome) show ALT text
      • Color Oracle (browser): colour blindness simulator (helpful for testing for grayscale printing)
      • ALT Decision Tree

Post Camp Discussion

Speakers: feel free to contact me if I misinterpreted something you said or if you’d rather your talk was not posted online.