While PrestoSports continues to create system-wide templates that support WCAG guidelines, certain responsibilities for improving and maintaining accessibility fall on the client side. We have outlined some best practices and identified tools to help you improve the accessibility of your site, but if you get stuck or have questions, please contact our support team for assistance.
Checking Articles for Accessibility
The article: rich editor has a built-in accessibility checker tool to help flag and correct accessibility items as you're creating your page. Once you have completed adding content to your article, open the "Tools" menu option and select "Accessibility checker" as seen here. You'll then see a pop up window that will walk you through the various items it's capable of checking.
Heading Structures in Articles
It is important to use proper headings for section so they can be programmatically identified. When creating an information page or release using article: rich, you can use the format dropdown to select the proper heading structure in your article. Please note that the title of the article uses Heading 1, so we suggest using Heading 2-6 for additional headings. Headings should be used in order to help define a hierarchy of headline importance. For more information on proper use of heading structures, click here.
All images should include a text alternative, commonly referred to as alt text. This is different than a caption in that it is a description of the image, allowing the user to envision the image. This is not just limited to photos but also includes all graphics such as logos, splash pages, banners, buttons, etc. This site provides a more in-depth description of alt text and best practices.
You can enter alt text for any image you upload using this alt text field. The alt text will not be visible on the site.
Here is how the alt text field works:
1) For images that have previously been uploaded to your site, the system will automatically read the caption as alt text. This applies to images going forward as well if you choose to only enter a caption.
Note: You can choose whether or not to show captions by editing the options file in the root directory and adding Article view: show caption
2) If you only enter alt text, it will not populate the caption field and should serve the purposes outlined by WebAim.
3) If you have not added captions or alt text, the alt text will be blank and any reports done by accessibility site checkers will continue to show errors related to those images.
4) If you are embedding an image into an article using the rich editor and you have already entered alt text when you uploaded the image, it will automatically import into the image editor’s alt text field. If you did not add alt text when the image was uploaded, you can enter it here.
Tips: Avoid using phrases such as “image of,” “graphic of,” or “click here”. Screen readers announce images as graphics. Keep the description succinct, generally 125 characters or less.
Adobe offers help on how to make your PDF accessible before it is uploaded to the site. However, if you are unable to create an accessible PDF, we recommend providing an alternative text-based format, such as HTML or RTF (Rich Text Format), in addition to PDF. Text-based formats are the most compatible with assistive technologies.
Videos need to incorporate features that make them accessible to everyone. Provide audio descriptions of images (including changes in setting, gestures, and other details), in addition to text captions synchronized with the video images to make videos and audio tracks accessible. Please note the thumbnail image for the video will also need alt text as described above in the images section. There is an alt text field available when you create a thumbnail following these instructions.
YouTube Videos: Currently, the best way to incorporate captions into videos on your site is through YouTube. Once you have captioned your videos through YouTube, your site will need to use your channel or playlist ID with a YouTube widget to pull in the captions. You can also embed a YouTube video into an article, and the captions will pull into your video automatically. If you do not see this working properly on your site, please contact the support team.
Uploaded video files: We do not have a way to pull in captions from uploaded videos at the time, so we recommend embedding the video into an article rich page with the full script below it or uploading the video to YouTube per the instructions above.
Provide a script for all audio files. We recommend embedding the audio file into an article rich page with the full script below it.
We discourage using tables to add content because of the difficulty for screen reader interpretation and lack of mobile adaptability. However, we realize sometimes using a table is unavoidable, so we recommend trying out these tools that can help you create accessible tables. If you already have your table in an excel document, this tool will allow you to upload it as a CSV file and generate code for you to paste into the html editor of your article rich page.
If you are building your table from scratch, you can use this tool to generate the html code.
When using data tables, you should include the table caption button, which provides a heading for the table. This lets the screen reader know what content the table contains. We also suggest adding a link to an accessible PDF, which you can create using the information in the PDF section above.
Using tables should be limited to creating column lists of content. While it is not recommended to use tables to lay out design elements of a web page, tables used only for layout should not have row and column headers. If you are trying to use a table to lay out design elements, please contact our support team to explore other options.
A navbar: image should only be used when the images are serving as buttons for linking purposes, also known as a functional image. The most common use on PrestoSports sites is the navbar-footer. Each image within a navbar: image requires a link and link alt text.
Social media templates are a work in progress, and while we have made improvements to help with accessibility, each social channel does require some site-specific adjustments.
Twitter and Instagram: The first step is to make sure you have added your accounts to social stream and set up a social stream file. These instructions should help. Newer sites all use social stream to power widgets, but if you are unsure, please contact our support team and we can make sure your site is set up to use the latest technology. Our development team will need to complete the site-specific adjustments to ensure these widgets are as compliant as possible.
Also, if you are embedding images in your Tweets, please be sure to add descriptive text as outlined here. Otherwise, we can turn off images so they will not show in Tweets on your site.
Facebook: Our team is currently in the process of adding Facebook to social stream as well. While we can incorporate keyboard navigation into your Facebook widget, we are exploring a template that complies with accessibility requirements.
Let us help with other changes
In addition to the changes you can make to improve accessibility, we can make specific adjustments to improve accessibility on your site. Please contact firstname.lastname@example.org to make the following changes and we can provide you with a cost estimate:
- Implement keyboard navigation
- Color contrast adjustments
- Add play, pause, forward and back buttons to all rotators, sliders, etc.
- Adjust the speed of rotating and sliding elements
Siteimprove Chrome Plugin
WCAG information and techniques: