Accessibility Recommendations
The PrestoSports team has made improvements to enhance accessibility across our website product as outlined in Web Content Accessibility Guidelines (WCAG) 2.1 AA in conjunction with the American with Disabilities Act (ADA). Additionally, our Accessibility Conformance Report highlights our current capabilities and serves as a guide for where we can continue to make improvements.
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 client care 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.
Images
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:
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 captionIf you only enter alt text, it will not populate the caption field and should serve the purposes outlined by WebAim.
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.
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.
PDFs
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
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 client care 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.
Audio Files
Provide a script for all audio files. We recommend embedding the audio file into an article rich page with the full script below it.
Tables
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 client care team to explore other options.
Navbar: image
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
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: Our development team has worked to ensure our internal Twitter widgets are as compliant as possible. If you are using the social stream file to display the Twitter feed we suggest changing to our Twitter widget. You can do that by contacting our website support team using this form- https://clubessential.my.salesforce-sites.com/contactus
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.
Instagram: We no longer has an internal Instagram widget due to API changes on their end. These changes also breaks the ability to integrate an Instagram account with our websites so it wouldn’t display in the social stream file anymore.
There are two options for displaying those feeds now:
We can grab the embed code from your Instagram account and add that to the website. This option is free but that feed will only display the images posted on Instagram. It won't pull in text from those posts.
You can acquire a 3rd party Instagram widget and provide us with the embed code. We should be able to use any widget as long as they can provide an embed code, but here's information regarding widgets that other clients have used- https://docs.google.com/spreadsheets/d/1iFBFD89njTFxxmWaIG7S_JLlfBo3_JIr7oezWf6J_Bo/edit?ts=60ca3532#gid=0
Since both of these feed sources come from 3rd party sources any changes related to accessibility would need to be sent to the provider of the feed.
Facebook: Our development team has worked to ensure our internal Twitter widgets are as compliant as possible. If you are using the social stream file to display the Facebook feed we suggest changing to our Facebook widget. You can do that by contacting our website support team using this form- https://clubessential.my.salesforce-sites.com/contactus
Resources
Site checkers:
WAVE
Siteimprove Chrome Plugin