Accessibility Best Practices

While we typically do not provide editors with access to create or edit basic pages, there are exceptions. The below sections are useful for those basic pages, as well as the bibliography fields that use a WYSIWYG (What You See is What You Get) free text box.

Headings

As with Word (Styles) and PDF, headings layout and form the navigation of your page. When editing content on a page or in the bibliography field, click on edit to open the page and access the WYSIWYG. If you do not see the WYSIWYG, make sure the Text format says, “Full HTML”. In Drupal’s WYSIWYG, you will see a toolbar across the top. Highlight the text you wish to make a heading and click on the paragraph drop-down menu and select your headings. Be sure to nest them in the correct order (H2, H3, H4, etc.) Note, H1 is not in this list as the H1 heading is assigned to the title of the page and therefore you can’t change it.

If you don’t see the toolbar and the Text Format says, “Full HTML”, you may need to click on the 3 dots to expand the screen. If you still don't see it, please inform the Open Publishing team and we will check the settings of the site.

Images

All images must have alternative text. When uploading an image to the page, click on edit to open the page and access the WYSIWYG. Select the Insert Media icon from the toolbar and select Choose File. Choose your image file, click Open. Now add your Alternative Text. Alt text must describe the picture. Poet Training Tool Alt Text Resource is a good resource. The W3C Web Accessibility Initiative has really good information on alt text as well. When that is finished, select Save and Insert.

Tables

If your publication contains tables, Drupal has a table option in the WYSIWYG. Click on the table icon and select how many rows or columns you will use. Click a table cell for icons for column, row, merge/split cells, toggle caption on, cell and table properties.

  • Do not merge cells.
  • Toggle the caption on and give the table a caption.
  • Click on the drop-down arrow next to column and row icons to assign headers.
  • An accessible table should have the first row and first column as headers.
  • Do not have blank cells.

Complex tables should be broken down into smaller, simpler tables. We do understand that this is not always feasible, so the Open Publishing Team is more than happy to assist and provide guidance with complex tables.

Link text

Start by writing meaningful link text that includes the purpose of the link. This will be announced by screen readers.

  • For example, if I am linking to the Open Publishing website, I would write "Open Publishing Website" for the link text.
  • Do not use words like “click here” or type out the entire URL. Screen readers do not like spelling out URLs and “here” is not descriptive. This YouTube video, Demonstration: Links with NVDA, provides a good example of how screen readers read links. Assistive technologies like screen readers catalogue links so that users can return to previous links they have viewed. If a screen reader user tries to navigate back to a link, but they all say "click here", the user will have no idea where the link goes.

In Drupal, highlight the text you wish to make a hyperlink for and choose the link icon. In the pop-up, you can see a box for link URL. Type the URL and skip the title box. Click the check mark.

Warning: under the Advanced section, you can toggle Open in new window. Please do not do this as it is not accessible for screen readers. If you must, please add language after the link that indicates that it is in a different window so screen reader users can find that window.

Bulleted Lists/Numbered Lists

If any of your text heavy fields require the use of a bulleted list or numbered list, use the bulleted or numbered list icon in the toolbar across the top. Do not use hyphens or other formatting as those do not provide the proper semantic structure needed by a screen reader. Try to stick to just two layers of bulleted lists.

URL and DOI Fields in the Bibliography Record

We recommend that if you plan on linking to a full text copy of the bibliographic title, you find an HTML copy versus an online PDF because they are generally more accessible.