Designing for Accessible Websites

Screen Readers, Keyboard Friendly, Links
Easy to Read, Alt Text, Fonts, Colors, Buttons

Tips, Tools and Strategies

Updated: May 6, 2022
By: RSH Web Editorial Staff

Contact Us

Accessible Websites

Designing Tips For Accessible Websites

For business owners, a website can make a huge difference when it comes to sales and interacting with customers. It is crucial to make sure it is laid out well and has plenty of information. However, it is imperative to ensure that your site is also accessible to people of all abilities, which will require some changes. Fortunately, there are several simple things you can do to tweak your website. and make it great.

A poor website design and its development can make interaction difficult, or even impossible, for people with disabilities. There are millions of people with disabilities who rely on sites being accessible. Take the time to understand their needs. Some of these disabilities can include age related impairments. Deaf or blindness. Cognitive. Learning and neurological disabilities. And the visual impairment.

Make it Keyboard Friendly

This step might just be the most important. Simply put, for a site to be accessible, it must work without the use of a mouse. Many Assistive Technologies rely on keyboard only navigation. It must be possible to use all of your Website's major features via a keyboard. This includes accessing all pages.

The most common way of navigating using a keyboard is with the Tab key. This will let you jump between areas on a page that can have “Keyboard Focus” Which includes hyperlinks, drop-downs, contact forms and more.

Screen Reader Compatibility

Screen readers convert digital text into speech and aid the user in navigating with the keyboard. For a screen reader to follow the hierarchy of the website, Semantic Markup needs to be used. Web elements such as HTML tags conveying some information about the type of content contained between the opening and closing tags. This can include header tags: (h1, h2, h3), Regions/Landmarks, lists: (ul, ol, and di). Emphasized or special text, bold, strong, code, abbr, blockquote.

See our List of available Screen Readers below.

Make it Easy to Read

It is crucial to make sure not only your customers but people with disabilities can read your web pages. Hard to read fonts, graphics, and logos can distract from your message and leave customers confused about your services or products. You could consider hiring a Content Writing Expert or a good Branding Service that will boost your company's visibility and make your website more visually appealing. This is a great way to make each page easy to read for people of all abilities, including those with visual impairments. Take a look at the most recent Regulations for Accessibility Compliance to ensure you are on the right path.


Captions with Videos

All videos with voice over audio should utilize captions to visually convey the information. Having Video on your Website can be beneficial when it comes to building a relationship with your customers. Not only will this help people who are deaf or hard of hearing. But provide information to users who watch videos without sound. According to a 2019 study, Verizon Media found that 80% of viewers are more likely to watch an entire video when captions are available.

If you use a platform like YouTube to upload video content, you can find simple editing tools that will allow you to add captions. It is also important to understand the distinction between captions and subtitles.

Make Forms Accessible

Screen readers should be able to tab through any type of form logically, using the keyboard. Form fields should be labeled and easily understandable. Place "Reminder Text" or "Text Labels" near a field that needs input, not inside the field. This allows a user to fill out the form more easily if they forget what the input field is.

A Screen Reader helps visually disabled individuals by using speech or braille (or a combination of both) to convert text, images, and buttons on a site.

Add Alt Text to All Images

Alt text (alternative text) or alt tags is a phrase or word used to describe the image. Adding alt tags informs the user as to what the image is in case they cannot see it. Alt tags are best if 12 words or fewer, and describe the image in a natural way. For example, if you used an image of a man with a cane, you would want to use: “man-with-cane” and not “handicapped-person”.

Make Fonts Legible

It is recommended that you use at least 14px font for body text. This ensures more users are able to read through your website. Google recommends that font sizes are larger than 16px for SEO and usability purposes.

Make Colors Work

Don't forget that Colors are very important in making text easy to read. From content to captions, it is important to make sure the words on your site are not displayed in bright contrasting shades. Black and white is typically the best way to go. Break up large chunks of text into smaller, easier to read passages. Which is helpful for individuals who have learning disabilities.

Buttons and Links

A 3:1 color contrast should be used for buttons, links, icons, hover and more. A high contrast ratio ensures that anyone will be able to see the change and recognize the object as a link. WebAIM has a great resource for checking color contrast and to see the difference. Links should also have an additional distinction. For example, show an underline or change color when hovered over.

Business Hosting

Avoid Automatic Media and Navigation

Automatically playing media files has been annoying for most all Internet users. As annoying as it can be to have music or videos start when a page loads. This can be an even bigger issue for people with disabilities. Trying to figure out how to turn off the media can be difficult when using a screen reader. Others could simply be confused or even frightened by the sudden noise. Avoid including elements that start without the user first prompting them.

It is also best to avoid automatic navigation such as Carousels and Sliders. This can be incredibly frustrating if the viewer needs more time to absorb all the information before moving on to the next slide or section.

Create Content With Accessibility in Mind

Finally, we come to the Content of your website. It is hugely important you should bear the same considerations when creating content. Pay attention to relatively minor things. Always fully writing out acronyms. Make sure you give all your links unique descriptive names and add anchor text where needed. Additionally, white space is useful for creating clear relationships between headings and paragraphs.

While the content of your site is important when it comes to accessibility. It is also a good idea to think about what your customers will have access to. Some disabilities make using a mouse difficult or impossible. You will want to ensure that they can use keyboard navigation to move through the website without trouble. Keep this type of navigation in mind when designing Accessibility Apps for your business as well. URLs, widgets, anchor text, and dialog boxes are just a few of the elements on your site that should be accessible with the keyboard.

Make Your Design Responsive

The goal of a responsive website is to function well on all devices. Across a broad range of platforms and whether you are browsing from your PC, your laptop, your tablet or your smartphone. Responsive web designing techniques have only been getting easier, and newer advancements should make this process quicker and more enlivening for future designers.

Screen Readers

Non-Visual Desktop Access For Windows. Email, shop, navigate social media, and operate many applications including music players and Microsoft programs. You can use a braille display along with the speech synthesizer, which is available in numerous languages. Download NVDA onto a USB drive.

WebAnywhere Check emails, read documents, surf the web, and much more. You do not need a specific operating system, computer, or browser to use WebAnywhere.

Orca Linux operating system. One of the most versatile programs available. Orca is compatible with many refreshable braille displays and allows you to operative many of Linux’s applications.

BRLTTY Linuxs operating system. It operates mostly through a refreshable display. In recent years, BRLTTY has integrated some text-to-speech features.

Apple VoiceOver For Mac operating system and is built into all of Apple’s tablets, phones, desktops, and laptops. It will describe images and graphics on the screen, allow you to magnify your screen, explain what is happening in real time, with customizable features.

Screen Reader Chrome Web Store The Chrome Screen reader extension is fully featured. This extension specifically works within the Chrome browser to read content aloud.

NVDA - Microsoft Store. A free screen reader which enables blind and vision impaired people to independently use Windows. It reads the text on the screen in a computerized voice. You can control what is read to you by moving the cursor to the relevant area of text with a mouse or the arrows on your keyboard.

JAWS From $95. For Microsoft Windows, that allows blind and visually impaired users to read the screen either with a text-to-speech output or by a refreshable Braille.

Dolphin Screen Reader $795 Capabilities such as a customizable human sounding text-to-voice synthesizer. Special cursor that allows you to find graphics and text. Text-to-speech and a braille display.

Cobra From $749 to $849 Cobra is compatible with several braille displays which allows you to draft emails, surf the web, computer applications, screen magnifier.

We welcome your comments, questions, corrections and additional information relating to this article. Please be aware that off-topic comments will be deleted.
If you need specific help with your account, feel free to contact us anytime
Thank you

Tweet  Share  Pin  Email.

More Articles Of Interest

Whether you’re a small business, freelancer or just starting out, we can help you get up and running with our website hosting solutions