On HTML and CSS…

How do blind people use the internet?

Unfortunately, I can’t say that this is something that I had spent any time thinking about until today, and I worry that not enough web developers think about it either.

To set this scene: this week’s challenge has been to develop a web version of a Sudoku Solver, using Sinatra. Every day of the week, we arere introduced to another topic, all of which, when combined, will help us to make the most out of the task. For example, we’ve covered HTTP, where we learnt how information is formatted and transmitted across the World Wide Web, and the actions that Web servers and browsers take to process various commands. We’ve also been introduced to Heroku, where deploying an app for a web developer has never been so easy and is literally ‘a git push away’. What this means is that after you’ve installed and configured the necessary settings for Heroku, you simply type ‘git push heroku master’ into your terminal, and voilà – your app is online!

For me, the most interesting introduction of the week was that of HTML and CSS, even though I’m already familiar with them. Enrique really tried to get across to us the importance of keeping HTML as a purely structural device, with a focus on the semantics of your page. That is, when someone is reading your page, tags and all, the HTML should give an indication of the type of each part of text and how it fits into the overall structure. Trying to incorporate any styling in your HTML does not only confuse your focus, but also confuses the purpose of the HTML, and how it differs from CSS. To demonstrate the power of CSS, Enrique showed us the CSS Zen Garden, where we looked at a series of pages that all had exactly the same underlying HTML, but looked incredibly different to one another.

It still wasn’t entirely clear to us why the semantics of HTML was so important, and that we should do our utmost to avoid <div> and <span> tags. After all, nobody really looked at the source code; all that mattered was that the page looked how you wanted it to look…

Well, to have such a view is to discriminate against those who don’t typically read, or see, webpages the way those fortunate with sight do. Blind people have to rely on readers when they visit webpages and try to locate particular information. If you litter a page with <div> and <span> tags, you’re making it incredibly difficult for those relying on readers to work out what is going on within your page and where the focus should be. In some cases this can really be a nightmare and, frankly, it isn’t fair or right that developers don’t keep this in mind when designing their pages. It can almost be like saying to those who cannot see: “I’m sorry. I couldn’t be bothered to make the page easy for you to access as well. Tough luck.”

It’s even a legal matter. All UK websites are legally obliged to ensure that they are accessible to every potential user. Some websites may have links or applications that cannot be ‘read’ by screen readers, and this is classed as unlawful under the Equality Act of 2010. To alleviate this problem, all visual aids must be accompanied by text links. It turns out that 20 per cent of web users have problems accessing websites where disabled people have not been kept in mind. However, as a member of my cohort pointed out during the discussion, there still remains a difference between compliance and usability. That having been said, making your website accessible to those who are blind or have other disabilities does not mean that you have to sacrifice any other element of design or user experience. You just have to make the extra effort so that your web page can be read by all. And that is how it should be.

To read more on this, check out this Gizmodo article.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s