I have attended an event yesterday to discuss the accessibility features and how those can be integrated into the design and development phases. 

here is a summary of what we have learned. 

the even is called <A11Y_Leeds> where we learned more about accessibility and how users like to use its features on TVs, Websites and mobile devices. Also, Sky demonstrated its new framework, “Orion”.

We were given examples of some apps that are impossible to use with Voice-Over. such as apps that display custom calendar widgets (i reckon it was a JQuery one from the look of it). voice-over read it like “mon-tue, wed, ….. fri, 1st, 2nd, 3rd and continued to the end of the month).

another example maps app (maps for London). the main screen has three buttons. voice-over read it “button-button-button” without reading the labels or giving any context.

Useful techniques we learned:

1- Group the visual elements. an example of this was a hotel booking app. The first version of the app read every detail on every ad individually “Hilton 22miles to city centre £300 £250 ad discounted book book book button” which confused everyone. also, it confused numbers. 22 miles is actually a 2 for the number of available rooms whereas the other 2 is the actual distance.

the second version of the app grouped those elements next to each ad to read nicely “a hotel named Hilton is 2 miles away from the city centre. the original price was 300 discounted to 200. button press to book”.

2- use the grid layout where possible. The flex design system allows elements to expand to occupy the full width of the screen. when users zoom in to the app, the expanded element will be pushed below the other elements that it was inlined with and grow to fill in the screen width.

3- modularity: create modules for accessibility and version them in git to compare versions when the design evolves.

4- do not use text over images when possible. and if required try to put the text inside a box that has a solid background colour and place the box over the image.

5- use a standard tool to check for adequate colour contrast and font size. wave can do this?

6- apply extremely large fonts on the website and see what breaks. this preempts the team for which areas need more attention than the others.

7- communicate in advance and question each story for accessibility.

A11y_Leeds on Twitter