Pages can come in many shapes and sizes. Some are available to all users via the internet, and others are offered only to select individuals, like a company intranet. With so many options for elements, languages, and customization, it is important to think universally during all phases of the design and development process. Some users may not be able to see the content, others may not be able to hear it, and some may not use input devices like a mouse. When we think of all users, we can ensure universal accessibility on any page, no matter how complex or unique.
When you are finished, be sure to assess your learning by taking the Pages Quiz.
For this exercise, try using one of the three options for magnifying web content from the options below. We recommend using your browser settings as it is the easiest way to reset when you are done with the exercise. Notice how the content shifts and reorganizes to fit the screen and how the content and functionalities remain, no matter what the page size is set to.
Click the three dots in the top right corner of your browser to open the list of browser options. About halfway down the list, you will see an option called "Zoom" with a percentage off to the right side. Use the plus and minus controls to increase or decrease the magnification of the current page.
Using your keyboard, press and hold the control key while pressing the plus key to increase magnification or the minus key to decrease magnification. To reset your magnification back to the default view, hold the control key while pressing the zero key.
The accessibility features inside of the Windows settings can be used to customize settings to the user’s preferred text size. This slider ranges from text that is quite small to text that is quite large, but it can be set anywhere along the slider. The text above the slider displays how large the text will be once the settings have been applied.
For users with low vision, magnification tools can be the difference between being able to engage with web content or not. And with so many ways to achieve magnification, it is vital to ensure the page is responsive and can be scaled in size up to 400% magnification.
For this exercise, look at each of the three links below and try to determine where they will take you if you interact with them. Be sure to think about the design of the link, the colors used, icons, text, and fonts. Next, follow each of the links and see if they lead you to where you predicted they would.
Hyperlinks, commonly called links, are a fundamental part of digital content. Broken links are loosely defined as content that can’t be found or accessed by a user for various reasons. These can include links to pages or files, like documents or images.
Since links are a staple, they should be carefully planned out and designed in ways that are accessible to all users. Using sufficient color contrast, providing descriptive text that shows the user where the link will go, and maintaining the link to ensure it stays working are all crucial components that need to be kept in mind. Be careful when using links in instructions or descriptions as links are often designed to look like buttons but are still links. As a general rule of thumb, buttons control on-page content, and links take you to a new location.
For this exercise, scan the following four (4) paragraphs while noticing the different uses of color and underlining to convey a link. While the text in each paragraph is identical, there are differences in the visual elements of how the links are conveyed.
After glancing at each paragraph, decide which contains the most easily identifiable links.
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making web content more accessible. Following these guidelines will make content more accessible to a broader range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make web content more usable to users in general.
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.
Pages may include a wide range of elements, including headings, paragraphs, images, links, buttons, videos, podcast players, and forms. Choosing and designing each element in a way that makes sense visually and structurally is important. Remember, not all users can see the design and may use assistive technology like a screen reader that turns the content into audio. How pages are built, formatted and styled can affect all disabilities, so thinking about a broad range of users and their abilities when crafting new pages is essential.