Accessibility is a critical consideration for modern web development, and yet, most designers, website owners, and users struggle to describe what, exactly constitutes “accessible” and how this quality can be promoted with today’s websites and applications.
The World Wide Web Consortium (W3C) promises to resolve this concern with help from the Web Content Accessibility Guidelines (WCAG) 2.0. These provide specific details intended to make the web as accessible as possible. The goal: to improve access not only for users with disabilities such as vision or hearing impairments but also, with the intention of boosting usability across the board.
While all elements of WCAG 2.0 deserve attention, its first section (known as “Principle 1” or “Perceivable”) intends to make user interfaces and information on web pages presentable so that all users can perceive these elements. Depending on the content or a specific user’s disabilities, perception may involve three of the main senses: sight, hearing, or touch (otherwise referred to as tactile).
In all likelihood, your website holds significant room for improvement in terms of both accessibility and general usability. The Perceivable section from WCAG 2.0 can provide specific suggestions for making your website more welcoming and inclusive to a diverse array of visitors. To help you determine where you fall short and how you can improve, we’ve highlighted the essentials from WCAG 2.0’s Perceivable category below:
While text forms the basis of most webpages, non-text content such as photos, logos, or videos is often added to provide a richer experience. If not adapted, however, this content may be out of reach for some users, leaving them with an inferior web experience.
According to WCAG 2.0, non-text content should always also be available in electronic text. This is presentation neutral, so it’s capable of being rendered in visual, auditory, or even tactile contexts. This ensures that all information is presented in a way that best meets each individual user’s unique needs.
Examples of solutions that can overcome the limitations of non-text content include the following:
- Text alternatives that describe the purpose of CAPTCHA or other security devices, that allow people with various disabilities to prove they are human at login or when submitting a form.
- Links to transcriptions can accompany links to audio recordings.
- Text alternatives to help visually impaired users understand the context of images embedded into a webpage.
- Text descriptions for sound-based e-learning applications that rely on buzzers or chimes to indicate correct and incorrect answers.
- Descriptions identifying bar charts or graphs that describe any key takeaways the visual may provide. If possible, this information should be conveyed in a table.
Time-based media can be defined as anything that consists of video, slide, film, audio or computer-based content where the experience unfolds over time.
Synchronized and time-based media should be coordinated with other formats or interactive components. Otherwise, information from audio-only or video-only content that has been prerecorded may not be accessible to all users. Examples of potentially problematic content include podcasts, live recorded events broadcast online, or time-lapse videos with no sound.
If nothing else, transcripts should be offered as viable alternatives to help users make the most of any audio-only or video-only content that is pre-recorded. Beyond this, captions, audio descriptions, and equivalent sign language videos can be helpful. If issues with video timing make it impossible to furnish useful audio descriptions, alternate versions with inserted pauses may be needed.
Users should be capable of consuming content in several ways. How exactly, content is used will differ somewhat based on personal needs and preferences, but several options should be available to allow all website visitors to choose approaches that work for them.
The main components from this portion of the Perceivable guidelines include:
- Structure. This quality references how the various parts of a given webpage are arranged. It also covers the organization of several web pages within a greater website.
- Presentation. This describes how content is rendered or displayed. It should take a form that is capable of being perceived by all users.
WCAG 2.0 often references the concept of programmatic determination, which means that semantic structure is included in HTML markups. As such, this material can easily be transformed into various formats to be perceived with multiple senses.
When no means of programmatically determining information is available, text descriptions of all relevant information should be provided. Such text should be situated near any content it is responsible for describing. Still, under WCAG 2,0, a programmatic determination is strongly recommended whenever it is supported by available technology.
Key tools and techniques for abiding by this guideline include text labels, ordered lists, and image alt text. It’s also important to maintain a logical reading order that can be made obvious via headings or paragraphs. This will make each page easier for all types of users to navigate.
Don’t forget to incorporate instructions that can be followed in several different ways. For example, directions to swipe in a certain direction may be problematic when users cannot physically swipe or have devices that do not support touch. In such situations, keyboard alternatives should be provided.
Default information displayed on webpages should be easy to see and hear for users with disabilities. Many barriers exist, but a lack of distinction between foreground and background information is among the most common and problematic.
How this issue is resolved depends, in part, on whether the content in its original form is primarily visual or auditory in nature. With visual content, foreground and background information can be distinguished if enough contrast is built into the page’s structure. With audio, main sounds must be quite a bit louder than background sounds.
In general, WCAG 2.0 cautions against being too reliant on color for conveying important information. Color contrast, however, is worth considering, with WCAG 2.0 recommendations highlighting the need for a contrast ratio of 4.5:1 between text and its background.
Responsive design can play into distinguishable content, as text size may be increased. When this occurs, a responsive page will ensure that the content remains accessible, even if the text’s size needs to be doubled.
Make Accessible Content a Reality with Vinci Digital
Even the most knowledgeable developers, designers, and content creators struggle to understand the specifics of web accessibility. At Vinci Digital, we aim to bring clarity to this concept so that both businesses and website visitors can reap the rewards of an accessible digital environment.
Our team can help you get a better sense of what it means to be accessible and what it will take for your website to achieve the acceptable “level AA” adherence to the Web Content Accessibility Guidelines.
Contact us today to learn more about our web design services and other solutions for promoting web accessibility in your SEO and other digital marketing efforts.
PS: What changes have you implemented to make your web content more accessible? Are you planning any additional adaptations to improve access for all website visitors? Comment below to let us know.