is now 
Recently, I got an opportunity to design & build a single-page website purely for Visually Impaired users. Even Though, I have used WCAG 2.1 AA guidelines to some extent. The experience was new as a large majority of the users are gonna be Visually Impaired.
Since 2018, the WCAG 2.1 AA guidelines exist. These are the international standards when it comes to web accessibility.
“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”
TIM BERNERS-LEE, W3C DIRECTOR AND INVENTOR OF THE WORLD WIDE WEB
For Designers & Developers, it is essential to understand how blind people use the web, and how we can build websites that are both operable and understandable by people who are blind. Web accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web.
According to the World Health Organization, an estimated 2.2 billion people live with vision impairment across the globe. At Least, 1 billion have moderate to severe vision impairment.
These are some of the realities of people living with sight loss in the modern world:
- Almost half of the blind and partially sighted people feel ‘moderately’ or ‘completely’ cut off from people and things around them.
- Older people with sight loss are almost three times more likely to experience depression than people with good vision.
The Principles of Accessible Website
There is an international WCAG standard, which stands for Web Content Accessibility Guidelines. It provides for the following basic principles, which each digital product must comply with:
- Everyone should be able to perceive the content
- Everyone should be able to manage content
- Everyone should be able to conceptualize content
Web accessibility is a legal requirement in many countries. In the U.S., the Workforce Rehabilitation Act of 1973 requires that information and communications technology provided by federal agencies is accessible to people with disabilities.
If users with impairments are unable to access important information because your website isn’t accessible, they can sue your company for digital discrimination. In 2018, approximately 2,250 lawsuits were filed in federal court in the U.S. alone.
How can you tell if a website is accessible to the blind?
You can test your website for accessibility for the blind yourself.
The main points you should check
1. Check whether your images have the appropriate alternate text
2. Make sure your headings are properly structured
3. Test whether users can navigate your site using the TAB key
4. Check if coded skip links are working properly
You can use automated accessibility testing tools like this:
What are the most popular types of assistive technology for using the internet?
In November 2016, Gov. UK published the results of its assistive technology survey, in which the Government Digital Service asked users about what devices, web browsers, and assistive technology they used to access GOV.UK. The online survey ran for 6 weeks. Where they have received 712 completed surveys back, all of whom are from people using some form of assistive technology.
Here is a summary of the results.
How to Make a Website Accessible for the Blind and Visually Impaired?
1. Hierarchical Structure
This is a best practice that benefits all users. There are a number of ways in which screen readers that support scannability allow users to skim pages to get an overall impression of a page’s content.
Screen readers will highlight a list of headings, subheadings, and the page’s structural makers. It permits screen reader users and keyboard-navigating users to try the page’s different sections and focus on other essential elements of the page.
Remember to include proper tags, like <h1><h2><h3><h4><h5><h6> for title level heading. Without headings, this method of skimming through content is virtually impossible.
2. Keyboard Functionality
Keyboard shortcuts can make navigation for visually impaired users far easier. A mouse is not useful for navigating because it requires hand-eye coordination. This is especially true for users who are blind and use screen readers to surf the Web.
For people with low vision, keyboard commands make it possible to navigate a site without having to strenuously focus and follow a mouse cursor across the screen.
So, the web content should permit keyboard navigation. These are the standard shortcuts that one should test with a website via the keyboard.
| Interaction | Keystrokes | Notes |
| Navigate to interactive elements | TabShift + Tab – navigate backward | Keyboard focus indicators must be present. Navigation order should be logical and intuitive. |
| Link | Enter – activate the link | |
| Button | Enter or Spacebar – activate the button | Ensure elements with ARIA role=” button” can be activated with both key commands. |
| Checkbox | Spacebar – check/uncheck a checkbox | Checkboxes should be used when one or more options in a group can be selected. |
| Radio buttons | ↑/↓ or ←/→ – select an option. Tab – move to the next element. | Radio buttons should be used when only one option from a group can be selected. |
| Select (dropdown) menu | ↑/↓ – navigate between menu optionsSpacebar – expand | You can also filter or jump to options in the menu as you type letters. |
| Autocomplete | Type to begin filtering↑/↓ – navigate to an optionEnter – select an option | |
| Dialog | Esc – close | Modal dialogs should maintain keyboard focus. Non-modal dialogs should close automatically when they lose focus. When a dialog closes, the focus should usually return to the element that opened the dialog. |
| Slider | ↑/↓ or ←/→ – increase or decrease slider valueHome/End – beginning or end | For double-headed sliders (to set a range), Tab/Shift + Tab should toggle between each end. In some sliders, PageUp/PageDown can move by a larger increment (e.g., by 10%). |
| Menu bar | ↑/↓ – Previous/next menu optionEnter – expand the menu (optional) and select an option.←/→ – expand/collapse a submenu | A menu bar dynamically changes content within an application. Links that utilize Tab/Enter are NOT menu bars. |
| Tab panel | Tab – once to navigate into the group of tabs and once to navigate out of the group of tabs↑/↓ or ←/→ – choose and activate the previous/next tab. | This is for ‘application’ tabs that dynamically change content within the tab panel. If a menu looks like a group of tabs but is actually a group of links to different pages, Tab and Enter are more appropriate. |
| ‘Tree’ menu | ↑/↓ – Navigate Previous/next menu option←/→ – expand/collapse submenu, move up/down one level. | |
| Scroll | ↑/↓ – scroll vertically←/→ – scroll horizontallySpacebar/Shift + Spacebar – scroll by page | The space bar will, by default, scroll the page is an interactive control that allows space bar input is not focused. Horizontal scrolling should be minimized. |
Keyboard Accessibility: WebAim
3. Provide sufficient contrast using colors and textures
Test colors to make sure they have the proper contrast ratio for readability, using tools such as contrast checker, colour contrast, or contrast section under the WAVE Accessibility Toolbar.
For example, WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (i.e., 14 points and bold or larger, or 18 points or larger). Color contrast checkers typically check for compliance with this standard, so it might be a good idea to bookmark the standards and guidelines WCAG has laid out.
4. Proper Labels, Values, and Rules
While testing web Accessibility, we should ensure having proper HTML labels, values, and roles that change when needed. Screen readers can let the users know what an element is or how it works with such labels and roles.
In most cases, the aria-label attribute solves these issues as it defines a string value that labels an interactive element.
Takeaways When Designing Websites for the Blind or Visually Impaired
One out of four internet users are physically disabled; here, having a site accessible to all would be beneficial for your business apart from being socially responsible.
There is much that remains to be done still in order to make Web experiences more accessible for people with visual disabilities. Do consider integrating the aforementioned into your workflow. Let’s make accessibility a priority in the design & development of modern websites. A site accessible to all would open up our products to a whole new audience.
