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.
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.
Links and buttons are considered navigable elements, meaning that when they are activated, they take you to another location.
Key Takeaways
Only links are underlined, do not underline text that is not a link.
Name links and buttons what they are. (Descriptive names, not ‘click here.’)
Name files what they are. If using the download button, rename button.
Naming Links and Buttons
One of the main ways that assistive devices navigate a website is through the use of links. The link text will be read out loud whenever a link is accessed. For this reason, it’s important to name links what they are. If your links are named ‘click here’ or ‘read more,’ not only is it exclusive, but also fails to provide information on what the link does, or where it goes.
As part of the naming, leaving the URL in its raw state will result in the full URL being read. The only time this is appropriate, is if you’re linking to a main, short URL. Otherwise, it’s better to name the link without using ‘www’ or ‘.com’ in the text.
In the case of buttons, sometimes you may want to use a ‘Download’ button. If using the ‘download’ button, be sure to rename the button text so that it indicates what is being downloaded (e.g. Download Dress Code).
By default, the website templates will handle a link’s design appropriately. As long as the default settings are used, links will already be underlined as well as meet color criteria when hovered, clicked, and visited.
Naming & Linking Files
By default, WordPress uses the file name as the link’s text. For this reason, it’s important to name the file what it is before uploading it to the Media Library. Additionally, doing so will help when conducting searches in the media library. (For files, it’s the ‘Title’ field in the Media Library that determines the link text.)
It’s extremely helpful when linking to files to also include the type of file that it is in the link text.
When linking a file (using the ‘File’ block), you have the option of adding a download button in the block settings. We do not want repetitive links on the page because of the confusion this can cause, so it is best practice to either use a button, or a text link, do not use both.
Just like with text links, you should maintain the same naming standard and use the file name with the file type, and not just the word, “Download”
If your file name has a date in it (and it’s important to the link), please be sure to use a proper date format in the name: 12-03-2021, 2021-12-03 for example. (File names do not allow forward slashes, but you can use the slashes in your file’s link text.)
Different text elements, such as a paragraphs, headings, lists, and more, are required to be a specific size, and have the correct amount of spacing between itself and the neighboring content. When colors are used, the colors have to meet specific contrast ratio guidelines dependent on its size and placement. Text styles such as underlines, differing fonts, and flourishes, are also regulated so that no matter who accesses the content, and no matter how they access it, the content remains accessible.
Key Takeways
Keep things as simple as possible.
All text should be black. (Use default colors.)
Text should not be resized. (Use default text sizes.)
Use bold and italics to bring attention to text.
Use headings for organization, not attention
Do not use all caps except for acronyms. (Use periods for acronyms.)
Keep text left-aligned.
Do not use underlines; underlines are reserved for links.
Text Sizes
The easiest way to make sure the text sizes on your website meet the WCAG AA standard is to leave all headings, lists, paragraphs, and other text elements at their default sizes when you add them into your page or post. The default sizes are calculated by relative percentages so that spacing and clarity meets WCAG AA standards.
Headings in particular are required to be a specific size (based on their differences) in relation to one another, and in relation to the content that surrounds them. When left at their default sizes, they will resize automatically for the user no matter what device they are using to access your site. When the sites are magnified or shrunk, they will also resize the spacing based on these sizes. If you override the default sizes, it’s possible that the new size will still pass ADA compliance on your individual device; however, it also overrides the sizes and spacing on other devices that make the site compliant.
For other text, if the sizes are manually changed, it may make so some text is illegible at certain magnifications or on some devices, including the spacing between text elements and line spacing within the same paragraph, all of which are currently set by default to meet requirements, and are percentage based.
Do not use headings, all caps, or change text sizes to bring attention to text, instead use text styles. Even though the website allows you to change text sizes, please don’t.
Text Color
The default color for all text is black, with the exceptions of links, which auto-color to be compliant. All text is required to have a specific contrast ratio in relation to the the other website elements that are around it. This contrast ratio changes based on text size, but it’s safe to assume it should be at 4.5:1.
Even though the website allows you to change the text’s colors, please don’t, as this could limit people with visual disabilities from accessing the content.
Text Styles
If you need to bring attention to text, use either bold or italic lettering, or both together. There is a lot to cover in this section, so here’s a list to make it as brief as possible. The subject of each list item is bolded.
Underlinesare reserved for links. If it’s not a link, it shouldn’t be underlined.
Why this matters: Since the dawn of the internet, and underline as indicated an action item. Assistive devices and their users rely on this indication to navigate websites.
All caps are for acronyms only.
Why this matters: Words in all-caps are literally translated as yelling (and some devices will yell), unless it’s a known acronym.
Text alignmentshould remain left-aligned. It’s okay to have text centered on the screen, as long as that text is left-aligned in the center of the screen.
Why this matters: Text that breaks out of left-alignment can be both distracting and confusing for focus-impaired individuals. It breaks visual flow, and in some cases it makes the text impossible to read.
Fonts should be simple and easy to read. The default fonts match both of these criteria. Styled and designer fonts, while fun, can be difficult to read, especially when resized.
Why this matters: The simplest sans-serif and serif fonts reduce distraction, most devices also come with these fonts pre-installed, so it minimizes the chance of design errors.
Acronyms and Simple Phrases
Keep acronyms to a minimum. Acronyms are confusing for most people unless they’re well-known, like NASA (National Aeronautics and Space Administration) or LOL (laughing out loud), but even then, they still can be confusing. Acronyms should always be expanded on first use. If it’s an acronym specific to your school or business, or is not well known, then letters should be separated with periods, for example, P.B.L. (Proficiency-Based Learning).
Why this matters: Assistive devices try to phonetically read all words. Words in all-caps can be mistaken for yelling. Using periods between letters indicates to all devices that it’s an acronym, and forces them to pronounce each letter individually.
Use simple words and phrases. If you use words that require users to look up their meaning, then you also have to provide a glossary, or a definition of the word right after its use.
Why this matters: More complex words and phrases are harder to translate, look up, and digest for non-native English speakers, as well as for those who use accessible devices.
Text Organization
Headingsare reserved for topic organization.
Why this matters: Assistive devices use headings to quickly navigate website content based on topics.
Break up text into smaller pieces. This can be done using headings, smaller paragraphs, and lists.
Why this matters: It can be difficult for anyone, particularly if you have a visual or mental disability, to focus and chew through a large wall of text. Short, clear sentences and paragraphs are the way to go.
Lists and Tables
Use listswhen appropriate. Preface lists and follow them up with relevant, text-based information.
Why this matters: Lists make information easy to consume, and allow people to find things quickly, but they can be confusing if not explained, or left dangling at the bottom of the page.
Tables should be avoided if possible. For some things, like number data, they’re perfect. Most text, however, can be re-designed to work from top to bottom. It’s important that a table can be navigated in a way that makes sense (top-to-bottom or left-to-right) dependent on the data. If using a table, be sure to use clear headers. TablePress is provided as a functionality, and meets ADA standards.
Why this matters: If table data is being read out loud, it’s vital that the data reads in a clear and logical manner, and doesn’t skip around to various cells without reason.
Numbers
Phone numbersshould be separated with hyphens. A phone number separated by hyphens has no spaces or other formatting: 385-555-5555. When hyphens aren’t going to work, use the old-school parentheses instead: (385) 555-5555. Using a period to separate phone numbers, while stylish, causes assistive devices to mis-translate the purpose, as periods are also used to indicate IP addresses, locations, and more.
Why this matters: Hyphens tie the entire number together, indicating to assistive devices that it’s a singular group, and indicates to the blind that a number can be called.
Currency and Other Numbers should be designated with the appropriate symbols such as the dollar sign, commas, and periods.
Why this matters: This lets assistive devices use the correct designations and terms instead of simply saying a string of numbers back to back from which the user then has to determine meaning.
That’s a lot to remember, and when thought of as a whole may seem a little overwhelming. However, as long as you leave things at their default and avoid as many complexities as you can you’ll be just fine, and so will your patrons. Accessible text will take a little extra effort on your part at first, but in no time, you’ll find it second-nature.
You must be logged in to post a comment.