WCER Website Accessibility In Wordpress
- All Images Have Sufficient Alt Text
- Text Has Enough Color Contrast
- Videos Have Closed Captions and Audio Has a Transcript
- Graphics Have Enough Contrast
- Autoplaying Video/Slideshows/Carousels
- Headings
- Documents
- Images of Text
- Hyperlinks Use Accessible Language
- Need Assistance?
All Images Have Sufficient Alt Text
Alt text is a descriptive text that provides context for images, graphs, charts, and other visual elements on a web page or digital document. Every image on a website should have enough alt text so that users viewing the page via a screen reader are able to fully understand the context of an image’s use, the same as if they were a sighted user.
Describe the photo or image and think of it in the context of the page it is on. In the alt text, there is no need to say "photo of" or "image of.”
Who this impacts:
-
People visiting your webpage with the assistance of a screenreader
How To Write Alt Text:
-
If an image:
-
Is a link, the alt text for the image describes the link destination. For example, if the cover of a report links to the report, the alt text has the title of the report and possibly the format like PDF: “Report On WCER Happenings (PDF)”.
-
Includes text, which generally should be minimized to five words or fewer, the alt text should include all of the text in the image.
-
To check for alt text on a website, view the page source or utilize a browser extension like WAVE Evaluation tool.
To update alt text on your Wordpress website, visit the Media Library. Locate the image and select it. The alternative text will be listed on the right side of the page.
Alt Text For Complex Images And Charts:
Alt Text For Complex Images And Charts:
Text Has Enough Color Contrast
Be sure to include a full data and text equivalent for screenreader users. The cut-off point for how long alt text should be is generally about 150 characters. If alt text exceeds 150 characters, a long description will be needed.
A long description should:
-
Include all data
-
Have a quick initial synopsis of the meaning of the image
-
Be a concise as possible while including all necessary details and proper grammar
Who This Impacts:
-
The Alt Text Decision Tree helps when working with alt text (and includes examples): https://www.w3.org/WAI/tutorials/images/decision-tree/
-
Further information (that the UW also references in their information on making websites accessible): https://webaim.org/techniques/alttext/
-
Examples of how to write alt text and practice exercises: https://www.accessible-social.com/images-and-visuals/image-accessibility#alt-text-vs-image-descriptions
-
UW Make It Accessible Guide To Long Descriptions: https://it.wisc.edu/learn/make-it-accessible/accessible-complex-images/
-
Diagram Center’s Guide to Long Descriptions: http://diagramcenter.org/table-of-contents-2.html#toc
How To Test Contrast:
The text on your page needs to have at least 4.5:1 contrast to the background. Large text (at least 18.5px bolded font or at least 24px regular font) only needs 3:1 contrast due to having thicker lines.
Related Resources:
-
Users visiting your website with vision impairments
Videos Have Closed Captions and Audio Has a Transcript
-
WebAIM’s Contrast checker tool: https://webaim.org/resources/contrastchecker/ which includes an eyedropper tool for selecting colors
-
WAVE: https://wave.webaim.org/
Who This Impacts:
How To Create Captions And Transcripts:
Closed captioning and transcripts allow for text versions of videos to be consumed by users. The key difference between the two is where the are accessed in relation to the video.
Closed captioning (added after a video is made directly to the media player) are preferred over open captions (added directly in a video editor) as they can be turned off and customized to suit the end-user.
A transcript can be as simple as a Word document or PDF with a text version of the video. This can be downloaded and read by users.
Related Resources:
-
Users viewing your video with audio impairments
Related Resources:
UW–Madison negotiated discounted rates with 3Play Media, Automatic Sync Technologies (AST)/Verbit, and Cielo24. For more information, visit Captioning, transcription, and audio description vendor rate comparison.
Graphics Have Enough Contrast
-
Text should be accurate
-
Use correct punctuation and formatted with proper grammar
-
Synced to the audio
-
State in brackets who is speaking at the start of a new speaker. Ex: [Bob] Hello WCER
-
Indicate relevant ambient sounds or emotional tones. Ex: (cat meowing) or (emotional music plays)
Who This Impacts:
-
UW’s Make It Accessible Guide to Captions: https://it.wisc.edu/learn/make-it-accessible/multimedia/#captions
How To Test It:
Graphics that are required for understanding, like social media icons, need to have at least 3:1 contrast to the background.
Related Resources:
-
Users with low vision
Autoplaying Video/Slideshows/Carousels
-
Contrast checker tool: https://webaim.org/resources/contrastchecker/ which includes an eyedropper tool for selecting colors
Who This Impacts:
Related Resources:
If something autoplays for more than five seconds, a mechanism is included so that users can stop the playing. Turning off autoplay is preferred. If it only pauses on hover or interaction - that is not sufficient to pass this criteria.
Headings
-
Screen reader users, but it also can be a distraction as well
Who This Impacts:
Related Resources:
Headings help those using screenreaders interpret the order in which content should be consumed. Think of this like a formal outline, your full content just falls into the hierarchy of it.
-
H1
-
H2
-
H3
-
H3
-
-
H2
-
H2
-
To do this correctly, designate an actual heading type in the document styles. Simply making font larger and/or bolding is not sufficient.
Documents
-
People visiting your webpage with the assistance of a screenreader
-
This is also helpful to improving search engine optimization on a website!
-
Who This Impacts:
-
Examples of a proper heading outline: https://webaim.org/techniques/headings/
-
WAVE shows headings in the “Structural Elements” section
Related Resources:
Documents on a website need to be digitally accessible. Some software like Adobe Acrobat Pro and Word have built in accessibility checkers. It’s best to make a document accessible in the original software (such as InDesign or Word) vs. later in Acrobat Pro if you are exporting a PDF.
Documents
-
People viewing your documents with the assistance of a screenreader
Who This Impacts:
-
UW Make It Accessible Guide to Accessible Documents: https://it.wisc.edu/learn/make-it-accessible/documents/
-
UW’s Center for User Expereince (CUE) will test documents for free.
Related Resources:
In general avoid images of text. If necessary, limit the amount of text in an image to 10 words or fewer. Text in images needs to have enough contrast (logos are exempt from this). The accompanying alt text must contain all of the text in the image.
Documents
-
People visiting your webpage with the assistance of a screenreader
Who This Impacts:
Related Resources:
Use descriptive text to signal a hyperlink such as "Learn more about the history of the avocado farm." When using a screenreader, text such as “click here to read more” isn’t helpful as the user isn’t able to locate where “here” is.
When linking to non-HTML items like a PDF, indicate in the link that it is going to a PDF. Include “PDF” at the end of the link text. For example: “Title of Document (PDF)”
Documents
-
People visiting your webpage with the assistance of a screenreader
Who This Impacts:
-
Accessible Social Guide to Links and Hypertext: https://www.accessible-social.com/copy-and-formatting/links-and-hypertext
The WCER Communications Team offers accessibility testing and consulting to ensure your work is accessible to all. Fees may apply. Contact us for more information.