This guide is Drupal specific. This will help content editors using Drupal to add content to the website. It will also help with troubleshooting issues that may arise.
Adding images/svgs
SVGs - please remove all "id" attribute in the svg. It is always the same and creates a BIG error when the browser sees the same id for so many images/svgs
Images: Always add a title or alt tag to an image. But, make it meaningful. See example below.
Editing/Adding Tables
Adding Tables: Always make sure you add a table title and/or summary and/or caption
Adding nofollow and/or hiding pages
Production: https://access.boston.gov
Adding iFrames
Production: https://access.boston.gov
Content Editor Guide
The links with the same name should have the same href values when on the same page
Using classes on html elements you want to hide from screen but allow screen readers to access:
Updating boston.gov Drupal website with accessibility in mind. When adding content by editing/adding html elements, what they need to keep in mind for screen readers and people with disability.
Adding Images
When adding images to content, must add caption
and/or title
and/or alt
tags. This is especially important because screen readers reads them.
The editor we are using "ckeditor" provides at least one field to enter either a caption, title, or alt tags. If all three fields are provided please enter content for all three fields.
Please see the "How guide" section on the best ways to add and edit an image.
Adding Tables
Tables summaries must be added to each table created. Editors can use "ckeditor" to add summaries to each table. The summary
must explain exactly what the table content is about.
See the "How to guide" section to learn more about adding table summaries to tables
Adding Buttons and Links
Just like images, links should always have a title if it is to be used as a placeholder or anchor tag. that is it has no content within the <a></a>
tag.
Tip for buttons
: When using <div>...</div>, <span>...</span>, or <a>...</a>
as buttons always add a role="button"
attribute to the html tag. The button role should be used for clickable elements that trigger a response when activated by the user. Adding role="button"
will make an element appear as a button control to a screen reader. This role can be used in combination with the aria-pressed
attribute to create toggle buttons.
The above example creates a simple button which is first in the focus order.
Audios & Videos
Youtube videos:
HTML videos:
Other video types: