Tips, Tools and Strategies

For Accessible Websites

Screen Readers, Keyboard Friendly

Easy to Read, Alt Text, Fonts, Colors, Buttons, Links

Updated: November 8, 2021
By: RSH Web Editorial Staff
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 its laid out well and has plenty of information. However its 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

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 hyper-links, 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 Headlines (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

security information

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 in a logical way 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 less and describe the image in a natural way. For example if you used a 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

Dont 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 become underlined or changing color when hovered over

domain hosting resources

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 a 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. Other 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 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.
Or if you need specific help with your account, feel free to contact us anytime
Thank you

Tweet  Share  Pin  Tumble  Email