WordPress Tutorials for the Granite School District
Category: Accessibility Tutorials
As a school district, we’re required to be ADA Compliant at the WCAG AA level. Learn how to write and adapt your content to meet the needs of all your patrons.
Sensory characteristics refer to instructions or sequences that on the senses to understand.
Key Takeaways
Instructions and information should not rely on one sense alone (touch, visual, audio)
Always provide more than one way to identify an item (e.g. audio + visual)
Sensory Information and Content & Instruction
Instructions or any other information you provide for users can’t rely on a singular sensory characteristics alone. Sensory characteristics include (but are not limited to):
shape
color
size
visual location
orientation
sound
physical action and touch
It’s best to rely on at least two different methods when explaining something or providing instructions, with one of those methods being textual.
Example 1
Click the green right arrow to go to the registration page.
Issue: Avoid the word ‘click’ whenever possible, no matter the situation (not to mention, nobody ‘clicks’ on a mobile device)
Issue: ‘green right arrow’ relies on three visual queues: color, orientation, and shape.
Issue: the green right arrow may or may not be near the text that provides the instruction.
Use the green ‘Go to Registration’ arrow button to begin the registration process.
Labeling the button ‘Go to Registration’ provides a non-visual queue (audio) in addition to the three visual queues. This
The button can still be green, and it can still be a right-facing arrow, but having both an audio and visual queue makes it much more likely that anyone will understand its purpose.
Example 2
Use the small button to the left of the gray box…
Issue: ‘small button’ is relative and may depend on someone’s perception.
Issue: ‘to the left of’ relies on visual location, and visual location may change depending on what device is being used to access the content.
Issue: ‘gray box’ relies on color and shape. Not all monitors display gray the same (and some won’t even display some of the shades).
Use the small ‘Search’ button to the left of the gray box…
While it still relies on some visual queues, it can also be found using auditory senses as well.
Making sure to have a text label for your items is a good way to use multiple senses.
It may be a good idea when writing instructions to ask yourself, “If I was blind, deaf, paralyzed, or on another device, could I follow these instructions?” And if the answer is unclear, reconsider how you present them.
Meaningful sequence simply means presenting your content in an order that makes sense.
Key Takeaways
Think top-to-bottom, right-to-left
Keep related items together
Provide context for an image and other media in the text around it
Visual Queues and Reading Order
Most of the languages that we work with on our website follow the same reading pattern: Top to bottom, left to right. Your content should follow that same general pattern. Headings are a good way of keeping your content flowing in a logical order.
Generally speaking, all paragraphs read from left-to-right. This is also good methodology when using columns. Anything that is in the left column will be read before moving to the right column.
Keeping Items Together & Media
If your content breaks the top-to-bottom, left-to-right order, then there needs to be a solid reason for it (the content cannot be presented in any other way). Wanting to “spice things up” or make something “visually interesting or fun” are not good reasons, and often result in breaking ADA compliance.
Content that is related should be grouped together, whether it’s text, media, buttons, or links. For example, if you’re using an image on your site, the text around the image should correlate with the image being used. If you’re linking to something, the text leading up to or following that link should be related to what the link (or group of links) is.
All audio and video embedded on your website needs to be accessible with both a mouse and keyboard. If you use YouTube and Soundcloud to embed these media types, then it should be WCAG AA compliant.
In addition to that, the following criteria must also be met:
Avoid auto-playing any audio or video whenever possible.
Any video that does auto-play for more than 3 seconds has to have a way to pause or stop.
There needs to be a way to change the audio level independent of the system’s volume control.
Instead of forcing your audio-related content on your users, it’s best to allow them to interact with it when they’re ready.
Audio, just like video and images, need to have another method of accessing the information.
Key Takeaways
Use Soundcloud or similar service to embed audio on district and school websites (use the Soundcloud block)
All audio must have a transcript
Audio Transcripts
Whenever audio-only media is added to your website, you need to have a full transcript available of that audio. The transcript needs to include who is speaking, and should be as accurate to the original audio file as possible. It’s okay to edit for some filler words, if needed.
You can add the transcript either directly below the audio file, or on a separate page with a link to that page below the file. The transcript should have minimal styling
Audio Transcript Examples
When displaying the transcript you can either 1) link to a separate transcript page, or 2) display it directly below the audio file. The example that follows shows both methods, although only one is required.
Transcript for “Excerpt from the Legend of Sleepy Hollow”
Narrator:
This an excerpt of “The Legend of Sleepy Hollow” by Washington Irving.
Found Among the papers of the papers of the Late Diedrich Knickerbocker.
A pleasing land of drowsy head it was, Of dreams that wave before the half-shut eye; And of gay castles in the clouds that pass, Forever flushing round a summer sky. —Castle of Indolence
In the bosom of one of those spacious coves which indent the eastern shore of the Hudson, at that broad expansion of the river denominated by the ancient Dutch navigators the Tappan Zee, and where they always prudently shortened sail and implored the protection of St. Nicholas when they crossed, there lies a small market town or rural port, which by some is called Greensburgh, but which is more generally and properly known by the name of Tarry Town. This name was given, we are told, in former days, by the good housewives of the adjacent country, from the inveterate propensity of their husbands to linger about the village tavern on market days. Be that as it may, I do not vouch for the fact, but merely advert to it, for the sake of being precise and authentic. Not far from this village, perhaps about two miles, there is a little valley or rather lap of land among high hills, which is one of the quietest places in the whole world. A small brook glides through it, with just murmur enough to lull one to repose; and the occasional whistle of a quail or tapping of a woodpecker is almost the only sound that ever breaks in upon the uniform tranquillity.
I recollect that, when a stripling, my first exploit in squirrel-shooting was in a grove of tall walnut-trees that shades one side of the valley. I had wandered into it at noontime, when all nature is peculiarly quiet, and was startled by the roar of my own gun, as it broke the Sabbath stillness around and was prolonged and reverberated by the angry echoes. If ever I should wish for a retreat whither I might steal from the world and its distractions, and dream quietly away the remnant of a troubled life, I know of none more promising than this little valley.
From the listless repose of the place, and the peculiar character of its inhabitants, who are descendants from the original Dutch settlers, this sequestered glen has long been known by the name of SLEEPY HOLLOW, and its rustic lads are called the Sleepy Hollow Boys throughout all the neighboring country. A drowsy, dreamy influence seems to hang over the land, and to pervade the very atmosphere. Some say that the place was bewitched by a High German doctor, during the early days of the settlement; others, that an old Indian chief, the prophet or wizard of his tribe, held his powwows there before the country was discovered by Master Hendrick Hudson. Certain it is, the place still continues under the sway of some witching power, that holds a spell over the minds of the good people, causing them to walk in a continual reverie. They are given to all kinds of marvellous beliefs, are subject to trances and visions, and frequently see strange sights, and hear music and voices in the air. The whole neighborhood abounds with local tales, haunted spots, and twilight superstitions; stars shoot and meteors glare oftener across the valley than in any other part of the country, and the nightmare, with her whole ninefold, seems to make it the favorite scene of her gambols.
The dominant spirit, however, that haunts this enchanted region, and seems to be commander-in-chief of all the powers of the air, is the apparition of a figure on horseback, without a head. It is said by some to be the ghost of a Hessian trooper, whose head had been carried away by a cannon-ball, in some nameless battle during the Revolutionary War, and who is ever and anon seen by the country folk hurrying along in the gloom of night, as if on the wings of the wind. His haunts are not confined to the valley, but extend at times to the adjacent roads, and especially to the vicinity of a church at no great distance. Indeed, certain of the most authentic historians of those parts, who have been careful in collecting and collating the floating facts concerning this spectre, allege that the body of the trooper having been buried in the churchyard, the ghost rides forth to the scene of battle in nightly quest of his head, and that the rushing speed with which he sometimes passes along the Hollow, like a midnight blast, is owing to his being belated, and in a hurry to get back to the churchyard before daybreak.
Such is the general purport of this legendary superstition, which has furnished materials for many a wild story in that region of shadows; and the spectre is known at all the country firesides, by the name of the Headless Horseman of Sleepy Hollow.
Videos are slightly more complicated than audio files in that you also have to take into consideration any sort of imagery that may affect the video’s message. When posting a video, you need to include a full transcript either below the video, on a separate page with a link, or as captions. If the video has images with text that are crucial to the message, that text must also be part of the transcript.
Key Takeaways
All public videos must be uploaded to YouTube before being used on your website.
Captions and transcripts serve to provide equivalent information.
Either captions or a transcript must accompany all videos.
YouTube Requirement
As a district, we require that you upload all of your videos to YouTube before embedded them on your site because YouTube will auto-generate captions while also meeting ADA requirements for video control. The auto-generated captions will not be 100% accurate and will require you to make some adjustments; however, it’s a start and will save you time.
After your video is uploaded to YouTube, you can use a Video block to add it to a page or post on your website.
Equivalent and Accurate Information
The purpose of captions and transcripts are to provide everyone with the same information. Even though YouTube’s auto-generated captions continually improve, they will often result in humorous or embarrassing caption failures, and they certainly don’t take into account proper grammar and punctuation. Automatic captions by themselves are not ADA compliant at the AA level, but they’re a decent start.
If your transcripts and captions are not accurate, then it follows that not everyone is receiving equivalent information. Here are some guidelines to help with that:
Don’t include more than three lines of text on the screen at once.
Text has to be shown between 3 and 7 seconds.
Captions cannot cover any important graphics or visuals (like faces and charts).
The caption font has to be clear and distinguishable.
Captions need to preserve dialect and slang as much as is reasonably possible, and also reflect the exact words of the speaker. (It’s okay to do some light cleanup of filler words like ‘uh, um, etc.,’ so that it reads more easily.)
Any sort of background sounds like music, laughter, and noises have to be included in brackets, for example [laughter] or [ominous music].
If a conversation is happening in a video, and the person off screen is talking, that person’s name needs to appear in capital letters followed by a colon. (BARRY: I’m the fastest man alive.)
For transcripts, there should always be some sort of indicator as to who is talking, usually a single line above the paragraph or their name followed by a colon and then the text.
If using a transcript, and not captions, that transcript needs to be placed directly underneath the video, or on a stand-alone page and a link to that transcript page linked directly below the video.
Visual Elements in Videos
Sometimes a video might have charts or other data presented in them. That information will either need to all be read by the presenter (so that it can be captioned), or a full transcript will need to be provided with that same data available in a text format.
After captions are auto-generated by YouTube, you can export them, check them for accuracy, and then add them to your website either below the video or on a new page, with a link to that page below the video.
Anytime we use an image on the website, we need to include a description using alternate text. Assistive devices use the alternate text to provide information about that image to the people who need it.
Key Takeaways
Every image needs to have alt text
The alt text needs to describe the purpose of the image
If the image is used to convey information (for example, a picture of text), then that information needs to be written out in the alt text or below the image on the page or post itself.
Adding alt text at the moment the image is added to the Media Library ensures that alt text will be used with that image no matter when or where it is used.
Understanding Images and Alt Text
The alt text for images is a very brief explanation of what the purpose of an image is. When an assistive device comes across an image, it will use what’s written in the alt text area to describe the image to the user.
There is no need to use either ‘image of’ or ‘photo of’ in the alt text, as the majority of assistive devices will announce that it’s an image or photo already.
Alt text for an image without text is the easiest; you simply describe the image in as few words as possible.
For an image of a bridge spanning across a large waterfall in a tropical forest, you have a few options.
The important question is, “What is the purpose of this image?” If the purpose is the bridge, the alt text could just be “bridge.”
If the purpose is both the waterfall and the bridge, you could use “bridge over waterfall.”
However, maybe the purpose of the image is the size of the waterfall, or the structure of the bridge, in which case your alt text may be “arched bridge over 500 foot waterfall.”
In the end, the point is to decide why you’re using that image and then to describe the image accordingly. Most assistive device users are grateful for alt text descriptions that are as short as possible.
Images with Text
Whenever an image has text on it, you will need to decide if the text is meaningful to the purpose of the image.
As an example, let’s use the image of a bike next to a long road and a road sign that has “Follow that dream” printed on it.
If the purpose of the image is just to show the bike you could simply write “bike” as the alt text.
If the color of the bike is important to the image’s purpsose, you might write “white bike” in the alt text field.
Or if the purpose is the sign and the bike and road don’t matter you would just write “Follow that dream” as the alt text, or “Follow that dream, road sign.”
Or maybe the purpose in using this image, is everything all together: “White bike next to long road and a ‘Follow that dream’ roadsign.’
Whatever the case keep in sign the same image used in different areas may serve different purposes, and therefore might have different alt texts on each use.
The main question to ask when using an image with text is simply “What is the purpose of this image?” and then to describe it as briefly as possible
Images of Flyers and Posters
Best practice for posters and flyers is to write the text from the flyer and poster directly onto your website so that it can be accessed the same as any other text, and then use a brief description of the poster or flyer in the alt text, along with where they can find the information: “Doughnut Day Flyer. Information in post content.”
Second best practice, if for some reason you’re unable to write the text on the website itself, is to put all—yes all—important information from the poster or flyer into the alt text field.
Complex Images
Examples of complex images are graphs, charts, or pictures of tables and data. In these cases it’s best to write out a description of the data, much like you would for flyers and posters. You can have that data on the same page, or add a supporting link near the image that takes the user to a separate page with a long description.
The long description defines the fields, columns, rows, data sets, etc. on the image and also provides the needed interpretation.
Why This Matters to ADA Compliance
Images with text are all-to-often used to convey important information; however, when text is itself an image, assistive devices cannot read that text.
This effectively keeps any body with visual impairments from being able to access that information.
It also prevents that information from being able to be translated into other languages.
When the content is magnified or reduced, the text on an image does not scale appropriately, and the clarity is compromised.
Whenever possible, avoid using images with text to convey meaning.
How to Add Alt Text to Images
There are multiple ways to add alt text to images, and the way that’s described first is the most efficient. For the sake of simplicity, I’ll be using ‘posts’ as an example even though the process is the same, no matter if it’s a page or a post.
In the body of your post, add an image block by click the block ‘plus’ button or by placing your cursor in the ‘Type / …’ area. (Would type ‘/image’ to add the image block.)
If you don’t immediately see the image block, you can do a search until you do. Select the ‘Image’ block.
Once the image block is in your post body, click the ‘Select Image’ button and choose ‘Media Library.’
Important Note: If you use the ‘Upload’ button, it won’t give you the opportunity to add an Alt Tag in prior to inserting the image onto your page. For this reason, I suggest always using the ‘Select Image’ option, even when uploading a new image.
Once the Media Library screen loads, you can either select an image that’s already in your media library or upload a new one. Either way, after the image is selected (after uploading or simply using one in the Media Library) the image’s details will appear to the right of the image you selected.
Notice that the ‘Alt Text’ field is the first fillable area for an image. This is where you would describe the image for assistive devices.
Important Note: Typing in the alt text at this time will ensure that the same alt text will be used from this point forward each time this image is inserted onto your website. You can still change the alt text on a per-use basis if needed, but by default, this will be the text used each time. If this image was already inserted in a previous post before filling out the Alt Text area, then the website will not go back and retroactively insert the alt text. You will need to either reinsert the image on those pages, or fill in the alt text on a per-use basis.
In the example screenshot given, the image being used is a bike next to a street sign. In my opinion, the text on the street sign is the most important part and when combined with a bike, creates the purpose of the image, so for the alt text, I will write, “Bike next to a ‘Follow that dream’ Street Sign.’
I would then choose ‘Select’ to insert the image into my post.
You can then select that image on your post and the block settings will display (if they don’t display, click the gear icon in the top-right corner of the post edit screen).
In the image block settings, there is an individual field for the Alt Text. It is automatically filled out using the alt text you entered from within the Media Library when you selected the image in the first place. Changing the alt text in this field, only changes it for this instance of the image.
There are also other image-editing options that you can work with to change the image size and alignment in relation to the text around it.
A few final notes on adding alt text to images.
Keep in mind alt text added while in the Media Library will be used whenever that image is inserted. Alt text added to an individual image block’s settings (an image instance), will only be used for that one particular usage. (You could have the same image on the page multiple times, each time with a different alt text.)
Using the ‘Select Image’ button instead of the ‘Upload’ button on an image block will let you add in alt text for the image before adding it into your page. This will save you time in the long run.
Alt text describes the purpose of the image. The point is to make sure anyone with a visual impairment has access to the same information that an image provides.
You must be logged in to post a comment.