12 Accessibility Techniques You Should Know – Part 2 of 3

Welcome back to our 3-part series on Accessibility Techniques you can implement on your own. In this blog, we discuss about optimizing your content for accessibility.

Choose an underlying framework that is supportive of accessibility

This is the first decision you have to take correctly. Your framework, or content management system (CMS), acts as a base for the content you would be sharing with the world. If your CMS itself is not helpful for accessibility, the rest of things you do with the actual content won’t matter. It’s like putting groceries into a bag of weak fabric. However carefully you tie up the bag, if the bag tears open at the bottom, your groceries are bound to spill out.

Examples of CMSs include WordPress, Blogspot, Drupal and many others. However, most web applications today aren’t built from scratch. A majority of frameworks provide templatized themes, which are simply a pre-set collection of features, widgets, and functionality. These themes come with their own documentation. We would advise you to go through the Accessible Theme for WordPresss .or look for D7AX Hashtag for Drupal themes and modules. You know best what type of content you’d be putting out. If you are thinking of hosting a lot of videos, you ought to see if your theme supports video streaming services that allow publishing accessible videos. Along with video content, the textual content needs to be presented in such a way so that it is easily readable for people with low-vision or reading disabilities. In this context, it is recommended to check for compatible font-types within the themes. Further, there are plugins like User Way accessibility toolbar which provide accessibility features for low-vision and colour blind users. Just in case, you need to ensure accessibility for such users, these plugins help adjust color contrasts, font size and also at times provide features like read out page contents.

Alt Text for Images

Screen readers use the Alt text HTMl attribute to present images. Visually impaired people are actually ‘reading’ images. Rather than render an image, a screen reader simply replaces the image with its alt text. Make sure your alt texts are descriptive, and clearly depict what the image is all about. As with the previous point, this is also considered a good SEO practice, so there are side benefits to doing this! The caveat: decorative images should have empty alt attributes (alt=””). Decorative images are images that are used to beautify a page. Perhaps it’s a background texture, or a filigree that adds creative value to the webpage UI. But since they do not add informational value to a reader, they become distractions.

Multimedia

As we discussed in the point about dynamic pages, the user may not even be aware of the changes on the page, unless you have clear indicators that content on the page changed. Videos that auto-play, slideshows that have a carousel of slides, sliding banners that slide on a timer etc. are all jarring factors. A user is likely going to get frustrated and leave your website. There are a couple of things you can do to prevent this.

1. Don’t set videos on auto-play. Also, have the controls for play / pause / jump to next etc. below the video area, which can be reached using tab. The user should feel in control of the multimedia, and should not rush to keep up with the video as it plays without consent. Keep a written script of the video ready for those who cannot interact with videos at all. You can use apps that automatically create captions that synchronize with the video.
2. PPTs should be rendered as a set of images, each with its own alt texts. As with video, slides should have controls for transitions. Avoid fancy animations and speedy transitions.

• All multimedia navigation should be triggered through user events. Avoid automatic navigation.

Tables

When it comes to tables, one would feel this is probably quite easy to implement from an accessibility standpoint. But ready to use grid widgets give simple solutions to generate tabular content when data is supplied to it. With such simple options at hand, accessibility sometimes goes for a toss. Although the grid widgets provide nice looking tables which are responsive in nature, the probable accessibility threat they pose include implementation of invalid semantics, incorrect or invalid relationship of data with headers, visual-only implementation of complex functionalities, lack of status updates on tasks like sorting and filtering, etc..

Another aspect is the difference between concept of a table and a grid. Both these components help render and present tabular data but one of the most important aspect from an accessibility standpoint is operability. More interactive a table becomes, the more it is a candidate for grid implementation. Best way to notice this difference is by comparing how the keyboard operates inside an MS Word table vs how it operates inside an MS Excel worksheet. The one in Word document is a table whereas the one in Excel worksheet is a grid. Use arrow keys and you will notice how cells are quickly navigated in a grid when compared with table.

Few things to watch out for while handling accessibility of tables or grids include captioning a table, declaring header cells, sorting/filtering features, live announcements for data processing and rendering delays, degree of interactivity on table elements and so on.

Consistent User Interface

While implementing global navigation mechanisms across the web application, care needs to be taken to ensure that the same set of links repeating across the pages appear at the same place and in same sequence. Screen reader users would expect the same set of links to be accessible by not needing to find and locate the navigation on new set of pages. Low-vision users also can simply trust this consistency and activate links without trying to strain their vision to read the link text repeatedly on every page.

Similarly, the types of controls used across the web application or the website should be identified consistently. For example if a search button is presented as a button with magnifying glass icon on home page, then same icon, color and UI control (button in this case) should be used for search feature on other pages like products.

There you have it! 5 potent tips for making your online content accessible. If you need more guidance on accessibility, connect with us, and we will get back to you with answers to all your queries.

 

End of Part Two of our blog series on accessibility techniques.