Some examples in these sections have been updated to reflect our new brand guidelines, and the original tool links might reflect an older style. 

At eCornell successful Tools are:

Accessibility
Color should never be solely relied on to convey meaning/information, indicating an action, prompting a response, or distinguishing a visual element. There should be other clues beyond color to convey meaning or relationship; this is a key reason that also directly labeling data and using patterns is important. Please use the WebAIM Contrast Checker or reference our Fonts page to check and confirm the accessibility of colors at different type sizes.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.0 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). If text and background colors are swapped, the contrast ratio remains the same.

Text or images of text that are either pure decoration or not visible, or are part of a logo or picture that contains significant other visual content, or inactive do not have a color contrast requirement.

The Main Design Steps

1. Text and Paragraph Styles

   1. Use Paragraph Styles for every single text element 

      1. Go to Type —> Paragraph Styles

      2. This allows for the screen reader to identify the elements and the hierarchy of the document

      3. Use only the presets in the template, 

         1. If you need a new style, please copy an existing similar style and make sure it has the correct tags

2. Graphics
   (stock photos, simple icons, decorative boxes/symbols)

   1. All photos/icons/graphics need alt text if important to content. 

      1. ID provides alt text

   2. Graphics that are not important to learning are tagged as Artifact.

      1. Right click on graphic

      2. Choose “Object Export Options”

      3. A dialog box will appear, click on “Alt Text”

      4. Under the dropdown menu, click on custom

      5. Then paste in alt text from ID

3. Tables

   1. Please use the tables from the General Template ALL STYLES file (in the InDesign Template folder).

   2. Keep the table simple

   3. Make sure to have headers 

   4. Use the Table Cell Styles in the Paragraph Styles window to style table cells

4. Flow Charts

   1. ID/IDA will write alt text 

   2. The goal is to communicate the relationship between the different flowchart components, or it is a more complicated flowchart which will be accompanied by text elsewhere in the document, then you’ll want to convert the chart to a single image or as a grouped object

5. Diagrams/Charts

   1. ID/IDA writes alt text

   2. Check contrast pass for internal objects (color of boxes, symbols, etc.) and text

   3. Group final diagram into one object. 

6. STEM/Math Graphics

   1. ID/IDA writes alt text

   2. Check contrast pass for internal objects (color of boxes, symbols, etc.) and text

   3. Group final graphic/diagram (if we created it) into one object. 

7. Interactive Elements 

   1. https://helpx.adobe.com/indesign/user-guide.html/indesign/using/forms.ug.html

   2. Text Fields

      1. Name: Text Field 1

      2. Description: Enter your response

      3. Multiline 

      4. Font: Helvetica, 12pt, light

   3. Radio Buttons 

      1. In order for Radio Buttons to work as a group, each group must have the same Name (Subject 1) and different description (Subject 1 Option Yes, Subject 1 Option Maybe, Subject 1 Option No) 

   4. Checkboxes

      1. Please use the checkbox in the InDesign General Template

         1. Make sure to enter the description  

   5. Specify tab order via articles Or Object > Interactive > Set Tab Order

      1. To enable screen readers to use the specified order, from the Articles panel menu, enable Use for Tagging order in Tagged PDFs. Remember to enable the Create Tagged PDF option while exporting the PDF.

The Main Technical Steps

InDesign

1. Layers

   1. Make sure you have two layers for each page

      1. Organize Text on one layer (order dictates read order, bottom up)

      2. Organize Image (any non-text elements) on one layer (order doesn’t matter). A screen reader will not read these.

      3. A screen reader will not read items on the Master page, so only use master pages for non-essential layout elements - logo imagery, course info, copyright, and page numbers.

   2. Reading order in an accessible PDF is based on the Layer order in InDesign. The bottom layer is the first thing that will be read on a screen reader.

   3. Here, “Executive Master of PUBLIC ADMIN...” will be read first by a screen reader:
      
      
      

2. Articles

   1. Window → Articles (InDesign’s way of saying “page”)

   2. Hit + (Create New Article)  → Add a new article for each page in document

   3. Drag and drop each element that is important to learning on the page in top down order 

   4. OR select items on the page as they are read, and drag them onto the Articles Window
      
      

3. Tags 

   1. Do not need to worry about these too much – the Paragraph styles are already tagged

   2. If images are labeled as artifacts, then you can leave out of structure and tagging. 

   3. Go to Window > Utilities > Tags 

   4. List of tag (Tools are the same?):

      1. H1-H6 = Headers and subheaders

      2. Link = hyperlinked text

      3. List = bulleted text

      4. P = paragraph / plain text

      5. Root = kind of like <body></body> in HTML → ignore until you get to structure

      6. Story = grouping of tagged elements that are read together → ignore until you get to structure

4. Nesting

   1. How to resolve an appropriate nesting issue when you run an accessibility check:

   2. When you tag a page, you have to follow the hierarchy of H1 → H2 → H3… and so on. You can’t jump from H1 → H3, but you can go back and forth between H1 → H2 → H1… etc.

   3. You can put non-header text between headers like H1 → P → H1 → P → H2 → P
      
      

5. Structure

   1. Go to View > Structure > Show Structure

      1. This is where you lay out the structure for all the text elements you’ve just tagged.

   2. Now start → Hit + (Add an element) → Tag: Root → OK

   3. Now you will drag and drop each tag as a “sub” element under Root. Drag from tag panel?

   4. To create a Story (aka a grouping of similar items) → Select all the elements in the Structure window → Right click → Create story

      1. This tells the screen reader that this is a group of elements that need to be read together.

   5. For a text box with multiple tags, right click the entire box → Tag Frame → Story

6. Bookmarks

   1. Bookmarks appear in the Bookmarks tab when you open the exported PDF file in Adobe Reader or Acrobat. Very beneficial for student navigation.

   2. Choose Window > Interactive > Bookmarks to display the Bookmarks panel.

   3. Click the bookmark under which you want to place the new bookmark. If you don’t select a bookmark, the new bookmark is automatically added to the end of the list.

   4. Do one of the following to indicate where you want the bookmark to jump:

      1. Click an insertion point in text.

      2. Select header text. (By default, the text you select becomes the bookmark label.)

      3. Do one of the following to create the bookmark:

         1. Click the Create New Bookmark icon on the Bookmarks panel.

         2. Choose New Bookmark from the panel menu.
            
            

7. Document Exports

   1. Export Settings

      1. Set the Document Title as the title of the tool

         1. File —> File Info —> Basic —> Document Title
            Keyboard Shortcut: Cmd + Opt + Shift + I

            1. The General Template already has the author as eCornell

2. Export as Interactive PDF

   1. File —> Export —> Interactive PDF —> Pick file location (Final Files Folder) —> Click Export
      Keyboard Shortcut: Cmd + E 

      1. The General Template has the correct settings for exporting an Interactive PDF

Adobe Acrobat

1. Run accessibility check → must reach ZERO issues to be accessible

   1. Accessibility —> Accessibility Check —> Start Checking

2. Manually pass reading order

3. Manually pass color contract by going to Edit —> Preferences —> Accessibility —> High contrast —> Black text on white

4. To resolve appropriate nesting issue, see structure section.

   1. If it’s correct in InDesign and still incorrect in Acrobat, you’ll need to manually adjust it in Acrobat following these steps

5. Next, add this https://www.callassoftware.com/en/products/pdfgohtml 

   1. Go to Adobe install > Plug ins > Open in browser

   2. Manually review to make sure PDF header/copy hierarchy is correct

Resources:

https://www.color-blindness.com/coblis-color-blindness-simulator/

https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf

https://opentextbc.ca/accessibilitytoolkit/chapter/using-personas/

https://www.intechnic.com/blog/best-practices-to-improve-text-readability-for-optimal-user-experience/