Creating a Website Accessible by All
The increasing interactivity of websites has opened the door to new and exciting things. From 3D models to animated components, there’s no denying there are many amazing features you can add to make a user’s experience fun and smooth. With the many advancements in web design, website owners still need to be conscious of their site’s accessibility. It’s important to ask, could my site be navigated without a mouse? How does a screenreader read my website? Would any information be lost if I were a colourblind user?
What does it mean for a website to be accessible?
Put simply, a website is considered accessible when its content is available to everyone, regardless of any visual, auditory, cognitive or motor impairment. This can mean multiple different things, from having a colourblind conscious design to intuitive keyboard access.
What are the things to consider to ensure your website is accessible?
Conscious Colours
Colours can be incredibly important when conveying information to a user. Whether it’s alerting something is a link or highlighting importance through colour to draw our attention to it. However, not all users view colour in the same way. Those with Deuteranopia (roughly 6% of male and 0.1% of female populations) have a difficult time distinguishing between reds and greens. If a site is reliant on certain colours to convey different meaning it can be lost on some users.
Adding textures to colour labels is another way to ensure colour blind individuals can obtain the same meaning. Trello offers a colour blind friendly mode for their labels which offer distinct patterns to differentiate them.
Spacing
Many users with poor vision or low vision will use the browser zoom features to view text and elements on the page. When a website is cluttered or has restrictions on specific element sizing, words can cut off or images cropped, and thus their meaning becoming lost. Ensuring your site has enough space to accommodate enlarged items is crucial. When a browser zoom is used, the text begins to overflow the container and the crucial information is lost.
Visual Alternatives
Screen Readers provide a linear stream of information to visually impaired users and provide different options keyboard commands depending on which elements they are currently interacting with. Meaning, if an element on a website is created as a button with specific tags, certain controls to click the button are made available. Screen readers rely on alternative text to convey the information about images and visual components of a site. Having descriptive alternative text gives users an idea of what the image is. You can even find alternative text in Medium posts.
Logical Layout & Keyboard Controls
When you tab on a text field, where do you go? Does this follow the natural flow of your website? For some users, they are only able to use a keyboard or an aid that performs keyboard shortcuts to navigate the sight. When controls are not tab focusable they can be missed entirely by users only using a keyboard. Consider an individual with quadriplegia, she uses a speech controller which allows her to navigate a site as if she was using a keyboard. When attempting to purchase a product, she finds the button to purchase is not keyboard accessible, she is now stuck unable to proceed and must search for alternative sites. Ensuring sections of a site are keyboard accessible is essential for many users.
Additionally, it can be incredibly jarring when one tab leads the user to a completely different section of a website. Considering the flow of interaction and the steps users take when navigating a site is paramount. It doesn’t take much for users to get frustrated and simply move to somewhere that offers a better experience for them.
Implementing information in logical fashions also allows screen readers to convey proper meaning. If there is no logical flow to the information, anything thats relayed will not make sense to a user who cannot see it. This can be anything from proper table structure to ensuring a popup is known to a screen reader.
Captioning
Whenever there is an auditory component whether it be an embedded podcast or a video, providing captioning or a transcript allows those who are deaf or hard of hearing to view the content. This is also useful for users who There are multiple tools that work to auto generate captions and transcribe audio to make it easier than transcribing by hand.
Avoid Jarring Transitions
When scrolling through a site, if theres a surprise animation it can be incredibly jarring for some users. Additionally, if there’s any intense flickering in the animation if its too fast, it could induce a seizure for some users. This could be from colours flipping or elements moving too fast which causes screen to flicker. This can be avoided by testing any animated object thoroughly, checking the different ways the animation can be triggered to prevent flickering.
As a user goes through a site they can encounter different content types, be it videos or audio clips. It’s important to avoid transitions like autoplay features, which abruptly play sound without indication from the user to do so. Every interaction within the website should be driven by what the user wants. For instance, sound should only be present if a user requests it. Using captioning methods mentioned previously allows content to taken in without disrupting user experience.
Ensuring Accessibility
To ensure an accessible solution, intention must be present throughout the initial stages of design and implementation, and must carry forth throughout the project. Accommodating accessibility should not be a barrier to complex application, but rather an asset for the site to be more user friendly. Through careful design and development accessibility accommodation becomes natural and can be integrated into even the most complex of designs.
If you are interested in ensuring your idea is accessible, visit VizworX and check out the custom solution support.
