10 Easy Improvements to Boost Your Web Accessibility

Common Non-Accessible Requests

1. Auto-rotating banner 

We all know auto-rotating banners look super snazzy, and give a level of elegance and modernization to the website. Unfortunately, it often rotates faster than a screen reader can interpret it. This results in not only a loss of information for the user, but also confusion as the screen reader will suddenly interrupt what it was reading on the first slide, and begin interpreting the second. This is primarily an issue when the banner contains any level of text, or is programmed to be detected by a screen reader.  

2. Pop-up alerts

Emergency alerts are important, and what better way to express importance than a pop-up on the homepage that draws the user's attention exclusively towards it? Unfortunately, pop-ups create complications with accessibility tools' ability to accurately interpret and inform. Pop-up alert concerns also create issues for users without disabilities, as they can be viewed as interrupting and frustrating, and if there is a delay in the pop-up a user already clicking around may accidentally clear the alert before noticing it, and have difficulty re-locating it. 

3. Scrolling iFrames

iFrames are a great tool for embedding information from other sources onto your website. While most key accessibility considerations are made at a developmental level, a common mistake made and requested is for iFrame feeds that scroll. A scrolling iFrame more commonly creates accessibility issues for users without a disability, since assistive technology can navigate the iFrame successfully. Often two primary concerns around scrolling iFrames are users trying to scroll the page but instead scrolling the iFrame due to cursor placement, and iFrame scrolling inconsistency, often resulting in a non-smooth scrolling experience where the iFrame will jump the scrolling bar back to the top while trying to scroll. Both situations often result in frustration from the user. 

Common Accessibility Mistakes Made Post-Launch

4. Text-heavy images

Did you know screen readers can't tell if an image has text in it? The best it can do is inform the user about the images associated with alternative text (see point 5). This means that any text in images will get completely missed by users with assistive technology, this can be especially important for images resembling posters, infographics, or alerts containing important information such as dates, times, and key details. Best practices include having key information in the website's content editor instead of, or in addition to it being on the image.

5. Links that open into new tabs

When redirecting a user through a link, it is best to avoid opening in a new tab, as a new tab will be a separate instance from the original. This removes the ability to utilize the back arrow for navigation, resulting in the need for tab changing, which can be difficult for those using assistive technology. 

6. Adjusting or requesting colours that create a non-accessible contract

It's fun to have flashy and vibrant colours, but unfortunately, bright colours can create too small of a contrast difference from white (the most common background colour). When navigating the site, it is important to be mindful of legibility and visual comfort. At Upanup we like to use WebAIM's colour contrast checker, looking for contrasts that meet at least WCAG AA standards. 

7. Placing non-emergency news in emergency alert sections

Web accessibility refers to a lot more than just what accommodates accessibility tools, one of those alternative categories is how intuitive the website is. Users have expectations of where to find certain information, and a lack of consistency with those expectations can be non-accessible. A common example we notice is inconsistent use of alerts, the wider the mix of how serious an emergency alert is can create accessibility issues in expectations from users around the field. We often recommend trying to be as consistent as possible with the severity of alerts, using alerts for more emergency-focused information, and relying on other sections such as news or notices for non-emergency information. 

8. Missing, inaccurate, or poor alternative text for images

Alternative Text is imperative for screen readers to be able to interpret images. They are a field that should be assigned to each image that contains a basic explanation of the contents of the image. We see the mistake of alternative text being left empty, inaccurately filled, or filled out insufficiently. For best practices, check out our: How to Write Alt Text Article

9. Not properly descending headings 

Screen readers rely heavily on using headings for navigation. Not only screen readers, but all users have become more adjusted to heading level expectations, and it causes a level of confusion when not followed properly. Headings should always be used when changing topics on a page. This is the primary way screen readers will be able to determine when a new section is starting. Headings also need to follow a sufficient descending order, as the heading size is specifically interpreted for a specific functionality, see below:

• Heading level 1
  • Heading level 2: a topic
    • Heading level 3: a subtopic
  • Heading level 2: a new topic

10. Autoplaying content: videos, gifs.

Autoplaying content may look nice, but can be quite disruptive and disorientating to users, especially those with disabilities using assistive technology. Auto player video can be difficult to locate and stop, causing frustration throughout the process. 

If you're interested in diving deeper into accessibility check out our: Upanup's Accessibility Article