Effectively Titling Your Website

Title tags (<title>My Website</title> for example) are a HTML element that defines the title of a specific page of your website. These titles appear in the “title bar” of your web browser (for this website it’s “PixelSheffield – Home” or “PixelSheffield – Effectively Titling Your Website” depending on which page you’re viewing this article on!) and are also visible when you view your website in a search engine results page. Since users first interaction with your website is very likely what they see on this search engine results page, it’s vital that you title your webpages effectively.

Here are some things to keep in mind when you’re titling your web pages:

  1. Make Sure EVERY Page Has a Title: The worst mistake you could make is to forget to even give your webpage a title at all! This may be difficult to ensure on a very large website with hundreds and hundreds of pages, but it’s vital that each page has one. If your page doesn’t have a title it won’t show up correctly in search engines (if at all), which will definitely result in a loss of potential visitors. Also make sure that each page has a different title and it isn’t using a default one provided by a WYSIWYG program.
  2. Utilize Relevant Keywords: If your website sells jewelry, you should definitely include jewelry-related keywords somewhere in your title tag. This could include relevant keywords like rings, necklaces, or even just jewelry! Having relevant keywords in your title will help users find you when searching for specific keywords, and the more people that can find you the higher your website will climb in the rankings. However, avoid keyword stuffing—most search engines can pick up on this and actually rank you lower.
  3. Be Accurately Descriptive: Your title tag should be descriptive of the page it’s representing. It makes no sense to title your page “Diamond Rings” if the page is all about sapphire necklaces. Make sure all title descriptions are accurate, while avoiding overly generic or verbose wording.
  4. Use the Optimal Length: If your webpage’s title is too long, search engines will actually truncate the title so that it fits on their results page. For Google the ideal title is between 50 – 60 characters long, and you should aim to for about this length. However, you should not sacrifice a good, descriptive title for the sake of squeezing under this character length.
  5. Don’t Forget to Include Your Brand: You should always include your brand name in the title tag somewhere; after all, you want to keep reminding visitors whose site they’re on! However, there is some debate as to where within the title tag you should include your brand name. A good rule of thumb is if your business is very well-known and the presence of that name can influence users to click the link to your website in the search results, put your brand name at the beginning of your title. Otherwise, add it onto the end.

Sources: [ Title Tag – Learn SEO – Moz ], [ Review Your Page Titles and Snippets ]

Hover Navigation: Yay or Nay?

You may have noticed that many websites utilizing a hover navigation system—this is when you “hover” over a navigation link with your mouse and this will usually result in some sort of animated transition or a drop-down list of subcategory links to appear. The question is: “Does using a hover-based navigation system do more harm than good?”

You’ll find that this a pretty divisive topic; some designers will swear that hover navigation is terrible and it’s use is on the decline, while others will defend its usefulness in high-content websites. Here are the pros and cons I see for using hover navigation in your website:

Pros

  • Hover navigation menus with drop-down subcategory links creates better website organization. Sometimes it’s very hard to narrow down the number of links in your main navigation, but you don’t want to have fifty links all vying for a spot at the top of your website. A great way to handle this is to have your main links on display while your subcategory links are hidden, discoverable with the user hover over the main category links. This allows you to keep all the links that you want, but display them in a more digestible and organized manner.
  • Another way to handle the organization issue is to have your main navigation link to a page with a list of your subcategory links. The drawback of this approach is that users are forced to load a new page, and this may increase time spent trying to find information in a not very positive way. Utilizing hover navigation reduces the amount of clicks a user has to do, allowing for quicker navigation to desired content.

Cons

  • It’s very easy to accidentally hover over your navigation, resulting in users opening up drop-down menus that may cover your content. This can surprise or disorient your visitor, confused as to why this navigation suddenly opened when they were trying to do something else.
  • Using hover navigation can force users into what is sometimes called a “hover tunnel”; this is the issue that is created when a user must navigate through a small space in order to reach a desired link. Accidentally moving away from the hover navigation can close up the drop-down menu, causing users to lose what they were looking for and having to repeat the process over again. Some drop-down menus are so small and tight that this is a very real issue, making clicking on a link a chore.
  • While hover navigation works well for desktop computers, it is nearly impossible to use for mobile devices. Tablets and smartphones rely on user touches and gestures; they don’t recognize “hovering”. Therefore, you’re forced to design an entirely new navigation for these mobile devices, which may mean you need to rework how you categorize your links.

So what do you think, which one is better? The best way to decide if hover navigation is right for your website is to test your website with real users before launching. When your website contains a large amount of information you may find that hover navigation is more beneficial, but never implement it at the cost of user satisfaction.

Sources: [ Why Hover Menus Do Users More Harm Than Good ], [ Hover is Dead, Long Live Hover ]

Speeding Up Your Website

When you create a website the hope is that many users will visit your website and stay for a while, perhaps resulting in some sort of conversion like a product purchase or a newsletter sign-up. However, if your website doesn’t load quickly there’s a great chance that your visitors will immediately give up and hit the back button. In today’s technologically-advanced society users are expecting quick delivery of information and if your website doesn’t load within a couple of seconds you’re potentially losing sales. Studies from Amazon confirm this, reporting that a simple 100 millisecond improvement in speed increased their revenue by 1%.

With this information in mind, here are some simple tips to improve the speed of your website:

  1. Minimize HTTP Requests: With each piece that your website has to download (stylesheets, javascript, images, etc.) the more HTTP requests you have to make. Multiple HTTP requests result in longer render times, and so the best solution is to streamline all your content. Keep all your CSS styles in one stylesheet, reduce the amount of javascript your page uses and keep it at the bottom of the page (which allows for all your important HTML content to load first), and use CSS instead of images whenever you can.
  2. Enable Browser Caching: When someone visits your website, the elements of your webpage are stored temporarily on your hard drive in a process known as caching. Caching allows users to come back to your website without having to re-download those page elements, creating a much speedier experience. While this doesn’t speed up your user’s initial visit, it will certainly speed up any subsequent visits they may make to your site.
  3. Optimize Images: The easiest way to optimize images is to make sure your images are a reasonable size in the correct format. One of the quickest ways to have an unnecessarily large file size is to save a picture at 2000px by 2000px size when you’re only using it for a 500px by 500px space. Cut down on the file size by already exporting the image as the smaller pixel size. You can also make sure that your file is saved in the correct format; while the PNG format is my personal favorite it also exports at the largest file size, and so you’re better off sticking with the GIF format for small, flat graphics and the JPG format for your photographs.
  4. Optimize Stylesheets: There are two ways that you can implement CSS onto your website: 1) externally, through an external stylesheet dedicated to CSS code, or 2) internally, using inline CSS that is intermingled with your HTML code. Out of these two options, the best option is to use external stylesheets; it reduces the size of your code and you’ll avoid accidentally duplicating your code, especially if you keep all your CSS code in one stylesheet file.
  5. Reduce Redirects: There are at least three ways a redirect can occur: 1) you direct URL to a new, updated location, 2) you direct users to a mobile version of your website when on a mobile device, and 3) you leave off the trailing slash on directory-pointed links. Having too many redirects can greatly increase your website’s loading speed, so keep these redirects to an absolute minimum.

So is your website fast enough? You can get started by testing your website on WebSiteOptimization, which will give you a report on potential problems while giving you recommendations on what areas to improve on.

Sources: [ 10 Ways to Speed Up Your Website ], [ Speedy Web Pages – Tips for Fast Downloads ]

Responsive Web Design

It was much easier to design websites back in the day where the only thing you had to view your website was your computer. There was only one screen size available, and so there was only one screen size that you had to consider when developing your design.

That’s no longer the case. Nowadays the number of screen sizes are growing exponentially as more and more devices get released. You now have to consider a wide range of devices: smartphones, tablets, phablets, desktop computers, televisions, and much more. In order to optimize your content for all of these devices, you must employ responsive design on your website. Responsive Web Design (or RWD) is the process of designing and developing websites that are able to react to user behavior and adapt to changing mediums (screen size, platform, orientation, etc.). Using RWD is important because it allows you to deliver web pages of variable sizes to ALL of these devices without having to create a new website for each and every screen size, which would just be tedious and awful.

responsive design

You can type in “responsive web design” into a search engine and pull up thousands of resources that go in depth about RWD concepts. Here are some of those basic concepts:

  1. Set the Viewport: The first thing you should do is throw this into your <head> section of your website…<meta name =”viewport” content=”width=device-width, initial-scale=1.0″>What does this do exactly? The meta viewport tag modifies the virtual viewport of the device, which in turn changes the behavior of the browser. The width=device-width matches the width of virtual viewport of the device to the physical width of the device, and the initial-scale=1 controls the zoom level when the page is first loaded. In short, this will make your content resize appropriately on every device.
  2. Do not use fixed units of measurement: Back in the day you could design a website down to the last pixel, having a fixed width and height for every element. However, pixel units are not RWD-friendly. Avoid pixels and stick with relative units like percentages (%) or ems. These relative units will adjust based on the screen size you’re using to view the content; for example, a <div> box with a width of 70% will ALWAYS have a width of 70% no matter if the screen size is 1000px wide or 500px wide. Percentages are best used for boxes that wrap content and images, while ems are best used for font sizes.
  3. Use CSS Media Queries: Using fluid units of measurement will certainly help you create a responsive design, but it will only get you so far. There will be several points where your design “breaks” (called breakpoints) and you’ll likely have to change some of your CSS styling to fix these breaks. However, in order to have these fixes only affect your design when the design actually breaks, you’ll have to utilize CSS media queries. These media queries will query your device to find out information such as browser or devices width or height, resolution, orientation, and much more. Based on the characteristics they query, they will target that characteristics and only have style changes take effect when the conditions are met. For example, say you want the background to change from black to white once the screen size gets smaller than 500px. This would be the code you’d put in your stylesheet:@media screen and (max-width: 500px) {
    body {background-color: white;}
    }
  4. Mobile first?: You may here the term progressive enhancement used when designers talk about RWD. Progressive enhancement is the idea that if you start designing a website at a mobile size and work towards a desktop size, you will ensure that your website will look good across all screen sizes. Designing for mobile devices certainly has more restrictions than designing for a desktop computer, and it’s much easier to add content rather than subtract from it. However, I personally do not think it’s a necessity to design starting with mobile first, and actually I always design my responsive websites starting with desktop sizes and going towards mobile devices. I think it comes down to a matter of preference; if you’re more comfortable with adding content then start with mobile, if you’re more comfortable subtracting content then start with desktop. Despite this, I agree that progressive enhancement is probably the best practice.

There are some things to consider before deciding if RWD is right for your website. The biggest item you should consider is whether your content is appropriate for small screen sizes. If your target audience never uses smartphones to look up your content, it would be a waste of time and money to design for mobile devices. Sometimes you may find that it might be better to create a web app for mobile devices completely separate from your website. While responsive design is something that is becoming more and more necessary as new devices get released, do take the time to consider if it’s right for your website.

Sources: [ Responsive Web Design Basics – Web Fundamentals ], [ Responsive Web Design – A List Apart ], [ Responsive Web Design: What It Is and How to Use It ]

Designing for Mobile Devices

Before we have a discussion about responsive design (which we will have very soon), I thought it might be a good idea to first examine what it takes to have good web design for mobile devices. When dealing with mobile design, it’s a constant battle to fit all of your content on a very small screen. Here are a few tips that will help you figure out how to present all your information while keeping user frustrations to a minimum.

  1. Simplify and optimize core content: With a desktop website, you can put in as much information as you’d like without problem (well, don’t put in TOO much). With mobile devices, the screen size is much smaller, and so you need to be choosy with your content. Only present the most vital information in small, scannable chunks and cut out the rest. Doing this will benefit your website in several ways: 1) you reduce the amount of scrolling a user has to do; 2) you decrease the loading time for your website; 3) relevant information is much easier to find; and 4) you have more available space so you can increase font size, reducing user eye strain.
  2. One-column designs: When viewing websites on a desktop computer, it’s very likely that you’ve seen many designs that use multiple columns. This makes viewing information easy, but on a mobile device this multi-column design will only make your text extremely tiny and difficult to read. You want to reduce your design to one column only, that way your images and content can utilize all the available space possible.
  3. Make buttons/links BIG: It’s easy to click on tiny links on a desktop; you have a tiny little arrow that you can move with precision with your mouse or trackpad. On a mobile device it’s very unlikely the you have this kind of accuracy so you must accommodate. Make buttons big and text links long, as this will give users more area to hit with their fingers.
  4. Consider hiding navigation: While you could have a large, button-style navigation at the top of your page, another space-saving option would be to hide your navigation. This is usually done by having a small icon with a menu symbol (usually three horizontal lines) that opens up to reveal menu links when the user touches the icon. The advantage of this is that you can have the icon fixed on the screen so that no matter how far down the user is on the page they can easily access it without it being obstructive.
  5. Keep file sizes small: Mobile devices are not going to have the same connectivity that desktops have. Loading rates are going to be much, much slower, and so it’s essential that you keep your file sizes as small as possible so total loading time is reduced. File sizes can particularly spike when it comes to images, so consider optimizing your images to appropriate file types and sizes (although you should be doing this anyways!).
  6. Use a responsive layout: If you’re designing for mobile devices, chances are that you’re not designing for just one device. With a vast multitude of screen sizes available, it’s best to design a responsive website. This means using relative units of measurements like percentages (%) or ems, rather than absolute units like pixels. In particular, you want to have images that scale nicely across screen sizes. Responsive design will be covered in more detail in another article.
  7. Reduce user input: If there is one common aggravation that most users have experienced, it’s trying to fill out a registration or some other form on a phone. It’s tedious to type out your information, and it’s even more irritating when your session times out as you try to hit submit. Therefore, you should try to keep form inputs to an absolute minimum. If a user is trying to register to your website, have them only provide a name, username and password; if you need more information beyond that, have them fill it out at a later time so they can complete it at their convenience.

As always, there is much more to consider when it comes to mobile design than what is listed here. However, I feel these seven tips are probably the most important to keep in mind the next time you’re designing your website.

Sources: [ A Look Into: Designing for Mobile Devices ], [ Mobile Web Mastery: 25 Tips on Designing for Mobile Devices ], [ Mobile Website Design: 30 Pro Tips ]

Simple Steps to Improve SEO

If you want more people to see your website, Search Engine Optimization (SEO) is the way to go. SEO is the process of improving a website to increase the amount of traffic the website receives from high rankings in search engine results. Basically, the higher up your website appears when someone searches for something in using Google, Bing, Yahoo!, etc., the more likely you are to get new visitors. Therefore, you want to have the highest ranking as possible in order to have more visitors coming to you instead of your competition. At the very least you want to get to a point where your website appears on the first results page, but ideally you want your website to rank in the top five positions.

Proper SEO is a time consuming process of constant researching, analyzing, updating and optimizing; it’s practically a full-time job. If you are a part of a large company,  you’re better off hiring someone that can do all of this for you. However, if you’re just starting out there are a few things you can do so you’re starting off on the right foot. Below is a quick list of some things you can do in your HTML code to improve SEO.

  1. Provide Meta Tags: Meta tags encompass a wide range of informational tags, such as author, description, keywords, and more, and they are all contained within the <head> section of your website’s code. While many sources indicate that the keyword meta tag is becoming less and less relevant, it’s still important to optimize your description meta tag. The description you write will be what is displayed under your website’s title on the search engine results page (SERP), so it’s vital to include appropriate keywords and information within this tag to be indexed.

    <meta name=”description” content=”Fresh Swirl Cafe breakfast restaurant provides a wide variety of omelets, fruit, biscuits and other pastries at an affordable cost.”>

  2. Write a Descriptive Title Tag: Just as the description meta tag will appear in the SERP, so does the text you put in the <title> tag; the text you put in this text will display the title of your website as a link that users can click on to visit your site, so you have to make sure enticing and informative. The coding for the title tag also appears within the <head> section of the code, but unlike the meta tags that remain hidden, this text appears at the very top of your browser window. It’s very important to include only relevant keywords that concisely describe your page’s content, as only the first 60 or so characters will appear in the SERP.

    <title>Fresh Swirl Cafe – Breakfast Restaurant</title>

  3. Keep Order with Heading Tags: Heading tags include <h1>, <h2>, <h3>… and so on. These tags define the hierarchy of your web page. The page’s main title should appear within the H1 tag, and you should only have one H1 tag on each page at a time. However, you can have as many H2, H3, etc. tags as you’d like, since these should act as subsections of your H1 tag that not only help break up your content in more readable chunks, but also help web crawlers (also known as spiders) categorize your information.

    <h1>Fresh Swirl Cafe</h1>
    <h2>About Us</h2>

  4. Create URL Links that Make Sense: You should always try to incorporate your web page’s title and other keywords into the URL of each page. When you link to this URL (within an anchor <a> tag, for example), these keywords will be indexed by web crawlers. In addition, it may help users remember your website easily since the URL will accurately describe the website’s contents.

    <a href=”http://freshswirlcafe.com/about-us.html”>Fresh Swirl Cafe</a>

All the information I’ve provided here barely scratches the surface of SEO; even though these tend to be the most important tags to try to optimize for, you should also aim to make sure your body text is also optimized. Keywords that you use in your title, description, and headings tags should also be reflected within the site’s content. However, try to avoid keyword stuffing, and only write what is relevant and what sounds natural.

Sources: [ SEO: The Free Beginner’s Guide ], [ What is SEO/Search Engine Optimization? ], [ Google SEO Starter Guide ]

Website Validation Part 2

Last week we talked about the importance of website validation, along with providing some tools you could use to validate your own website. Today I’ll be continuing this discussion by providing you with even more resources that you can use in your validation process, with a quick rundown of what each validation service offers.

W3C Link Checker: Another validation service by the lovely people at the World Wide Web Consortium (for those that do not remember from last week, the W3C is an international community that develops many of the web standards that developers adhere to today). This particular validator checks for any issues involved with the links, anchors, or referenced objects within your HTML markup or CSS style sheets. The last thing you want on your website is a broken link, as that translates to “bad upkeep” and will turn away potential customers.

Web Accessibility Checker: Do you remember the importance of web accessibility? Just as a refresher, web accessibility means having your website accessible to everyone, particularly focusing on people with disabilities. After you provide your website–either by entering your URL or uploading your code files–this validation tool will list out all the ways you can improve your website in its current state so that it is meets accessibility standards.

W3C mobileOK Checker: In today’s world, having your website accessible by mobile devices is becoming increasingly vital. This W3C checker performs a series of tests to specifically see if your website is mobile-friendly. I cannot stress enough the importance of having your website viewable on a tablet of smartphone (you will be missing out on a LOT of potential visitors if you do not design for these devices), so please do utilize this service to make sure your website is up to mobility standards.

Web Accessibility – AccessColor Tool: This tool complements the Web Accessibility Checker from before; this particular validation resource specifically checks for color contrast within your website. Its important that the text on your website contrasts sufficiently enough with your background color, otherwise no one can read your content! After providing your website for testing, this tool will actually rate the brightness and difference (contrast) of your text and background colors on a numeric scale, and point out exactly which bit of coding it’s referring to so you can easily remedy the issues.

Web Page Analyzer: Arguably one of the most important things to check for with your website is that people can actually access it. This website will go in and analyze the speed of your web pages; this refers to the download time of your text and images, or in other words, how quickly the web page loads on someone’s browser. After checking your website, it will warn you of any potential problems and offer recommendations on how you can improve the speed of your website.

These are all the validation tools I have to offer you for now. Hopefully you find these tools as useful as I do!

Website Validation Part 1

So you’ve just spent hours upon hours coding your website, and now it looks absolutely perfect. However, before you go publishing it on a server for the whole world to see, you should consider doing a quick validation check of your website. Validation just means checking your website to make sure the HTML, CSS, or XHTML are free from errors and up to web standards. You can do this by going through your code line-by-line and double-checking your work, OR the better option would be to use one of the Internet’s many validation tools!

There are tons of validation tools in existence, but here are just a few that I found to be helpful:

W3C Validation Service: You can’t go wrong with a validation service that is provided by W3C (for those that don’t know, W3C stands for World Wide Web Consortium, and they are an international community that develops many of the web standards that developers adhere to today). You can validate your code in three different ways: 1) provide a link to your website already on the web, 2) upload your files that contain the code, or 3) input the code directly into the text box on the validation site. This validator automatically detects the code you’re inputting, so all you have to do is hit the large “Check” button, and the validator will output a list of any warnings or errors that it finds.

W3C CSS Validation Service: While the first W3C validator website checks mostly for errors in HTML and XHTML coding, this validator is specifically designed to check CSS coding.

HTML Validator Pro: As you may suspect from the name, this website only validates HTML. However, this validator does provide some nifty tools that you can use. You can check specifically for spelling, broken links, or even page ranking.

Browser Shots: If you’re wanting to see how your website looks in different browsers, but you don’t want to go through the hassle of testing each and every browser individually, you’ll find Browser Shots to be a timesaver. Enter your website URL, and the validator will take screenshots of your website on any number of browsers of your choosing and then output them for you to see and compare.

As I stated earlier, it’s very important to validate your websites before you publish, as there are a lot of benefits to doing so. By validating your website, you ensure that it will be interpreted the same way by search engines, browsers and users, as your website will be conforming to web standards. This means that your website will become accessible to more people, which will boost your rankings in the search engines.

Compatibility across browsers is very important to check; sometimes there might be an error in your HTML/CSS code that Google Chrome might overlook, but it will mess up your code when viewed on Firefox. In regards to search engines, broken code (especially broken links) might be an indicator of a bad website, and so web crawlers may be wary about indexing your website. Things like this are vital if you’re trying to boost your web rankings, and so you should aim to validate your website not only when you first publish it, but every couple of months just to make sure everything is in working order.

Sources: [ Validating a Website ]

Web Accessibility is Essential

Something that is vital to the success of a website—but oftentimes people forget about—is web accessibility. Web Accessibility means having your website accessible to people with disabilities. These disabilities can be visual (blindness, color blindness), hearing-related (deafness), motor-related (inability to use a mouse), or cognitive (learning disabilities). It’s important to consider accessibility when building your website, otherwise you’re excluding quite a few people from your target audience! Here I will be listing some basic things that you should consider when designing your website to be accessible, but for further and fuller details on the matter you should check out the sources I’ve linked to at the bottom of the page.

  1. Provide “alt” content for images:
    Add alternative text for non-textual items; for instance, for a photo of roses you can go into the <img src=”roses.jpg” /> tag and add an ‘alt = “Red Roses”‘ attribute inside the tag (so in the end it would look like <img src=”roses.jpg” alt=”Red Roses” />). Doing this will provide text for screen readers, so those who are blind are still able to know what the content is.
  2. Provide clear document structure:
    Not only does having a good document structure important when coding, but it can also be beneficial to those utilizing screen readers. Providing structural elements (headings, lists, navigation, etc.) gives meaning to your content, which makes it easier for users to understand the purpose of each bit of content. For example, having <h1>Roses</h1> tells users that this is likely the main subject of the page.
  3. Make all elements accessible by keyboard:
    Some users do not always have a mouse, and some users may not have the fine motor skills necessary to control a mouse. Therefore, you should aim to have all your website elements accessible through a keyboard and not solely rely on a user having a mouse; having a good document structure can help with this as it allows for users to be able to tab through content.
  4. Provide transcripts for podcasts, video, etc.: 
    For users who have hearing disabilities, they will not be able to listen to your podcasts or videos. Provide a transcript for your audio-based content so that users are able to read the content. Not only will you make your content more accessible to users, but it will actually help boost your website’s ranking in search engines (spiders and bots cannot hear either!).
  5. Do not rely on color alone to convey meaning:
    Color blindness is not uncommon, and so you should try to refrain from making content dependent on color. A warning text (such as <span>Alert:</span>) that only stands out because it is colored red does not make it accessible; you should try adding other styles to help it stand out, such as making it bold, uppercase, AND red.
  6. Provide meaningful headers and captions to content:
    Having appropriate headers and captions can help give content some context in the grand scheme of the webpage. This is particularly important for table elements that rely on data organization (so make sure every column has the correct <th> table header tag).
  7. Make text links sensible: 
    When providing links on your webpage, don’t use link titles such as “Click Here”, “Link” or “More”. Some screen readers skip straight to links, and having titles such as these out-of-context can be very confusing to a user. Aim to have clear and meaningful titles that make sense no matter where you see them, such as “Types of Roses” or “How to Care for Roses” that give a good indication of what page you’re able to navigate to.

As stated before, these are just some very basic tips that you can keep in mind when designing your website to be accessible; there are LOTS more that you can (and should) consider, so I recommend researching more on the topic.

Don’t think of web accessibility as something that only affects disabled users—web accessibility can be beneficial to non-disabled users as well, such as those with slow internet connection, or those who might have a temporary disability, etc. If you’re able to do so, you should aim to provide equal opportunity to all of your users to access your content.

Sources: [ Introduction to Web Accessibility ], [ Accessibility ], [ WebAIM: Introduction to Web Accessibility ], [ What is Web Accessibility? ]