When I was entering the front end developer ranks, no one talked to me about accessibility. I didn’t know you could break the law by having an inaccessible website, until one day a university client came to my team for help on performing an accessibility audit. Man was I in over my head. I started digging in and doing research, but found a lot of the documentation intimidating. Some of it was over my head. There was so much to digest, but I eventually made my way through. (Well, I’m actually still making my way through). I’ve since learned that accessibility doesn’t have to be intimidating, and can even be fun. What would have helped me at the beginning were a few practical principles to help me grasp the basics. So let me share with you: Ben’s homegrown web accessibility principles. They’re not rules. They are mental shifts that I had to make when I started developing accessible websites. Let’s get into it. Principle 1: Web design is more than graphic designWhen I started my first web job, I was handed a picture of a website and asked to turn it into a website. After I did that, the designers then meticulously compared my website to their picture of a website and told me all the mistakes I made.
Stuff like that. They were very impressive and I learned a ton. But none of us really considered that the web is not a controlled medium. We were so concerned with the visual elements of the work that we didn’t consider how the site might perform on a $99 Android phone over 3G, or for someone who was color blind, or someone who couldn’t see at all. And the fact that the web can be accessed by different people in different situations is what makes web design so much more than graphic design. So instead of focusing merely on visual elements, I split my work into three main tasks. Three tasks of web designTask 1: Write good (read: semantic) markup The first task is to write good markup. This means organizing the content on the page well. Using HTML the way it was meant to be used. HTML is accessible by default. So if we get this right from the beginning, our jobs are so much easier. We’ll spend some more time on this a little later. Task 2: Enhance the markup with CSS The second task is to use CSS to enhance the excellent markup that we have written. CSS should be used to emphasize the meaning of your content. It should make it more meaningful, more impactful. But you’ve got to use the right HTML to begin with or your job will be a lot harder. Task 3: Layer interactivity on your HTML and CSS with JavaScript The third task is to layer interactivity over the structure and style with JavaScript. Before and afterBefore adopting this approach, I used to just reach for the element that was easiest to style, and use that.
Stuff like that. But that only focuses on the visual aspects. To build accessible websites, we need to think about more than just how closely the site matches the picture. It’s more than visual design or graphic design. That’s why we call it web design. This brings us to principle 2. Principle 2: Be ASAP (as semantic as possible)Here’s how I recommend doing this. Every time you start typing Stop. Look in the mirror. And ask yourself. Could I use a more semantic element? How do you know if there is a more semantic element to use? The Mozilla Development Network has a page of all HTML elements organized by their purpose. (This reference is awesome — use it!) Let’s look at some of the semantic alternatives we have for Alternatives to
|
AuthorPleasure to introduce myself I am Jamie 27 years old living in Searcy, AR. I am web developer and have developed over 50 sites for clients. Now a days I am focused on designing as I feel I am lacking it. Archives
April 2019
Categories |