Millions of Internet users rely on websites being accessible regardless of their particular situation. The topic of accessibility rarely crosses the minds of people without differing needs which makes it even more important to address the issue of a fully accessible Web. Web accessibility simply means creating digital resources that everyone can use including people with disabilities and conditions that may impact how they utilize the Internet.
To ensure that as many visitors as possible can access your website, the design needs to incorporate strategies that allow people with visual, auditory, physical, speech, cognitive, and neurological disabilities to interact with the site. Many people utilize assistive technologies such as screen readers, speech recognition software, Braille terminals, and alternative keyboards to access the Internet. The key is to understand which elements that can make it difficult or impossible for a site to be used by various people. Then you can offer a site that gives visitors the flexibility to access your content in whatever they need or want to.
Conditions That Can Impact How People Use Websites
Photosensitivity: Conditions such as epilepsy can cause seizures that are often triggered by flashing lights.
Motor skills: Physical conditions that cause difficulty moving parts of the bodies, like making precise movements to use a mouse.
Visual: Conditions that cause, partially or totally, the inability to see or perceive color contrasts.
Aural: A reduced ability to hear
Cognitive: Conditions or injuries that impact cognitive abilities such as reasoning or perception.
Universal Design
Universal design blends usability principles with accessibility standards to create technology that everyone can use. This type of design takes into consideration people’s differing needs with the goal of eliminating barriers and improving access for all users. Universal design creates products that are flexible and adaptable to various people’s needs and preferences. It provides accessibility through different technologies like mobile devices and assistive technology resources.
Key Principles of Accessible Design
Include relative alternative text (alt text): Alt text helps people who rely on a screen reader to have the content of the website read to them. Exactly as it says, alt text attaches a textual alternative to pictures, images, and other non-text content on a web page.
Purposeful document structure: Structural elements such as headings and lists help to provide meaning to a web page and can also help to facilitate keyboard navigation within a page for visitors who are unable to navigate using a mouse or touchpad.
Data table headers: Tables used to organize tabular data should have appropriate table headers included. Individual data cells should be associated with their respective headers. This organizational strategy makes it easier for visitors using a screen reader to navigate and comprehend the data in the table.
Form completion and submission: Form elements such as checkboxes, text fields, and so on should have a label that is associated with the correct form element. It is also important to allow users to recover from errors in an initial submission with relevant guidance available to fill in missing information or correct improperly formatted information in any field.
Sensible links: Links should make sense when the link text is read by itself. Some screen reader users choose to read only the links on a web page so it is best to avoid phrases like “click here” and “more”.
Media captions or transcripts: Provide captions or a full transcript for any videos and live audio featured on your site.
Accessibility of Non-HTML Content
Non-HTML content like PDF files, Microsoft Word documents, PowerPoint presentations, and Adobe Flash content should be as accessible as possible. Another option is to provide an accessible alternative such as a PDF document that includes tags to make it accessible to someone using a screen reader.
Other strategies:
Allow users to skip repetitive elements: Provide a way for users to skip navigation or other elements that repeat on every page. An element such as a link at the top of the page that says “Skip to Main Content,” or “Skip Navigation” works well.
Do not rely on color to infer meaning: Colors may enhance comprehension but should not be used exclusively to convey information. People who are colorblind or relying on a screen reader will be unable to access that information.
Clear and concise content: Use easy to read fonts and organizational features such as headings and lists to make content easier to decipher. Use clear and concise language to communicate information or make a point.
Things You Can Do to Your Website Now
1. Make Your Site Keyboard-Friendly
In order for a website to be accessible, it needs to work without the use of a mouse. A number of assistive technologies rely on keyboard-only navigation so it should be possible to use all of the major features – links and content – on all pages of your site with nothing other than a keyboard. To assist your efforts, WebAIM provides a guide for keyboard accessibility design.
2. Ensure All Dynamic Content is Accessible
Dynamic site content is the page content that can change with the page reloading. To make the content accessible, the site needs to inform assistive tools of any changes or shifts in content. ARIA landmarks are one way to do this. ARIA landmarks are tags which are added to content to clearly define it on the page and enable screen readers and similar devices to understand the content as it changes. More flexible and efficient than invisible links that let users skip menus, ARIA can help make navigation more straightforward by letting users skip directly to specific content.
3. Include Alt Text on All Images
As we mentioned earlier, including alt text on pictures and images makes them accessible to technologies such as screen readers. An additional bonus is that alt text also allows images and pictures to be “read” by search engine crawlers meaning that these descriptive summaries will also help improve your site’s SEO.
4. Choose Colors Purposefully
Colors that are difficult for people with color blindness comes to mind most often but in this case, what is important is to select colors that contrast well. This will ensure that various elements on a page can be distinguished from one another without colors bleeding into one another or distorting the text in any way. There are a number of online resources that let you test color combinations and find groupings that will effectively display your page content. Contrast Checker provides a real-time score and also lets you switch to a monochrome display to better understand how well a color combination will work.
5. Structure Content Correctly
Structure your content with the use of headers to improve the flow and make your content easier to interpret and understand. Headers and sub-headers also will also make it easier to provide in-page navigation.
6. Design Forms to be Accessible
Carefully designed forms are essential to accessibility. Ensure that each field is clearly labeled with the label placed directly adjacent to the corresponding field. Any relevant instructions or information should be presented clearly so they are not only easy to comprehend but also accessible to someone using a screen reader.
7. Use Tables Only for Tabular Data
If you are in the habit of using tables to present a more interesting layout of plain text or to offer lists in multiple columns, it is best to find other ways to design your content. Tables should be reserved for displaying data. They should also be created as simply as possible with clear and concise headings.
8. Avoid Auto-play Media and Automatic Navigation
While many Internet users simply find files that automatically play annoying, that practice, as well as automatic navigation, are both accessibility issues. Carousels and sliders can be frustrating for site visitors using screen readers or similar resources as they may not have the time they need to absorb the content before things move on to the next slide. Sudden noises from auto-play media can be disconcerting and be difficult to turn off via a screen reader. The best practice is to include page elements that prompt the user to move between selections or to play media files.
9. Be Mindful of Accessibility when Creating Content
In addition to designing your website for accessibility, there are things you can do to create content that is accessible. Be in the habit of writing out acronyms, giving in-page links their own, descriptive names, and using anchor text. For more tips on creating approachable and readable content, see WebAIM’s site.
IN CLOSING
Accessibility focuses on how differently-abled people access or benefit from a site, system or application. As you design your site and, subsequently, create content, keep in mind the principles of universally accessible design. By making your website accessible, you ensure that all potential users will have a quality user experience as they access the content on your site. Your visitors will appreciate your efforts and you are likely to see increased traffic and conversions, too.
The experts at Strategy Driven Marketing understand the importance of thoughtful and purposeful website design as it applies to accessibility and overall user experience. We have extensive experience in the development and creation of engaging websites for organizations of all sizes and across a number of industries. SDM can help you offer an accessible, effective and engaging website. Contact us today – let’s get started!
Cover photo by rawpixel.com from Pexels