SF State Drupal template
The SF State Drupal web template ensures compliance with a number of standards from the SF State Web accessibility standards. These include built-in skip navigation links, accessible form fields, required alternative text and several other features. However, when adding content to your website you might inadvertently introduce accessibility barriers since multiple people with different knowledge levels help create the content.
The purpose of this guide is to help avoid introducing accessibility barriers when adding content to a Drupal website.
Alternative text for images is one of the first principles of web accessibility since images are visual in nature and exclude people with visual disabilities by design. Image information is conveyed to a non-visual user by the use of alternative text using the “alt” attribute in HTML. While it is easy to add alternative text to an image in Drupal, adding appropriate alternative text is one of the most difficult to properly implement.
One added benefit of appropriate alternative text is that it provides a semantic meaning and description to web pages indexed by search engines. This greatly assists with search engine optimization of your website.
Per the SF State Web Standards, alternative text:
- Should not use the phrase “Image of” or “Picture of”.
- Should not exceed 125 characters (otherwise use < longdesc>).
- Should only be blank if used for decorative images.
- Should not be one word, unless the image only contains text.
For more information on using appropriate alternative text, please read the WebAIM article on alternative text techniques or the DIAGRAM Center resources.
Meaningful and unique link text
Links are more useful when they make sense out of context. Avoid using link phrases like “click here”, “more” or other non-descriptive phrases. You will also need to ensure that links that go to different places have different link text. For example, if there are two links on a page that say “Read more” but go to different pages, a screen-reader user has no way of knowing this. Instead, you might want to consider changing the link text to “Read more about X” and “Read more about Y”.
For more information on ensuring accessibility of links, please read the WebAIM article on Link Text. Another helpful resource is the article SSB BART Group: On the Accessibility of Links
Links that open in a new window
It is helpful to alert users when links on your website will open in a new window. Screen readers do not always notify non-visual users and sometimes this behavior confuses users with cognitive disabilities. You can avoid this by this by including the text “new window” in the link text. For example, this is a sample link (new window)
For more information on links that open in a new window, please read the WebAIM article on Link Text in new windows
In summary, per the SF State Web Standards:
- Link text should not use contain non-descriptive phrases such as “click here”, “more”, etc.
- Links that go to different URLs should have different link text.
- Links that open in a new window should notify the user.
Meaningful page titles
Each of your web pages should have meaningful and unique page titles. Drupal uses the first level heading (H1) on the page as the page title. This helps both users of assistive technologies and search engines. For more information on meaningful page titles, please read the W3C’s tips on writing for web accessibility.
Semantic structure
When it comes to content, you should use semantic markup (headings, lists, etc.) to represent the structure of a web page. Appropriate semantic markup helps assistive technology users easily navigate a website.
You should use headings in a hierarchical manner on a page and avoid using headings to achieve visual or decorative results. You should also use lists appropriately and not just for indentation or decorative purposes.
For more information on ensuring semantic structure, please read the WebAIM article on Semantic Structure.
There are two types of tables in HTML – layout tables and data tables.
Layout tables
Layout tables are generally used to organize elements on a page and force a visual layout. We do not recommend the use of layout tables since you can achieve most formatting effects via CSS. However, if you must use layout tables, please follow the WebAIM guidelines on layout tables.
You may also use Bootstrap grid layouts. More information is available at the Bootstrap framework documentation on grid layout.
Data tables
We commonly use data tables at SF State to present information using rows and columns (ex. staff directory, course lists, etc.). You should summarize the content of your table using the <caption> element so that assistive technology can relay this information to a user. You should also designate row and column headers for table so that a screen-reader user may easily navigate the tables. For more information on creating accessible data tables, please follow the WebAIM guidelines on data tables
Per the SF State web standards, data tables:
- Should include row and/or column headers.
- Should include a table caption.
If you plan to link to documents such as PDFs, Word, Excel, etc. you need to ensure that they are accessible to people with disabilities. Document accessibility is an in-depth topic, so please visit our document accessibility page for more information and resources.
Please note that remediating all your documents for accessibility can be a time-consuming task. The ATI team is available to consult with you on both evaluating and remediating your documents for accessibility. If you need to go live before remediating all your documents for accessibility, please include an interim accessibility statement on your website.
If your website will have links to view documents such as PDFs, Word, Excel or files from other 3rd parties, you will need to provide a link to download software that can view these files on each page that contains these files. If you rather not do this individually for each page that has a file, you may include these download links in your sidebar so it shows up on every page. Feel free to use the examples below:
To view PDF files, you may download Adobe Reader
To view Word, Excel & PowerPoint files, you may download LibreOffice
If your website will contain audio or video, you will need to provide captions and/or transcripts.
Captions, Transcripts and Audio Descriptions
Captions are text versions of any dialogue presented within multimedia and allow the content of web audio and video to be accessible to those who cannot hear the audio. Transcripts allow anyone that cannot access content from web audio or video to read a text transcript instead.
Audio descriptions (sometimes called "video description" or "descriptive narration") provides blind and low-vision users with a description of the visual content contained in videos.
The DPRC is available to help you with captioning and audio descriptions. For additional information, visit the WebAIM Captions, Transcripts, and Audio Descriptions page.
Accessible multimedia player
To present multimedia to the end user, you should use an accessible media player that is keyboard accessible. The ATI team recommends YouTube player or Vimeo Player. Please avoid using autoplay for multimedia on your webpages so that the user may control this instead.
For more information on multimedia, please read the WebAIM article on Multimedia.
If you plan to use iFrames on your website, please ensure the following:
- Use a title for the iframe using the “title” attribute
- Ensure that the text between the < iframe> tag and closing tag describes the purpose of the iFrame. This may be the same as the title attribute.
Example: <iframe title="My iFrame">My iFrame</iframe>
For more information on iFrames, please read the WebAIM article on iFrame accessibility
Color Contrast
The default template colors in Drupal have already been vetted for appropriate color contrast, so unless you are altering the default colors you may skip this section.
Appropriate color contrast helps people easily read the content on your website and providing an appropriate contrast between the background and text will help accomplish this. Several tools can test for appropriate color contrast. We recommend the WebAIM color contrast checker.
Do not rely on color alone to convey meaning
It is tempting to use color on your website to enhance comprehension for your reader, but it is important to ensure that you do not use color alone to convey this information. People with visual disabilities and colorblind users might not be able to see this information. Consider including additional methods to convey this information.
For more information on using color appropriately, please read the WebAIM article on color-blindness
Acronyms and abbreviations mean nothing to readers who are unfamiliar with these terms. Expanding acronyms and abbreviations allows readers to learn their meaning. If you plan to use an acronym or abbreviation on a page, you should introduce the full text along with the abbreviation or acronym the first time you introduce it. You may also use the <abbr> HTML tag to expand abbreviations or acronyms.
For more information on writing clearly and simply, please read the WebAIM article on writing