Content Provider Guide to Accessibility
Accessibility Accessibility VPAT
Seeking out these local resources could be beneficial if you are new to generating web content or web accessibility.
It is recommended that content providers test their published and preview pages with these plugins.
The WCAG AA rules state that text should have a contrast ratio of 4.5:1 or higher for text under 14pt or 19px. A 3:1 contrast ratio or higher is acceptable for larger text greater than or equal to 14pt and 19px.
SIDEARM Sports aims to have all text contrast ratios to be at least 4.5:1 for all text in the site templates.
Even though accessibility scanning tools like Wave and Siteimprove do not check images for text contrast, content providers should still make the text in these images accessible.
There is a special accessibility attribute, aria-label, that allows for a more detailed labeling of links, buttons, and other elements. This is useful when it could be too cumbersome to have unique link names on a page due to design constraints.
Example of aria-label in use:
Tickets
Do not use underline styles on text that is not a link. General rule is you shouldn't make non-link text look like links as it can confuse and frustrate users. The opposite is true of making links blend in with regular text and headings.
When uploading a single image, the alternative text should be added as part of the image information fields, in the image edit window.
After performing a batch upload, image alternative text can be added in the Batch Edit Metadata section of the CMS.
Do not use css or html styles to designate section headings in content. Use h2, h3, h4, etc.
Headings should also go in order and not skip levels, ie:
If a table is used for formatting, ensure it does not have any table elements other than tr and td and that the table itself has the role attribute set to “presentation” (example: table role="presentation")
The layout functionality that tables provide can be emulated via CSS’s flexbox and float rules.
Headings are required for tables that display tabular data. Table heading cells are identified by the th element. Column is the default direction a th labels. If a th labels a row you can add the scope="row" attribute to it.
Tables should not be nested within each other as this will confuse screen readers.
There are also older HTML styling elements that should not be used, some of these are: center, font, b, i, u.
The CSS equivalent to the center element div style="text-align:center;"
In most cases, the strong and em attributes can be used in place of b and i.
Do not use underline styles on text that is not a link. General rule is you shouldn't make non-link text look like links as it can confuse and frustrate users. The opposite is true of making links blend in with regular text and headings.
YouTube has the ability to auto-generate captions. The accuracy of these captions should be manually verified. YouTube does have the ability to edit the auto-generated captions if needed. Alternatively, you can upload your own caption file. Content providers should inquire whether or not their institution has a contract with a captioning or transcript service. IT, Disability Services, and Library departments are good places to start.
Though SIDEARM Sport’s platform has many accessibility features built into forms, one element that is outside its control is the field’s label. The content provider is required to fill in a unique and descriptive “Title” for each form field.
Guide Table of Contents
Services at Your Institution Useful Browser Plugins WYSIWYG HTML Source View Color Contrast Links and CTAs Alternative Text for Images Page Titles Headings Forms/Surveys Tables HTML and CSS Styling Time-Based Media Flashing Content and EpilepsyWeb Accessibility Services at Your Institution
Many, if not all, secondary and higher education institutions has resources dedicated to web accessibility. These resources can typically be found in IT and disability services departments.Seeking out these local resources could be beneficial if you are new to generating web content or web accessibility.
Accessibility Testing Browser Plugins
Two of the most common accessibility testing browser plugins are Wave and Siteimprove. Both have their pros and cons. SIDEARM Sports uses both together to test for technical accessibility issues.It is recommended that content providers test their published and preview pages with these plugins.
WYSIWYG HTML Source View
Some of the techniques in this document require editing the HTML source code.Color Contrast
Color contrast is important for users with color blindness and other vision impairments. Contrast is measured by the difference between two tones, background and foreground, and is represented by a ratio.The WCAG AA rules state that text should have a contrast ratio of 4.5:1 or higher for text under 14pt or 19px. A 3:1 contrast ratio or higher is acceptable for larger text greater than or equal to 14pt and 19px.
SIDEARM Sports aims to have all text contrast ratios to be at least 4.5:1 for all text in the site templates.
Even though accessibility scanning tools like Wave and Siteimprove do not check images for text contrast, content providers should still make the text in these images accessible.
- WebAIM: Color Contrast Checker
- WCAG 2.0: Understanding Success Criterion 1.4.3
- National Eye Institute: Facts About Color Blindness
- Text Hover
Links and Calls to Action
Use descriptive and unique labeling for links and call to action buttons. Do not use text like “click here” or the actual URL, use wording that describes what the link or button does or goes to. Having multiple links with the same name that go to different destinations would be confusing for users with vision impairments that would use special software that would list all the links in a page.There is a special accessibility attribute, aria-label, that allows for a more detailed labeling of links, buttons, and other elements. This is useful when it could be too cumbersome to have unique link names on a page due to design constraints.
Example of aria-label in use:
Tickets
Do not use underline styles on text that is not a link. General rule is you shouldn't make non-link text look like links as it can confuse and frustrate users. The opposite is true of making links blend in with regular text and headings.
Alternative Text
All images on your site should have alternative text associated with them to allow for screen readers to interpret the image content. See below for instructions on adding alternative text while performing a single image or batch image upload.
Single Image
When uploading a single image, the alternative text should be added as part of the image information fields, in the image edit window.
Batch Uploaded Images
After performing a batch upload, image alternative text can be added in the Batch Edit Metadata section of the CMS.
Page Titles
Make sure all pages have a descriptive and unique title that identifies the content of the page or document. Besides facilitating accessibility, proper titles also aide with search engine optimization (SEO).- University of Washington: Providing an Informative Title
- WCAG 2.0: Understanding Success Criterion 2.4.2
Headings
Headings facilitate the structuring of a web pages content. Not only do they organize content visually, screen readers and other assistive technology uses them to help a user navigate a page quicker.Do not use css or html styles to designate section headings in content. Use h2, h3, h4, etc.
Headings should also go in order and not skip levels, ie:
Tables
It is recommended that content providers do not use tables to format content unless it is actually displaying tabular data.If a table is used for formatting, ensure it does not have any table elements other than tr and td and that the table itself has the role attribute set to “presentation” (example: table role="presentation")
The layout functionality that tables provide can be emulated via CSS’s flexbox and float rules.
Headings are required for tables that display tabular data. Table heading cells are identified by the th element. Column is the default direction a th labels. If a th labels a row you can add the scope="row" attribute to it.
Tables should not be nested within each other as this will confuse screen readers.
- WebAIM: Creating Accessible Tables
- CSS Tricks: A Complete Guide to Flexbox
- CSS Tricks: All About Floats
HTML vs CSS Styling
HTML attributes like align, size, border, height, and width should be avoided. Instead use CSS to style text.There are also older HTML styling elements that should not be used, some of these are: center, font, b, i, u.
The CSS equivalent to the center element div style="text-align:center;"
In most cases, the strong and em attributes can be used in place of b and i.
Do not use underline styles on text that is not a link. General rule is you shouldn't make non-link text look like links as it can confuse and frustrate users. The opposite is true of making links blend in with regular text and headings.
Time-Based Media (Audio and Video)
Alternative content for time-based media should be provided. Typically this is accomplished with captions for video and transcript for audio. Captioning of videos on the SIDEARM Sports platform is supported through YouTube. Transcripts for audio can be supplied via Sports Files. Transcript pages can also be made for videos.YouTube has the ability to auto-generate captions. The accuracy of these captions should be manually verified. YouTube does have the ability to edit the auto-generated captions if needed. Alternatively, you can upload your own caption file. Content providers should inquire whether or not their institution has a contract with a captioning or transcript service. IT, Disability Services, and Library departments are good places to start.
Forms/Surveys
Every form inputs should be properly labeled. Users utilizing assistive technologies, like screen readers, may not have the same context perception that traditional user interfaces may have.Though SIDEARM Sport’s platform has many accessibility features built into forms, one element that is outside its control is the field’s label. The content provider is required to fill in a unique and descriptive “Title” for each form field.