Accessibility

People visiting your web pages may be partially sited or blind here are some ways you can improve your pages to give them a better user experience. Here is a little insight into how Screen Readers work and what you can do as a designer to help. Not thought of this before? We all should be more thoughtful of others.

Image alt tag

By default when you add an image to the page in Flux it Generates an <alt> tag for you. All you need to do is add some text.

Image showing where to find alt tag.

A little thought about the text you use can make a lot of difference to a partially sighted or blind person. Img 001 says nothing where as happy clown riding unicycle whilst juggling paints a picture. The Screen Reader reads this text aloud so it is worth putting a little thought into what you write.

Code Order

In short code order matters when building web pages.

When teaching Flux to beginners something I suggest is to take some black tape and cover over the Containers menu item Quick Div. It is the first item in the list and people are drawn to it not knowing the consequences of using it. It is an absolute positioned div and in one simple key-press messes up a beginners layout. Use floating Quick Div this is relative positioned and a far better place to start.

Beginners using absolute positioned containers tend to build the page out of order, Screen Readers read text in code order. If the page is constructed with little or no thought about the order of the page then what is read to a blind person can make little sense. Using Floating Quick Div can really help the beginner keep page order on track and more importantly help with an elastic design, see next section.

Elastic design and Overflow

This sort of thing makes me cringe, perfectly good text screwed up by lack of thought from the designer.

Example of increased font size causing overlapping text.

Within most browsers the user can choose the minimum font size and can increase font size across any page. In Safari set View -> Zoom Text Only then zoom in and out. Partially sighted people use this to help them view your page. Designing a page without elasticity to accommodate this is failing to take into account other peoples needs, if you really need an element to be an exact size then you can set the overflow to scroll.

One of the first things I do to test someones page is increase the text size, if the design is elastic I know the designer has thought about what he/she is doing, thinks about others and is conscientious.

With more high definition/pixel density monitors being used it is often necessary to increase font size just to make viewing more pleasurable.

Tip

Take some black tape and cover over the Containers menu item Quick Div, use Floating Quick Div instead.

Increase text size to test page for elasticity.